Share via

Personnaliser les menus contextuels dans WebView2

  • Article

Le contrôle WebView2 fournit un menu contextuel par défaut, et vous pouvez créer votre propre menu contextuel lors de l’utilisation d’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 en utilisant les 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 Événement 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é.

  • Ajouter 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ésactivez les menus contextuels.

Terminologie:

Terme Définition
Menu Un terme large. Inclut la case à cocher, la commande, la case d’option, le séparateur et le sous-menu.
Commande Un terme étroit. 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 en utilisant les 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 Événement 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 la commande sélectionnée par l’utilisateur à 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é qui contient les éléments de menu souhaités, utilisez les données fournies dans le CoreWebView2ContextMenuRequestedEventArgs de l’événement CoreWebView2ContextMenuRequested. Dans ce cas, vous spécifiez Handled la valeur trueet demandez un report.

Sur un CoreWebView2.ContextMenuRequested événement, ajoutez un écouteur d’événements qui a un CoreWebView2ContextMenuRequestedEventArgs.

La MenuItems propriété de CoreWebView2ContextMenuRequestedEventArgs fournit l’arborescence des éléments de menu contextuel de WebView2 pour le contexte avec clic droit. Pour inclure des éléments de menu contextuel WebView2 dans le menu contextuel de votre application, effectuez une itération dans le IList<CoreWebView2ContextMenuItem>, en ajoutant un CoreWebView2ContextMenuItem pour chaque élément de menu. Testez le .Kind de chaque élément de menu, par Command exemple 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 indiqué 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 de page d’affichage 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 les é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 l’ouverture d’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 éléments de menu personnalisés au menu contextuel par défaut.
  • Supprimez les éléments de menu personnalisés du menu contextuel par défaut.
  • Ouvrez 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 déclenche l’événement ContextMenuRequested uniquement si la page web active autorise l’affichage du menu contextuel ; autrement dit, 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 triée comprend les éléments suivants :

    • Nom interne de l’élément de menu.
    • Étiquette de l’interface utilisateur de l’élément de menu, affichée à l’utilisateur dans l’interface utilisateur.
    • Type d’élément de menu.
    • Raccourci clavier Description, le cas échéant, par exemple Alt+C.
    • Toutes les autres propriétés 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 inclut le type de contexte sélectionné et les données de paramètre 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 ensuite 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 écouter 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 élément de menu contextuel 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 (élément de menu par défaut qui se trouve dans un menu contextuel personnalisé), l’application hôte peut éventuellement signaler cette sélection à WebView2 afin que WebView2 appelle la commande.

Éléments de menu personnalisés

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 que l’événement ContextMenuRequested n’est pas déclenché, par exemple lorsque l’utilisateur clique avec le bouton droit.

Vue d’ensemble des informations de référence sur les API

Voir aussi