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 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 deContextMenuRequested
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é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. |
commander | 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 l’événement CoreWebView2ContextMenuRequestedEventArgs
CoreWebView2
ContextMenuRequested. Dans ce cas, vous spécifiez Handled
la valeur true
et 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
.
CoreWebView2ContextMenuItemKind Enum
CoreWebView2ContextMenuItemKind.Command
CoreWebView2ContextMenuItemKind.Separator
CoreWebView2ContextMenuItemKind Enum
CheckBox
Radio
Separator
Submenu
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.
CoreWebView2ContextMenuItemKind Enum
Command
CoreWebView2ContextMenuRequestedEventArgs, classe
- ContextMenuTarget, propriété
ContextMenuTarget.PageUri
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.
-
CoreWebView2ContextMenuItemKind Enum
CheckBox
Command
Radio
Separator
Submenu
É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
ne se déclenche pas, par exemple lorsque l’utilisateur clique avec le bouton droit.
Vue d’ensemble des informations de référence sur les API
CoreWebView2ContextMenuItemKind Enum
CheckBox
Command
Radio
Separator
Submenu
CoreWebView2ContextMenuTargetKind Enum
Audio
Image
Page
SelectedText
Video
Voir aussi
- Menus contextuels dans Vue d’ensemble des fonctionnalités et API WebView2.
- Référentiel WebView2Samples