Compartir a través de

Personalización de menús contextuales en WebView2

  • Artículo

El control WebView2 proporciona un menú contextual predeterminado y puede crear su propio menú contextual al usar un control WebView2. Use la API ContextMenuRequested para personalizar los menús contextuales (menús contextuales) de una aplicación WebView2. Por ejemplo, puede realizar cualquiera de las siguientes acciones:

  • Agregue un menú contextual personalizado.

    En lugar de usar el menú contextual predeterminado, la aplicación host puede dibujar su propio menú contextual mediante la información que se envía desde el menú contextual WebView2. La aplicación controla el ContextMenuRequested evento. Puede usar los datos proporcionados en los argumentos Event de ContextMenuRequested para mostrar un menú contextual personalizado con las entradas que prefiera. En este caso, controlará el evento y solicitará un aplazamiento.

    Puede agregar elementos de menú predeterminados o elementos de menú personalizados a un menú contextual personalizado.

  • Agregue elementos de menú predeterminados a un menú contextual personalizado.

  • Agregue elementos de menú personalizados a un menú contextual predeterminado.

  • Quite los elementos de menú predeterminados o personalizados del menú contextual predeterminado.

  • Deshabilite los menús contextuales.

Terminología:

Término Definición
elemento de menú Un término amplio. Incluye casilla, comando, botón de radio, separador y submenú.
Comando Un término estrecho. Uno de los cinco tipos de elemento de menú.
menú contextual Un menú contextual predeterminado (menú contextual) que pertenece al control WebView2 o un menú contextual personalizado (menú contextual) que pertenece a la aplicación host.

Adición de un menú contextual personalizado

En lugar de usar el menú contextual predeterminado, la aplicación host puede dibujar su propio menú contextual mediante la información que se envía desde el menú contextual WebView2. La aplicación controla el ContextMenuRequested evento. Puede usar los datos proporcionados en los argumentos Event de ContextMenuRequested para mostrar un menú contextual personalizado con las entradas que prefiera. En este caso, controlará el evento y solicitará un aplazamiento.

Cuando el usuario selecciona un comando en el menú contextual personalizado, la aplicación debe indicar al control WebView2 qué comando ha seleccionado el usuario mediante la SelectedCommandId propiedad .

Puede agregar elementos de menú predeterminados o elementos de menú personalizados a un menú contextual personalizado.

Para mostrar un menú contextual personalizado que contenga los elementos de menú deseados, use los datos proporcionados en el CoreWebView2ContextMenuRequestedEventArgsCoreWebView2evento ContextMenuRequested. En este caso, especifique Handled que sea truey solicite un aplazamiento.

En un CoreWebView2.ContextMenuRequested evento, agregue un agente de escucha de eventos que tenga .CoreWebView2ContextMenuRequestedEventArgs

La MenuItems propiedad de CoreWebView2ContextMenuRequestedEventArgs proporciona el árbol de los elementos de menú contextual de WebView2 para el contexto en el que se hace clic con el botón derecho. Para incluir elementos de menú contextual de WebView2 en el menú contextual de la aplicación, iteración a través de IList<CoreWebView2ContextMenuItem>, agregando un CoreWebView2ContextMenuItem elemento para cada elemento de menú. Pruebe el .Kind de cada elemento de menú, como Command o Separator.

Ejemplo: Adición de un menú contextual personalizado

En el ejemplo siguiente se presenta el menú contextual WebView2 en el formato de menú contextual Win32/WPF.

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);
    }
}

Adición de elementos de menú a un menú contextual

Puede:

  • Agregue elementos de menú predeterminados a un menú contextual personalizado, como se muestra anteriormente en "Agregar un menú contextual personalizado".

  • Agregue elementos de menú personalizados a un menú contextual predeterminado, como se muestra a continuación en "Agregar elementos de menú personalizados a un menú contextual predeterminado".

Adición de elementos de menú personalizados a un menú contextual predeterminado

Para agregar elementos de menú personalizados al menú contextual predeterminado, use los siguientes elementos de API.

Ejemplo: Adición de elementos de menú personalizados a un menú contextual predeterminado

En el ejemplo siguiente se agrega un comando Uri de página para mostrar al menú contextual 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);
};

Eliminación de elementos de menú de un menú contextual predeterminado

Puede quitar elementos de menú predeterminados o personalizados del menú contextual predeterminado.

Ejemplo: Eliminación de elementos de menú de un menú contextual predeterminado

En el ejemplo siguiente se quita el comando Guardar imagen como del menú contextual 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;
            }
        }
    }
};

Detectar cuándo el usuario solicita un menú contextual

En esta sección se explica cómo detectar cuándo el usuario solicita abrir un menú contextual. Es lo mismo para los menús contextuales personalizados o predeterminados.

Cuando un usuario solicita abrir un menú contextual (por ejemplo, haciendo clic con el botón derecho), la aplicación debe escuchar el ContextMenuRequested evento.

Cuando la aplicación detecta este evento, la aplicación debe realizar alguna combinación de lo siguiente:

  • Agregue elementos de menú personalizados al menú contextual predeterminado.
  • Quite los elementos de menú personalizados del menú contextual predeterminado.
  • Abra un menú contextual personalizado.

El ContextMenuRequested evento indica que el usuario solicitó abrir un menú contextual.

El control WebView2 genera este evento para indicar que el usuario solicitó abrir un menú contextual en el control WebView2, como haciendo clic con el botón derecho.

El control WebView2 solo genera el ContextMenuRequested evento si la página web actual permite que aparezca el menú contextual; es decir, si la AreDefaultContextMenusEnabled propiedad es true.

CoreWebView2ContextMenuRequestedEventArgs contiene la siguiente información:

  • Lista ordenada de ContextMenuItem objetos para rellenar el menú contextual personalizado. La lista ordenada incluye lo siguiente:

    • Nombre interno del elemento de menú.
    • La etiqueta de la interfaz de usuario del elemento de menú, que se muestra al usuario en la interfaz de usuario.
    • Tipo de elemento de menú.
    • Un método abreviado de teclado Descripción, si existe, como Alt+C.
    • Cualquier otra propiedad del elemento de menú personalizado.

  • Coordenadas en las que se solicitó el menú contextual, de modo que la aplicación pueda detectar qué elemento de la interfaz de usuario ha hecho clic con el botón derecho del usuario. Las coordenadas se definen en relación con la esquina superior izquierda del control WebView2.

  • Objeto de selección que incluirá el tipo de contexto seleccionado y los datos de parámetros de menú contextual adecuados.

Cuando el usuario selecciona un elemento de menú personalizado en un menú contextual, el control WebView2 desencadena un CustomItemSelected evento.

Cuando la aplicación host indica a WebView2 que un usuario seleccionó un elemento de menú en un menú contextual, WebView2 ejecuta el comando seleccionado.

Detectar cuándo el usuario selecciona un elemento de menú personalizado

La aplicación host puede controlar el elemento de menú seleccionado por el usuario o la aplicación puede devolver el elemento de menú al control WebView2 para controlar el elemento de menú seleccionado por el usuario.

La aplicación host debe escuchar el CustomItemSelected evento, que se genera cuando el usuario selecciona un elemento de menú personalizado en un menú contextual predeterminado o personalizado.

El control WebView2 genera este evento para indicar que el usuario seleccionó un elemento de menú personalizado que la aplicación agregó a un menú contextual.

Si el usuario selecciona un elemento de menú personalizado, el CustomMenuItemSelected evento se genera en el objeto de elemento de menú contextual seleccionado, en estos casos:

  • La aplicación agrega elementos de menú personalizados, pero aplaza la interfaz de usuario del menú contextual a la plataforma WebView2.

  • La aplicación agrega elementos de menú personalizados, muestra la interfaz de usuario personalizada y establece la SelectedCommandId propiedad en el identificador del elemento de menú personalizado.

Notificación de un elemento de menú de comandos seleccionado a WebView2

Cuando el usuario selecciona un comando de menú contextual WebView2 (un elemento de menú predeterminado que se encuentra en un menú contextual personalizado), la aplicación host puede informar opcionalmente de esa selección a WebView2 para que WebView2 invoque el comando.

Elementos de menú personalizados

Si la aplicación host notifica un elemento de menú personalizado como elemento de menú seleccionado, el CustomMenuItemSelected evento se desencadenará para el elemento de menú personalizado.

Deshabilitación de menús contextuales

La AreDefaultContextMenusEnabled propiedad controla si se puede abrir cualquier menú contextual. Si la configuración de WebView2 AreDefaultContextMenusEnabled está establecida en False, que deshabilita los menús contextuales y no se generará el ContextMenuRequested evento, como cuando el usuario hace clic con el botón derecho.

Introducción a la referencia de API

Consulte también