Compartilhar via

Personalizar menus de contexto no WebView2

  • Artigo

O controlo WebView2 fornece um menu de contexto predefinido e pode criar o seu próprio menu de contexto ao utilizar um controlo WebView2. Utilize a API ContextMenuRequested para personalizar os menus de contexto (menus de contexto) de uma aplicação WebView2. Por exemplo, pode efetuar um dos seguintes procedimentos:

  • Adicionar um menu de contexto personalizado.

    Em vez de utilizar o menu de contexto predefinido, a aplicação anfitriã pode desenhar o seu próprio menu de contexto com as informações enviadas a partir do menu de contexto WebView2. A sua aplicação processa o ContextMenuRequested evento. Pode utilizar os dados fornecidos nos argumentos Evento de para apresentar um menu de ContextMenuRequested contexto personalizado com entradas à sua escolha. Neste caso, processa o evento e pede um adiamento.

    Pode adicionar itens de menu predefinidos e/ou itens de menu personalizados a um menu de contexto personalizado.

  • Adicionar itens de menu predefinidos a um menu de contexto personalizado.

  • Adicionar itens de menu personalizados a um menu de contexto predefinido.

  • Remova os itens de menu predefinidos ou personalizados do menu de contexto predefinido.

  • Desative os menus de contexto.

Terminologia:

Termo Definição
item de menu Um termo amplo. Inclui caixa de verificação, comando, botão de opção, separador e submenu.
comando Um termo estreito. Um dos cinco tipos de item de menu.
menu de contexto Um menu de contexto predefinido (menu de contexto) pertencente ao controlo WebView2 ou um menu de contexto personalizado (menu de contexto) pertencente à sua aplicação anfitriã.

Adicionar um menu de contexto personalizado

Em vez de utilizar o menu de contexto predefinido, a aplicação anfitriã pode desenhar o seu próprio menu de contexto com as informações enviadas a partir do menu de contexto WebView2. A sua aplicação processa o ContextMenuRequested evento. Pode utilizar os dados fornecidos nos argumentos Evento de para apresentar um menu de ContextMenuRequested contexto personalizado com entradas à sua escolha. Neste caso, processa o evento e pede um adiamento.

Quando o utilizador seleciona um comando no menu de contexto personalizado, a sua aplicação tem de indicar ao controlo WebView2 que comando o utilizador selecionou, utilizando a SelectedCommandId propriedade .

Pode adicionar itens de menu predefinidos e/ou itens de menu personalizados a um menu de contexto personalizado.

Para apresentar um menu de contexto personalizado que contém os itens de menu pretendidos, utilize os dados fornecidos no CoreWebView2ContextMenuRequestedEventArgs evento CoreWebView2ContextMenuRequested. Para este caso, especifique Handled ser truee solicite um adiamento.

Num CoreWebView2.ContextMenuRequested evento, adicione um serviço de escuta de eventos que tenha um CoreWebView2ContextMenuRequestedEventArgs.

A MenuItems propriedade de CoreWebView2ContextMenuRequestedEventArgs fornece a árvore dos itens de menu de contexto do WebView2 para o contexto clicado com o botão direito do rato. Para incluir itens de menu de contexto WebView2 no menu de contexto da sua aplicação, itere através de IList<CoreWebView2ContextMenuItem>, adicionando um CoreWebView2ContextMenuItem para cada item de menu. Teste o .Kind de cada item de menu, como Command ou Separator.

Exemplo: Adicionar um menu de contexto personalizado

O exemplo seguinte apresenta o menu de contexto 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 predefinidos 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 predefinido, conforme mostrado abaixo em "Adicionar itens de menu personalizados a um menu de contexto predefinido".

Adicionar itens de menu personalizados a um menu de contexto predefinido

Para adicionar itens de menu personalizados ao menu de contexto predefinido, utilize os seguintes itens de API.

Exemplo: Adicionar itens de menu personalizados a um menu de contexto predefinido

O exemplo seguinte adiciona um comando Uri de Página a Apresentar ao menu de contexto 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);
};

Remover itens de menu de um menu de contexto predefinido

Pode remover itens de menu predefinidos ou personalizados do menu de contexto predefinido.

Exemplo: Remover itens de menu de um menu de contexto predefinido

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

Detetar quando o utilizador pede um menu de contexto

Esta secção explica como detetar quando o utilizador pede para abrir um menu de contexto. É o mesmo para menus de contexto personalizados ou predefinidos.

Quando um utilizador pede para abrir um menu de contexto (por exemplo, ao clicar com o botão direito do rato), a sua aplicação tem de escutar o ContextMenuRequested evento.

Quando a aplicação detetar este evento, a sua aplicação deve fazer uma combinação do seguinte:

  • Adicione itens de menu personalizados ao menu de contexto predefinido.
  • Remover itens de menu personalizados do menu de contexto predefinido.
  • Abra um menu de contexto personalizado.

O ContextMenuRequested evento indica que o utilizador pediu para abrir um menu de contexto.

O controlo WebView2 gera este evento para indicar que o utilizador pediu para abrir um menu de contexto no controlo WebView2, tal como ao clicar com o botão direito do rato.

O controlo WebView2 só gera o ContextMenuRequested evento se a página Web atual permitir que o menu de contexto seja apresentado; ou seja, se a AreDefaultContextMenusEnabled propriedade for true.

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

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

    • O nome interno do item de menu.
    • A etiqueta de IU do item de menu, apresentada ao utilizador na IU.
    • O tipo de item de menu.
    • Um atalho de teclado Descrição, se existir, como Alt+C.
    • Quaisquer outras propriedades do item de menu personalizado.

  • As coordenadas onde o menu de contexto foi pedido, para que a sua aplicação possa detetar o item de IU em que o utilizador clicou com o botão direito do rato. As coordenadas são definidas em relação ao canto superior esquerdo do controlo WebView2.

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

Quando o utilizador seleciona um item de menu personalizado num menu de contexto, o controlo WebView2 aciona um CustomItemSelected evento.

Quando a aplicação anfitriã indica ao WebView2 que um utilizador selecionou um item de menu num menu de contexto, o WebView2 executa o comando selecionado.

Detetar quando o utilizador seleciona um item de menu personalizado

A aplicação anfitriã pode processar o item de menu selecionado pelo utilizador ou a sua aplicação pode devolver o item de menu ao controlo WebView2 para processar o item de menu selecionado pelo utilizador.

A aplicação anfitriã deve escutar o CustomItemSelected evento, que é gerado quando o utilizador seleciona um item de menu personalizado num menu de contexto predefinido ou personalizado.

O controlo WebView2 gera este evento para indicar que o utilizador selecionou um item de menu personalizado que a sua aplicação adicionou a um menu de contexto.

Se o utilizador selecionar um item de menu personalizado, o CustomMenuItemSelected evento é gerado no objeto de item de menu de contexto que foi selecionado, nestes casos:

  • A aplicação adiciona itens de menu personalizados, mas adia a IU do menu de contexto para a plataforma WebView2.

  • A aplicação adiciona itens de menu personalizados, mostra a IU personalizada e define a SelectedCommandId propriedade para o ID do item de menu personalizado.

Comunicar um item de menu de comando selecionado para WebView2

Quando o utilizador seleciona um comando de menu de contexto WebView2 (um item de menu predefinido que está num menu de contexto personalizado), a aplicação anfitriã pode, opcionalmente, comunicar essa seleção ao WebView2 para que o WebView2 invoque o comando.

Itens de menu personalizados

Se a aplicação anfitriã comunicar um item de menu personalizado como o item de menu selecionado, o CustomMenuItemSelected evento será acionado para o item de menu personalizado.

Desativar menus de contexto

A AreDefaultContextMenusEnabled propriedade controla se é possível abrir um menu de contexto. Se a definição WebView2 AreDefaultContextMenusEnabled estiver definida como False, isso desativa os menus de contexto e o ContextMenuRequested evento não será gerado, como quando o utilizador clica com o botão direito do rato.

Descrição geral da Referência da API

Confira também