在 WebView2 中自定义上下文菜单

  • 项目

WebView2 控件提供默认上下文菜单，使用 WebView2 控件时，可以创建自己的上下文菜单。 使用 ContextMenuRequested API 自定义上下文菜单 (右键单击菜单) WebView2 应用。 例如，可以执行以下任一操作：

  • 添加自定义上下文菜单。

    主机应用可以使用从 WebView2 上下文菜单发送的信息来绘制自己的上下文菜单，而不是使用默认上下文菜单。 你的应用处理事件 ContextMenuRequested 。 可以使用 的 Event 参数 ContextMenuRequested 中提供的数据来显示具有所选条目的自定义上下文菜单。 在这种情况下，需要处理事件并请求延迟。

    可以将默认菜单项和/或自定义菜单项添加到自定义上下文菜单。

  • 将默认菜单项添加到自定义上下文菜单。

  • 将自定义菜单项添加到默认上下文菜单。

  • 从默认上下文菜单中删除默认或自定义菜单项。

  • 禁用上下文菜单。

术语：

Term 定义
菜单项 宽泛术语。 包括复选框、命令、单选按钮、分隔符和子菜单。
命令 一个狭义术语。 五种类型的菜单项之一。
上下文菜单 属于 WebView2 控件的默认上下文菜单 (右键单击菜单) ，或属于主机应用的自定义上下文菜单 (右键单击菜单) 。

添加自定义上下文菜单

主机应用可以使用从 WebView2 上下文菜单发送的信息来绘制自己的上下文菜单，而不是使用默认上下文菜单。 你的应用处理事件 ContextMenuRequested 。 可以使用 的 Event 参数 ContextMenuRequested 中提供的数据来显示具有所选条目的自定义上下文菜单。 在这种情况下，需要处理事件并请求延迟。

当用户从自定义上下文菜单中选择命令时，应用需要使用 属性告诉 WebView2 控制用户选择了 SelectedCommandId 哪个命令。

可以将默认菜单项和/或自定义菜单项添加到自定义上下文菜单。

若要显示包含所需菜单项的自定义上下文菜单，请使用 ContextMenuRequested 事件的 中CoreWebView2ContextMenuRequestedEventArgsCoreWebView2提供的数据。 在这种情况下，将 指定 Handled 为 true，并请求延迟。

CoreWebView2.ContextMenuRequested在事件上，添加具有 的事件CoreWebView2ContextMenuRequestedEventArgs侦听器。

的 MenuItemsCoreWebView2ContextMenuRequestedEventArgs 属性为右键单击的上下文提供 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 项。

示例：将自定义菜单项添加到默认上下文菜单

以下示例将 “显示页 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 控件才会引发 ContextMenuRequested 事件;也就是说，如果 AreDefaultContextMenusEnabled 属性为 ，则 true为 。

CoreWebView2ContextMenuRequestedEventArgs 包含以下信息：

  • 要填充自定义上下文菜单的 ContextMenuItem 对象的有序列表。 排序列表包括以下内容：

    • 菜单项的内部名称。
    • 菜单项的 UI 标签，在 UI 中显示给用户。
    • 菜单项的种类。
    • 键盘快捷方式说明（如果有），例如 Alt+C。
    • 自定义菜单项的任何其他属性。

  • 请求上下文菜单的坐标，以便你的应用可以检测用户右键单击的 UI 项。 坐标是相对于 WebView2 控件的左上角定义的。

  • 一个选择对象，它将包括所选 上下文的种类和相应的上下文菜单参数数据。

当用户在上下文菜单中选择自定义菜单项时，WebView2 控件会触发事件 CustomItemSelected 。

当主机应用向 WebView2 指示用户选择了上下文菜单上的菜单项时，WebView2 然后运行所选命令。

检测用户何时选择自定义菜单项

主机应用可以处理用户选择的菜单项，或者应用可以将菜单项返回到 WebView2 控件以处理用户选择的菜单项。

主机应用应侦 CustomItemSelected 听事件，当用户在默认或自定义上下文菜单中选择自定义菜单项时引发该事件。

WebView2 控件引发此事件以指示用户选择了应用添加到上下文菜单的自定义菜单项。

如果用户选择自定义菜单项，则会在 CustomMenuItemSelected 所选的上下文菜单项对象上引发事件，在这种情况下：

  • 应用添加自定义菜单项，但将上下文菜单 UI 推迟到 WebView2 平台。

  • 应用添加自定义菜单项、显示自定义 UI，并将 属性设置为 SelectedCommandId 自定义菜单项的 ID。

向 WebView2 报告所选命令菜单项

当用户 (自定义上下文菜单) 的默认菜单项选择 WebView2 上下文菜单命令时，主机应用可以选择将所选内容报告给 WebView2，以便 WebView2 将调用命令。

自定义菜单项

如果主机应用将自定义菜单项报告为所选菜单项，则会 CustomMenuItemSelected 为自定义菜单项触发事件。

禁用上下文菜单

属性 AreDefaultContextMenusEnabled 控制是否可以打开任何上下文菜单。 如果 WebView2 AreDefaultContextMenusEnabled 设置设置为 False，则会禁用上下文菜单，并且 ContextMenuRequested 不会引发事件，例如用户右键单击时。

API 参考概述

另请参阅