CefSharp和Vue互動開發

一、Web端調用C#代碼

要實作Web端調用C#代碼，CefSharp要求先定義一個對象，綁定到浏覽器中。我們可以任意定義一個類，裡面是需要在網頁中調用的方法，如下所示：

public class BoundObject
{
    public void doSomething(string para)
    {           
    }
}
           

然後通過以下語句綁定到浏覽器中：

Browser.JavascriptObjectRepository.Register("boundCef", new BoundObject(this), true, BindingOptions.DefaultBinder);
           

在上面的代碼中，boundCef是在Web端使用的綁定對象名。

在Web端，調用的方法如下：

CefSharp.BindObjectAsync("boundCef");

boundCef.doSomething("para");
           

二、C#調用Web方法

首先需要在js代碼裡定義一個方法，如：

function doSomething(para){
}
           

然後在C#端直接調用：

Browser.GetBrowser().MainFrame.ExecuteJavaScriptAsync("doSomething('para')");
           

但是前端使用Vue的話，元件裡的方法沒辦法對外公開。這時候，可以使用自定義事件解決。在Vue元件裡，添加事件偵聽：

document.addEventListener("event_name", (ev) => {
  let para = ev.detail.para;
});
           

然後在C#端這樣調用：

Browser.GetBrowser().MainFrame.ExecuteJavaScriptAsync("document.dispatchEvent(new CustomEvent('event_name', { detail: { para: 'para' } }));");
           

三、視窗事件的處理

視窗事件包括最小化、正常化、最大化和關閉等。如果在WPF裡，使用了WindowStyle="None"，視窗控制的按鈕都在Web端，就需要處理這些動作。

點選視窗控制按鈕時，調用C#代碼裡的控制方法，即可實作對視窗狀态的控制。

另外，最大化不一定是點選最大化按鈕才出現的，把視窗拖到頂部也會最大化。是以視窗目前是否最大化（顯示正常化還是最大化按鈕），需要偵聽WPF視窗狀态改變事件。

四、拖動标題欄的實作

在WPF裡，偵聽标題欄的MouseLeftButtonDown事件，然後調用DragMove()方法，即可實作視窗的拖動。但如果我們在Web端偵聽mousedown事件，然後調用C#端的DragMove()方法，發現是行不通的。我們必須在WPF元件的MouseLeftButtonDown事件裡寫才行。

這裡使用的方法是這樣的：在界面上添加一個Path元件，背景幾乎透明（背景色為#01FFFFFF），蓋在CefSharp浏覽器之上。Path的區域，剛好是标題欄所在的位置。這樣，我們偵聽這個Path元件的MouseLeftButtonDown事件即可。問題的難點可能是描述Path的區域。這個可以在Web端，通過getBoundingClientRect()方法，得到标題欄的區域，然後傳給C#端。