Personalizar menus de contexto no WebView2

O controle WebView2 fornece um menu de contexto padrão e você pode criar seu próprio menu de contexto ao usar um controle WebView2. Use a API ContextMenuRequested para personalizar os menus de contexto (menus de clique com o botão direito do mouse) de um aplicativo WebView2. Por exemplo, você pode seguir um destes procedimentos:

  • Adicione um menu de contexto personalizado.

    Em vez de usar o menu de contexto padrão, seu aplicativo host pode desenhar seu próprio menu de contexto usando as informações enviadas do menu de contexto do WebView2. Seu aplicativo manipula o ContextMenuRequested evento. Você pode usar os dados fornecidos nos argumentos Event de para exibir um menu de ContextMenuRequested contexto personalizado com entradas de sua escolha. Para esse caso, você manipula o evento e solicita um adiamento.

    Você pode adicionar itens de menu padrão e/ou itens de menu personalizados a um menu de contexto personalizado.

  • Adicione itens de menu padrão a um menu de contexto personalizado.

  • Adicione itens de menu personalizados a um menu de contexto padrão.

  • Remova itens de menu padrão ou personalizados do menu de contexto padrão.

  • Desabilitar os menus de contexto.

Terminologia:

Termo Definição
item de menu Um termo amplo. Inclui caixa de seleção, comando, botão de opção, separador e submenu.
do dispositivo Um termo restrito. Um dos cinco tipos de item de menu.
menu de contexto Um menu de contexto padrão (menu de clique com o botão direito do mouse) pertencente ao controle WebView2 ou um menu de contexto personalizado (menu de clique com o botão direito do mouse) pertencente ao seu aplicativo host.

Adicionando um menu de contexto personalizado

Em vez de usar o menu de contexto padrão, seu aplicativo host pode desenhar seu próprio menu de contexto usando as informações enviadas do menu de contexto do WebView2. Seu aplicativo manipula o ContextMenuRequested evento. Você pode usar os dados fornecidos nos argumentos Event de para exibir um menu de ContextMenuRequested contexto personalizado com entradas de sua escolha. Para esse caso, você manipula o evento e solicita um adiamento.

Quando o usuário seleciona um comando no menu de contexto personalizado, seu aplicativo precisa informar ao controle WebView2 qual comando o usuário selecionou, usando a SelectedCommandId propriedade.

Você pode adicionar itens de menu padrão e/ou itens de menu personalizados a um menu de contexto personalizado.

Para exibir um menu de contexto personalizado que contenha os CoreWebView2 itens de menu desejados, use os dados fornecidos no CoreWebView2ContextMenuRequestedEventArgsevento ContextMenuRequested. Para esse caso, você especifica Handled ser true, e solicita um adiamento.

Em um CoreWebView2.ContextMenuRequested evento, adicione um ouvinte de eventos que tenha um CoreWebView2ContextMenuRequestedEventArgsdomínio .

A MenuItems propriedade de CoreWebView2ContextMenuRequestedEventArgs fornece a árvore dos itens do menu de contexto do WebView2 para o contexto clicado com o botão direito do mouse. Para incluir itens do menu de contexto do WebView2 no menu de contexto do aplicativo, itere por meio do IList<CoreWebView2ContextMenuItem>, adicionando um item de CoreWebView2ContextMenuItem menu para cada. Teste o .Kind de cada item de menu, como Command ou Separator.

Exemplo: adicionar um menu de contexto personalizado

O exemplo a seguir apresenta o menu de contexto do WebView2 no formato de menu de contexto 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);
    }
}

Adicionar itens de menu a um menu de contexto

Você pode:

  • Adicione itens de menu padrão a um menu de contexto personalizado, conforme mostrado acima em "Adicionar um menu de contexto personalizado".

  • Adicione itens de menu personalizados a um menu de contexto padrão, conforme mostrado abaixo em "Adicionando itens de menu personalizados a um menu de contexto padrão".

Adicionando itens de menu personalizados a um menu de contexto padrão

Para adicionar itens de menu personalizados ao menu de contexto padrão, use os itens de API a seguir.

Exemplo: Adicionar itens de menu personalizados a um menu de contexto padrão

O exemplo a seguir adiciona um comando URI da página de exibição ao menu de contexto do 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);
};

Removendo itens de menu de um menu de contexto padrão

Você pode remover itens de menu padrão ou personalizados do menu de contexto padrão.

Exemplo: removendo itens de menu de um menu de contexto padrão

O exemplo a seguir remove o comando Salvar imagem como do menu de contexto do 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;
            }
        }
    }
};

Detectando quando o usuário solicita um menu de contexto

Esta seção explica como detectar quando o usuário solicita a abertura de um menu de contexto. É o mesmo para menus de contexto personalizados ou padrão.

Quando um usuário solicita a abertura de um menu de contexto (por exemplo, clicando com o botão direito do mouse), seu aplicativo precisa escutar o ContextMenuRequested evento.

Quando o aplicativo detectar esse evento, ele deverá fazer alguma combinação do seguinte:

  • Adicione itens de menu personalizados ao menu de contexto padrão.
  • Remova itens de menu personalizados do menu de contexto padrão.
  • Abra um menu de contexto personalizado.

O ContextMenuRequested evento indica que o usuário solicitou a abertura de um menu de contexto.

O controle WebView2 gera esse evento para indicar que o usuário solicitou a abertura de um menu de contexto no controle WebView2, por exemplo, clicando com o botão direito do mouse.

O controle WebView2 só gerará o ContextMenuRequested evento se a página da Web atual permitir que o menu de contexto apareça; isto é, se a AreDefaultContextMenusEnabled propriedade for true.

O CoreWebView2ContextMenuRequestedEventArgs contém as seguintes informações:

  • Uma lista ordenada de objetos para preencher o menu de ContextMenuItem contexto personalizado. A lista ordenada inclui o seguinte:

    • O nome interno do item de menu.
    • O rótulo da interface do usuário do item de menu, exibido para o usuário na interface do usuário.
    • O tipo de item de menu.
    • Um atalho de teclado Descrição, se houver, como Alt+C.
    • Quaisquer outras propriedades do item de menu personalizado.

  • As coordenadas em que o menu de contexto foi solicitado, para que o aplicativo possa detectar em qual item da interface do usuário o usuário clicou com o botão direito do mouse. As coordenadas são definidas em relação ao canto superior esquerdo do controle WebView2.

  • Um objeto de seleção que incluirá o tipo de contexto selecionado e os dados de parâmetro do menu de contexto apropriados.

Quando o usuário seleciona um item de menu personalizado em um menu de contexto, o controle WebView2 aciona um CustomItemSelected evento.

Quando seu aplicativo host indica ao WebView2 que um usuário selecionou um item de menu em um menu de contexto, o WebView2 executa o comando selecionado.

Detectando quando o usuário seleciona um item de menu personalizado

Seu aplicativo host pode lidar com o item de menu selecionado pelo usuário ou seu aplicativo pode retornar o item de menu para o controle WebView2 para lidar com o item de menu selecionado pelo usuário.

Seu aplicativo host deve escutar o CustomItemSelected evento, que é gerado quando o usuário seleciona um item de menu personalizado em um menu de contexto padrão ou personalizado.

O controle WebView2 gera esse evento para indicar que o usuário selecionou um item de menu personalizado que seu aplicativo adicionou a um menu de contexto.

Se o usuário selecionar um item de menu personalizado, o CustomMenuItemSelected evento será gerado no objeto de item de menu de contexto que foi selecionado, nestes casos:

  • O aplicativo adiciona itens de menu personalizados, mas adia a interface do usuário do menu de contexto para a plataforma WebView2.

  • O aplicativo adiciona itens de menu personalizados, mostra a interface do usuário personalizada e define a SelectedCommandId propriedade como a ID do item de menu personalizado.

Reportando um item do menu de comando selecionado para o WebView2

Quando o usuário seleciona um comando de menu de contexto do WebView2 (um item de menu padrão que está em um menu de contexto personalizado), o aplicativo host pode, opcionalmente, relatar essa seleção ao WebView2 para que o WebView2 invoque o comando.

Itens de menu personalizados

Se o aplicativo host relatar um item de menu personalizado como o item de menu selecionado, o CustomMenuItemSelected evento será acionado para o item de menu personalizado.

Desabilitando menus de contexto

A AreDefaultContextMenusEnabled propriedade controla se qualquer menu de contexto pode ser aberto. Se a configuração do WebView2 AreDefaultContextMenusEnabled estiver definida como False, isso desabilitará os menus de contexto e o ContextMenuRequested evento não será gerado, como quando o usuário clicar com o botão direito do mouse.

Visão geral de referência de API

Confira também

  • Last updated on