在 WebView2 中自訂操作功能表

  • 發行項

WebView2 控制項提供預設操作功能表，而且您可以在使用 WebView2 控制項時建立自己的操作功能表。 使用 CoNtextMenuRequested API 自訂操作功能表， (WebView2 應用程式) 按一下滑鼠右鍵功能表。 例如，您可以執行下列任何動作：

  • 新增自訂操作功能表。

    您的主應用程式可以使用從 WebView2 操作功能表傳送的資訊來繪製自己的操作功能表，而不是使用預設操作功能表。 您的應用程式會 ContextMenuRequested 處理事件。 您可以使用 事件自 ContextMenuRequested 變數中提供的資料，以顯示自訂操作功能表與您選擇的專案。 在此情況下，您會處理 事件並要求延遲。

    您可以將預設功能表項目和/或自訂功能表項目新增至自訂操作功能表。

  • 將預設功能表項目新增至自訂操作功能表。

  • 將自訂功能表項目新增至預設操作功能表。

  • 從預設操作功能表中移除預設或自訂功能表項目。

  • 停用操作功能表。

術語：

術語 定義
功能表項目 廣泛詞彙。 包含核取方塊、命令、選項按鈕、分隔符號和子功能表。
命令 窄字詞。 五種功能表項目類型的其中一種。
操作功能表 預設操作功能表 (屬於 WebView2 控制項的按一下滑鼠右鍵功能表) ，或屬於主應用程式) (按一下滑鼠右鍵功能表的自訂操作功能表。

新增自訂操作功能表

您的主應用程式可以使用從 WebView2 操作功能表傳送的資訊來繪製自己的操作功能表，而不是使用預設操作功能表。 您的應用程式會 ContextMenuRequested 處理事件。 您可以使用 事件自 ContextMenuRequested 變數中提供的資料，以顯示自訂操作功能表與您選擇的專案。 在此情況下，您會處理 事件並要求延遲。

當使用者從您的自訂操作功能表中選取命令時，您的應用程式必須使用 屬性，告知 WebView2 控制項使用者選取的 SelectedCommandId 命令。

您可以將預設功能表項目和/或自訂功能表項目新增至自訂操作功能表。

若要顯示包含所需功能表項目的 CoreWebView2 自訂操作功能表，請使用CoNtextMenuRequested 事件中所提供 CoreWebView2ContextMenuRequestedEventArgs 的資料。 在此情況下，您會將 指定 Handled 為 true ，並要求延遲。

在事件上 CoreWebView2.ContextMenuRequested ，新增具有 CoreWebView2ContextMenuRequestedEventArgs 的事件接聽程式。

的 MenuItems 屬性 CoreWebView2ContextMenuRequestedEventArgs 會針對以滑鼠右鍵按一下的內容，提供 WebView2 操作功能表項目目的樹狀結構。 若要在應用程式的操作功能表中包含 WebView2 操作功能表項目目，請逐一 CoreWebView2ContextMenuItem 查看 IList<CoreWebView2ContextMenuItem> ，為每個功能表項目新增 。 .Kind測試每個功能表項目的 ，例如 Command 或 Separator 。

範例：新增自訂操作功能表

下列範例會以 Win32/WPF 操作功能表格式呈現 WebView2 操作功能表。

webView.CoreWebView2.ContextMenuRequested += delegate (object sender, 
                                    CoreWebView2ContextMenuRequestedEventArgs args)
{
    IList<CoreWebView2ContextMenuItem> menuList = args.MenuItems;
    CoreWebView2Deferral deferral = args.GetDeferral();
    args.Handled = true;
    ContextMenu cm = new ContextMenu();
    cm.Closed += (s, ex) => deferral.Complete();
    PopulateContextMenu(args, menuList, cm);
    cm.IsOpen = true;
};
void PopulateContextMenu(CoreWebView2ContextMenuRequestedEventArgs args, 
IList<CoreWebView2ContextMenuItem> menuList, ItemsControl cm)
{
    for (int i = 0; i < menuList.Count; i++)
    {
        CoreWebView2ContextMenuItem current = menuList[i];
        if (current.Kind == CoreWebView2ContextMenuItemKind.Separator)
        {
            Separator sep = new Separator();
            cm.Items.Add(sep);
            continue;
        }
        MenuItem newItem = new MenuItem();
        // The accessibility key is the key after the & in the label
        // Replace with '_' so it is underlined in the label
        newItem.Header = current.Label.Replace('&', '_');
        newItem.InputGestureText = current.ShortcutKeyDescription;
        newItem.IsEnabled = current.IsEnabled;
        if (current.Kind == CoreWebView2ContextMenuItemKind.Submenu)
        {
            PopulateContextMenu(args, current.Children, newItem);
        }
        else
        {
            if (current.Kind == CoreWebView2ContextMenuItemKind.CheckBox
            || current.Kind == CoreWebView2ContextMenuItemKind.Radio)
            {
                newItem.IsCheckable = true;
                newItem.IsChecked = current.IsChecked;
            }

            newItem.Click += (s, ex) =>
            {
                args.SelectedCommandId = current.CommandId;
            };
        }
        cm.Items.Add(newItem);
    }
}

將功能表項目新增至操作功能表

您可以：

  • 將預設功能表項目新增至自訂操作功能表，如上述「新增自訂操作功能表」所示。

  • 將自訂功能表項目新增至預設操作功能表，如下所示「將自訂功能表項目新增至預設操作功能表」。

將自訂功能表項目新增至預設操作功能表

若要將自訂功能表項目新增至預設操作功能表，請使用下列 API 專案。

範例：將自訂功能表項目新增至預設操作功能表

下列範例會將 [顯示頁面 Uri] 命令新增至 WebView2 操作功能表。

webView.CoreWebView2.ContextMenuRequested += delegate (object sender, 
                                    CoreWebView2ContextMenuRequestedEventArgs args)
{
    // add new item to end of collection
    CoreWebView2ContextMenuItem newItem = 
                        webView.CoreWebView2.Environment.CreateContextMenuItem(
        "Display Page Uri", null, CoreWebView2ContextMenuItemKind.Command);
        newItem.CustomItemSelected += delegate (object send, Object ex)
        {
            string pageUri = args.ContextMenuTarget.PageUri;
            System.Threading.SynchronizationContext.Current.Post((_) =>
            {
                MessageBox.Show(pageUri, "Page Uri", MessageBoxButton.OK);
            }, null);
        };
    menuList.Insert(menuList.Count, newItem);
};

從預設操作功能表中移除功能表項目

您可以從預設操作功能表中移除預設或自訂功能表項目。

範例：從預設操作功能表移除功能表項目

下列範例會從 WebView2 操作功能表中移除 [另 存映射為 ] 命令。

webView.CoreWebView2.ContextMenuRequested += delegate (object sender, 
                                    CoreWebView2ContextMenuRequestedEventArgs args)
{
    IList<CoreWebView2ContextMenuItem> menuList = args.MenuItems;
    CoreWebView2ContextMenuTargetKind context = args.ContextMenuTarget.Kind;
    if (context == CoreWebView2ContextMenuTargetKind.Image)
    {
        for (int index = 0; index < menuList.Count; index++)
        {
            if (menuList[index].Name == "saveImageAs")
            {
                menuList.RemoveAt(index);
                break;
            }
        }
    }
};

偵測使用者何時要求操作功能表

本節說明如何偵測使用者何時要求開啟操作功能表。 自訂或預設操作功能表也是如此。

當使用者要求開啟操作功能表 (例如以滑鼠右鍵按一下) 時，您的應用程式必須接 ContextMenuRequested 聽事件。

當您的應用程式偵測到此事件時，您的應用程式應該執行下列一些組合：

  • 將自訂功能表項目新增至預設操作功能表。
  • 從預設操作功能表中移除自訂功能表項目。
  • 開啟自訂操作功能表。

事件 ContextMenuRequested 表示使用者要求開啟操作功能表。

WebView2 控制項會引發此事件，指出使用者要求在 WebView2 控制項中開啟操作功能表，例如以滑鼠右鍵按一下。

只有在目前的網頁允許顯示操作功能表時，WebView2 控制項才會引發 事件;也就是說，如果 AreDefaultContextMenusEnabled 屬性為 true ，則會引發 ContextMenuRequested 事件。

CoreWebView2CoNtextMenuRequestedEventArgs包含下列資訊：

  • 要填入自訂操作功能表的 ContextMenuItem 已排序物件清單。 已排序的清單包含下列專案：

    • 功能表項目的內部名稱。
    • 功能表項目的 UI 標籤，在 UI 中向使用者顯示。
    • 功能表項目的種類。
    • 鍵盤快速鍵描述，如果有的話，例如 Alt+C。
    • 自訂功能表項目的任何其他屬性。

  • 要求操作功能表的座標，讓您的應用程式可以偵測使用者以滑鼠右鍵按一下哪個 UI 專案。 這些座標是根據 WebView2 控制項的左上角所定義。

  • 選取物件，其中包含選取 的內容類型和適當的操作功能表參數資料。

當使用者在操作功能表上選取自訂功能表項目時，WebView2 控制項 CustomItemSelected 會引發事件。

當您的主應用程式向 WebView2 指出使用者已在操作功能表上選取功能表項目時，WebView2 會接著執行選取的命令。

偵測使用者何時選取自訂功能表項目

您的主應用程式可以處理使用者選取的功能表項目，或者您的應用程式可以將功能表項目傳回 WebView2 控制項，以處理使用者選取的功能表項目。

您的主應用程式應該接 CustomItemSelected 聽事件，當使用者在預設或自訂操作功能表上選取自訂功能表項目時，就會引發此事件。

WebView2 控制項會引發此事件，指出使用者已選取應用程式新增至操作功能表的自訂功能表項目。

如果使用者選取自訂功能表項目， CustomMenuItemSelected 則會在選取的內容功能表項目物件上引發事件，在這些情況下：

  • 應用程式會新增自訂功能表項目，但會將操作功能表 UI 定義到 WebView2 平臺。

  • 應用程式會新增自訂功能表項目、顯示自訂 UI，並將 屬性設定 SelectedCommandId 為自訂功能表項目的識別碼。

將選取的命令功能表項目報告至 WebView2

當使用者選取 WebView2 操作功能表命令 (自訂操作功能表) 中的預設功能表項目時，主應用程式可以選擇性地將該選取專案報告給 WebView2，讓 WebView2 叫用命令。

自訂功能表項目

如果您的主應用程式將自訂功能表項目報告為選取的功能表項目，則 CustomMenuItemSelected 會針對自訂功能表項目引發事件。

停用操作功能表

屬性 AreDefaultContextMenusEnabled 會控制是否可以開啟任何操作功能表。 如果 WebView2 AreDefaultContextMenusEnabled 設定設為 False ，則會停用操作功能表，且 ContextMenuRequested 不會引發事件，例如使用者按一下滑鼠右鍵時。

API 參考概觀

另請參閱