共用方式為

在 WebView2 中自訂上下文選單

WebView2 控制項提供預設的右鍵選單，使用 WebView2 控制項時，你可以建立自己的右鍵選單。 使用 ContextMenuRequested API 來自訂 WebView2 應用程式) 的右鍵選單 (右鍵選單。 例如，你可以做以下任一：

  • 新增自訂的右鍵選單。

    你的主機應用程式可以利用 WebView2 右鍵選單傳送的資訊，自行繪製自己的右鍵選單。 你的應用程式會處理這個 ContextMenuRequested 事件。 你可以利用 事件 ContextMenuRequested 參數中提供的資料，顯示自訂的右鍵選單，並選擇你選擇的條目。 在這種情況下，你負責事件並申請延期。

    你可以將預設選單項目和/或自訂選單項目加入自訂的右鍵選單。

  • 將預設選單項目加入自訂的右鍵選單。

  • 將自訂選單項目加入預設的右鍵選單。

  • 從預設的右鍵選單中移除預設或自訂選單項目。

  • 關閉右鍵選單。

術語：

術語 定義
菜單項目 這是一個很廣泛的詞彙。 包含核取方塊、指令、單選按鈕、分隔符和子選單。
令 這是一個狹義的詞彙。 菜單上的五種類型之一。
上下文選單 要麼是 WebView2 控制項) 預設的右鍵選單 (右鍵選單，要麼是屬於主機應用程式) 自訂右鍵選單 (右鍵選單。

新增自訂右鍵選單

你的主機應用程式可以利用 WebView2 右鍵選單傳送的資訊，自行繪製自己的右鍵選單。 你的應用程式會處理這個 ContextMenuRequested 事件。 你可以利用 事件 ContextMenuRequested 參數中提供的資料，顯示自訂的右鍵選單，並選擇你選擇的條目。 在這種情況下，你負責事件並申請延期。

當使用者從自訂右鍵選單選擇指令時，應用程式需要透過該 SelectedCommandId 屬性告訴 WebView2 控制項使用者選擇了哪個指令。

你可以將預設選單項目和/或自訂選單項目加入自訂的右鍵選單。

若要顯示包含你想要選單項目的自訂右鍵選單，請使用 ContextMenuRequested 事件中CoreWebView2CoreWebView2ContextMenuRequestedEventArgs提供的資料。 在這種情況下，你指定 Handled 為 ， true並請求延後。

在事件中 CoreWebView2.ContextMenuRequested ，加入一個具有 CoreWebView2ContextMenuRequestedEventArgs.

MenuItems屬性 CoreWebView2ContextMenuRequestedEventArgs 的屬性提供了 WebView2 右鍵選單中右鍵上下文項目的樹狀結構。 若要在應用程式的右鍵選單中加入 WebView2 的右鍵選單項目，請依 IList<CoreWebView2ContextMenuItem>序為每個選單項目新增一個 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 項目。

範例：將自訂選單項目加入預設的上下文選單

以下範例在 WebView2 的右鍵選單中新增了 「顯示頁面 URI 」指令。

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 控制項只有在當前網頁允許顯示該右鍵選單時才會觸發事件 ContextMenuRequested ;也就是說，當屬性 AreDefaultContextMenusEnabled 為 true時。

CoreWebView2ContextMenuRequestedEventArgs 包含以下資訊：

  • 一個有序的物件清單 ContextMenuItem ，用來填充自訂的右鍵選單。 排序清單包括以下內容：

    • 菜單項目的內部名稱。
    • 選單項目的 UI 標籤，會在使用者介面中顯示。
    • 菜單上的項目。
    • 鍵盤快捷鍵描述（如有的話），例如 Alt+C。
    • 自訂選單項目的其他屬性。

  • 請求右鍵選單的座標，讓應用程式能偵測使用者右鍵點擊的 UI 項目。 座標是根據 WebView2 控制項左上角來定義的。

  • 一個選擇物件，會包含所選 的上下文類型及適當的上下文選單參數資料。

當使用者在右鍵選單中選擇自訂選單項目時，WebView2 控制項會觸發事件 CustomItemSelected 。

當你的主機應用程式向 WebView2 表示使用者在右鍵選單中選擇了選單項目時，WebView2 就會執行該選中的指令。

偵測使用者何時選擇自訂選單項目

你的主機應用程式可以處理使用者選擇的選單項目，或者你的應用程式可以將選單項目回傳給 WebView2 控制項，以處理使用者選擇的選單項目。

你的主機應用程式應該會偵測 CustomItemSelected 事件，當使用者在預設或自訂的右鍵選單中選擇自訂選單項目時，事件會被提升。

WebView2 控制項會觸發此事件，表示使用者選擇了您的應用程式新增到右鍵選單中的自訂選單項目。

若使用者選擇自訂選單項目， CustomMenuItemSelected 事件會在所選的右鍵選單項目物件上觸發，以下情況為：

  • 該應用程式會新增自訂選單項目，但將上下文選單的使用者介面交由 WebView2 平台負責。

  • 這個應用程式會新增自訂選單項目、顯示自訂介面，並將屬性設定 SelectedCommandId 為自訂選單項目的 ID。

向 WebView2 回報所選指令選單項目

當使用者選擇 WebView2 的右鍵選單指令 (自訂右鍵選單) 中的預設選單項目時，主機應用程式可以選擇性地回報該選擇給 WebView2，讓 WebView2 會呼叫該指令。

自訂菜單項目

如果你的主機應用程式將自訂選單項目報告為所選選單項目，那麼 CustomMenuItemSelected 該事件就會針對該自訂選單項目觸發。

停用上下文選單

這個 AreDefaultContextMenusEnabled 屬性控制是否能開啟任何右鍵選單。 如果 WebView2 AreDefaultContextMenusEnabled 設定為 False，則會停用右鍵選單，且 ContextMenuRequested 事件不會被觸發，例如使用者右鍵點擊時。

API 參考概述

另請參閱

  • Last updated on