Personnaliser les menus contextuels dans WebView2

Le contrôle WebView2 fournit un menu contextuel par défaut, et vous pouvez créer votre propre menu contextuel lorsque vous utilisez un contrôle WebView2. Utilisez l’API ContextMenuRequested pour personnaliser les menus contextuels (menus contextuels) d’une application WebView2.

Contenu détaillé :

Introduction

Le contrôle WebView2 fournit un menu contextuel par défaut, et vous pouvez créer votre propre menu contextuel lorsque vous utilisez un contrôle WebView2. Utilisez l’API ContextMenuRequested pour personnaliser les menus contextuels (menus contextuels) d’une application WebView2.

Par exemple, vous pouvez effectuer l’une des opérations suivantes :

  • Ajoutez un menu contextuel personnalisé.

    Au lieu d’utiliser le menu contextuel par défaut, votre application hôte peut dessiner son propre menu contextuel à l’aide des informations envoyées à partir du menu contextuel WebView2. Votre application gère l’événement ContextMenuRequested . Vous pouvez utiliser les données fournies dans les arguments Event de ContextMenuRequested pour afficher un menu contextuel personnalisé avec les entrées de votre choix. Dans ce cas, vous gérez l’événement et demandez un report.

    Vous pouvez ajouter des éléments de menu par défaut et/ou des éléments de menu personnalisés à un menu contextuel personnalisé.

  • Ajoutez des éléments de menu par défaut à un menu contextuel personnalisé.

  • Ajoutez des éléments de menu personnalisés à un menu contextuel par défaut.

  • Supprimez les éléments de menu par défaut ou personnalisés du menu contextuel par défaut.

  • Désactiver les menus contextuels.

Terminologie :

Terme Définition
élément de menu Un terme large. Comprend une case à cocher, une commande, une case d’option, un séparateur et un sous-menu.
de commande Un terme étroit. L’un des cinq types d’éléments de menu.
menu contextuel Soit un menu contextuel par défaut (menu contextuel) appartenant au contrôle WebView2, soit un menu contextuel personnalisé (menu contextuel) appartenant à votre application hôte.

Ajout d’un menu contextuel personnalisé

Au lieu d’utiliser le menu contextuel par défaut, votre application hôte peut dessiner son propre menu contextuel à l’aide des informations envoyées à partir du menu contextuel WebView2. Votre application gère l’événement ContextMenuRequested . Vous pouvez utiliser les données fournies dans les arguments Event de ContextMenuRequested pour afficher un menu contextuel personnalisé avec les entrées de votre choix. Dans ce cas, vous gérez l’événement et demandez un report.

Lorsque l’utilisateur sélectionne une commande dans votre menu contextuel personnalisé, votre application doit indiquer au contrôle WebView2 quelle commande l’utilisateur a sélectionnée, à l’aide de la SelectedCommandId propriété.

Vous pouvez ajouter des éléments de menu par défaut et/ou des éléments de menu personnalisés à un menu contextuel personnalisé.

Pour afficher un menu contextuel personnalisé contenant les éléments de menu souhaités, utilisez les données fournies dans l’événement CoreWebView2ContextMenuRequestedEventArgsCoreWebView2ContextMenuRequested. Dans ce cas, vous indiquez Handled d’être true, et demandez un report.

Lors d’un CoreWebView2.ContextMenuRequested événement, ajoutez un écouteur d’événements ayant un CoreWebView2ContextMenuRequestedEventArgs.

La MenuItems propriété de CoreWebView2ContextMenuRequestedEventArgs fournit l’arborescence des éléments de menu contextuel de WebView2 pour le contexte auquel on a cliqué avec le bouton droit. Pour inclure des éléments de menu contextuel WebView2 dans le menu contextuel de votre application, itérez dans le IList<CoreWebView2ContextMenuItem>, en ajoutant un CoreWebView2ContextMenuItem pour chaque élément de menu. Testez chaque .Kind élément de menu, tel que Command ou Separator.

Exemple : ajout d’un menu contextuel personnalisé

L’exemple suivant présente le menu contextuel WebView2 au format de menu contextuel 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);
    }
}

Ajout d’éléments de menu à un menu contextuel

Vous pouvez :

  • Ajoutez des éléments de menu par défaut à un menu contextuel personnalisé, comme illustré ci-dessus dans « Ajout d’un menu contextuel personnalisé ».

  • Ajoutez des éléments de menu personnalisés à un menu contextuel par défaut, comme indiqué ci-dessous dans « Ajout d’éléments de menu personnalisés à un menu contextuel par défaut ».

Ajout d’éléments de menu personnalisés à un menu contextuel par défaut

Pour ajouter des éléments de menu personnalisés au menu contextuel par défaut, utilisez les éléments d’API suivants.

Exemple : ajout d’éléments de menu personnalisés à un menu contextuel par défaut

L’exemple suivant ajoute une commande d’URI d’affichage de page au menu contextuel 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);
};

Suppression d’éléments de menu d’un menu contextuel par défaut

Vous pouvez supprimer des éléments de menu par défaut ou personnalisés du menu contextuel par défaut.

Exemple : suppression d’éléments de menu d’un menu contextuel par défaut

L’exemple suivant supprime la commande Enregistrer l’image sous du menu contextuel 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;
            }
        }
    }
};

Détection du moment où l’utilisateur demande un menu contextuel

Cette section explique comment détecter quand l’utilisateur demande à ouvrir un menu contextuel. Il en va de même pour les menus contextuels personnalisés ou par défaut.

Lorsqu’un utilisateur demande l’ouverture d’un menu contextuel (par exemple, en cliquant avec le bouton droit), votre application doit écouter l’événement ContextMenuRequested .

Lorsque votre application détecte cet événement, elle doit effectuer une combinaison des opérations suivantes :

  • Ajoutez des options de menu personnalisées au menu contextuel par défaut.
  • Supprimez les éléments de menu personnalisés du menu contextuel par défaut.
  • Ouvrir un menu contextuel personnalisé.

L’événement ContextMenuRequested indique que l’utilisateur a demandé l’ouverture d’un menu contextuel.

Le contrôle WebView2 déclenche cet événement pour indiquer que l’utilisateur a demandé l’ouverture d’un menu contextuel dans le contrôle WebView2, par exemple en cliquant avec le bouton droit.

Le contrôle WebView2 ne déclenche l’événement ContextMenuRequested que si la page web active autorise l’affichage du menu contextuel, c’est-à-dire si la AreDefaultContextMenusEnabled propriété est true.

CoreWebView2ContextMenuRequestedEventArgs contient les informations suivantes :

  • Liste ordonnée d’objets ContextMenuItem pour remplir le menu contextuel personnalisé. La liste ordonnée comprend les éléments suivants :

    • Nom interne de l’élément de menu.
    • Étiquette d’interface utilisateur de l’élément de menu, affichée à l’utilisateur dans l’interface utilisateur.
    • Type d’élément de menu.
    • Un raccourci clavier Description, le cas échéant, tel que Alt+C.
    • Toute autre propriété de l’élément de menu personnalisé.

  • Coordonnées où le menu contextuel a été demandé, afin que votre application puisse détecter l’élément d’interface utilisateur sur lequel l’utilisateur a cliqué avec le bouton droit. Les coordonnées sont définies par rapport au coin supérieur gauche du contrôle WebView2.

  • Objet de sélection qui inclura le type de contexte sélectionné et les données de paramètres de menu contextuel appropriées.

Lorsque l’utilisateur sélectionne un élément de menu personnalisé dans un menu contextuel, le contrôle WebView2 déclenche un CustomItemSelected événement.

Lorsque votre application hôte indique à WebView2 qu’un utilisateur a sélectionné un élément de menu dans un menu contextuel, WebView2 exécute alors la commande sélectionnée.

Détection du moment où l’utilisateur sélectionne un élément de menu personnalisé

Votre application hôte peut gérer l’élément de menu sélectionné par l’utilisateur, ou votre application peut renvoyer l’élément de menu au contrôle WebView2 pour gérer l’élément de menu sélectionné par l’utilisateur.

Votre application hôte doit être à l’écoute de l’événement CustomItemSelected , qui est déclenché lorsque l’utilisateur sélectionne un élément de menu personnalisé dans un menu contextuel par défaut ou personnalisé.

Le contrôle WebView2 déclenche cet événement pour indiquer que l’utilisateur a sélectionné un élément de menu personnalisé que votre application a ajouté à un menu contextuel.

Si l’utilisateur sélectionne un élément de menu personnalisé, l’événement CustomMenuItemSelected est déclenché sur l’objet d’élément de menu contextuel qui a été sélectionné, dans les cas suivants :

  • L’application ajoute des éléments de menu personnalisés, mais reporte l’interface utilisateur du menu contextuel à la plateforme WebView2.

  • L’application ajoute des éléments de menu personnalisés, affiche une interface utilisateur personnalisée et définit la SelectedCommandId propriété sur l’ID de l’élément de menu personnalisé.

Signalement d’un élément de menu de commande sélectionné à WebView2

Lorsque l’utilisateur sélectionne une commande de menu contextuel WebView2 (un élément de menu par défaut inclus dans un menu contextuel personnalisé), l’application hôte peut éventuellement signaler cette sélection à WebView2 afin que WebView2 appelle la commande.

Options de menu personnalisées

Si votre application hôte signale un élément de menu personnalisé comme élément de menu sélectionné, l’événement CustomMenuItemSelected est déclenché pour l’élément de menu personnalisé.

Désactivation des menus contextuels

La AreDefaultContextMenusEnabled propriété détermine si un menu contextuel peut être ouvert. Si le paramètre WebView2 AreDefaultContextMenusEnabled est défini sur False, cela désactive les menus contextuels et l’événement ContextMenuRequested ne sera pas déclenché, par exemple lorsque l’utilisateur clique avec le bouton droit.

Vue d’ensemble de la référence d’API

Voir aussi

  • Dernière mise à jour :