Anpassen von Kontextmenüs in WebView2

Das WebView2-Steuerelement stellt ein Standardkontextmenü bereit, und Sie können ein eigenes Kontextmenü erstellen, wenn Sie ein WebView2-Steuerelement verwenden. Verwenden Sie die ContextMenuRequested-API , um die Kontextmenüs (Rechtsklickmenüs) einer WebView2-App anzupassen.

Detaillierter Inhalt:

Einführung

Das WebView2-Steuerelement stellt ein Standardkontextmenü bereit, und Sie können ein eigenes Kontextmenü erstellen, wenn Sie ein WebView2-Steuerelement verwenden. Verwenden Sie die ContextMenuRequested-API , um die Kontextmenüs (Rechtsklickmenüs) einer WebView2-App anzupassen.

Sie können beispielsweise einen der folgenden Schritte ausführen:

  • Hinzufügen eines benutzerdefinierten Kontextmenüs

    Anstatt das Standardkontextmenü zu verwenden, kann Ihre Host-App ein eigenes Kontextmenü zeichnen, indem sie die Informationen verwendet, die vom WebView2-Kontextmenü gesendet werden. Ihre App verarbeitet das ContextMenuRequested Ereignis. Sie können die in den Ereignisargumenten von ContextMenuRequested bereitgestellten Daten verwenden, um ein benutzerdefiniertes Kontextmenü mit Einträgen Ihrer Wahl anzuzeigen. In diesem Fall behandeln Sie das Ereignis und fordern eine Zurückstellung an.

    Sie können einem benutzerdefinierten Kontextmenü standardmäßige Menüelemente und/oder benutzerdefinierte Menüelemente hinzufügen.

  • Hinzufügen von Standardmenüelementen zu einem benutzerdefinierten Kontextmenü.

  • Hinzufügen von benutzerdefinierten Menüelementen zu einem Standardkontextmenü.

  • Entfernen Sie Standardmenüelemente oder benutzerdefinierte Menüelemente aus dem Standardkontextmenü.

  • Deaktivieren Sie Kontextmenüs.

Terminologie:

Begriff Definition
Menüpunkt Ein weit gefasster Begriff. Enthält ein Kontrollkästchen, einen Befehl, ein Optionsfeld, ein Trennzeichen und ein Untermenü.
Befehl Ein enger Begriff. Einer von fünf Arten von Menüelementen.
Kontextmenü Entweder ein Standardkontextmenü (Rechtsklickmenü), das zum WebView2-Steuerelement gehört, oder ein benutzerdefiniertes Kontextmenü (Rechtsklickmenü), das zu Ihrer Host-App gehört.

Hinzufügen eines benutzerdefinierten Kontextmenüs

Anstatt das Standardkontextmenü zu verwenden, kann Ihre Host-App ein eigenes Kontextmenü zeichnen, indem sie die Informationen verwendet, die vom WebView2-Kontextmenü gesendet werden. Ihre App verarbeitet das ContextMenuRequested Ereignis. Sie können die in den Ereignisargumenten von ContextMenuRequested bereitgestellten Daten verwenden, um ein benutzerdefiniertes Kontextmenü mit Einträgen Ihrer Wahl anzuzeigen. In diesem Fall behandeln Sie das Ereignis und fordern eine Zurückstellung an.

Wenn der Benutzer einen Befehl aus Ihrem benutzerdefinierten Kontextmenü auswählt, muss Ihre App dem WebView2-Steuerelement mitteilen, welchen Befehl der Benutzer mithilfe der SelectedCommandId Eigenschaft ausgewählt hat.

Sie können einem benutzerdefinierten Kontextmenü standardmäßige Menüelemente und/oder benutzerdefinierte Menüelemente hinzufügen.

Um ein benutzerdefiniertes Kontextmenü anzuzeigen, das die gewünschten Menüelemente enthält, verwenden Sie die im ContextMenuRequested-Ereignis angegebenen CoreWebView2ContextMenuRequestedEventArgsCoreWebView2 Daten. In diesem Fall geben Handled Sie an, und fordern eine trueStundung an.

Fügen Sie bei einem CoreWebView2.ContextMenuRequested Ereignis einen Ereignis-Listener hinzu, der über einen CoreWebView2ContextMenuRequestedEventArgs.

Die MenuItems Eigenschaft von CoreWebView2ContextMenuRequestedEventArgs stellt die Struktur der Kontextmenüelemente von WebView2 für den mit der rechten Maustaste angeklickten Kontext bereit. Um WebView2-Kontextmenüelemente in das Kontextmenü Ihrer App aufzunehmen, durchlaufen Sie die IList<CoreWebView2ContextMenuItem>, und fügen Sie für jedes Menüelement einen hinzu CoreWebView2ContextMenuItem . Testen Sie die .Kind der einzelnen Menüelemente, z. B Command . oder Separator.

Beispiel: Hinzufügen eines benutzerdefinierten Kontextmenüs

Das folgende Beispiel zeigt das WebView2-Kontextmenü im Win32/WPF-Kontextmenüformat.

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);
    }
}

Hinzufügen von Menüelementen zu einem Kontextmenü

Sie haben folgende Möglichkeiten:

  • Fügen Sie einem benutzerdefinierten Kontextmenü Standardmenüelemente hinzu, wie oben unter "Hinzufügen eines benutzerdefinierten Kontextmenüs" gezeigt.

  • Fügen Sie einem Standardkontextmenü benutzerdefinierte Menüelemente hinzu, wie unten unter "Hinzufügen von benutzerdefinierten Menüelementen zu einem Standardkontextmenü" gezeigt.

Hinzufügen von benutzerdefinierten Menüelementen zu einem Standardkontextmenü

Um dem Standardkontextmenü benutzerdefinierte Menüelemente hinzuzufügen, verwenden Sie die folgenden API-Elemente.

Beispiel: Hinzufügen von benutzerdefinierten Menüelementen zu einem Standardkontextmenü

Im folgenden Beispiel wird dem WebView2-Kontextmenü der Befehl "Seiten-URI anzeigen " hinzugefügt.

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);
};

Entfernen von Menüelementen aus einem Standardkontextmenü

Sie können Standardmenüelemente oder benutzerdefinierte Menüelemente aus dem Standardkontextmenü entfernen.

Beispiel: Entfernen von Menüelementen aus einem Standardkontextmenü

Im folgenden Beispiel wird der Befehl "Bild speichern unter " aus dem WebView2-Kontextmenü entfernt.

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;
            }
        }
    }
};

Erkennen, wann der Benutzer ein Kontextmenü anfordert

In diesem Abschnitt wird erläutert, wie Sie erkennen können, wenn der Benutzer das Öffnen eines Kontextmenüs anfordert. Dasselbe gilt für benutzerdefinierte oder Standardkontextmenüs.

Wenn ein Benutzer das Öffnen eines Kontextmenüs anfordert (z. B. durch Klicken mit der rechten Maustaste), muss Ihre App auf das ContextMenuRequested Ereignis reagieren.

Wenn Ihre App dieses Ereignis erkennt, sollte Ihre App eine Kombination der folgenden Aktionen ausführen:

  • Hinzufügen von benutzerdefinierten Menüelementen zum Standardkontextmenü.
  • Entfernen von benutzerdefinierten Menüelementen aus dem Standardkontextmenü.
  • Öffnen Sie ein benutzerdefiniertes Kontextmenü.

Das ContextMenuRequested Ereignis gibt an, dass der Benutzer das Öffnen eines Kontextmenüs angefordert hat.

Das WebView2-Steuerelement löst dieses Ereignis aus, um anzuzeigen, dass der Benutzer das Öffnen eines Kontextmenüs im WebView2-Steuerelement angefordert hat, z. B. durch Klicken mit der rechten Maustaste.

Das WebView2-Steuerelement löst das ContextMenuRequested Ereignis nur aus, wenn die aktuelle Webseite das Anzeigen des Kontextmenüs zulässt, d. h., wenn die AreDefaultContextMenusEnabled Eigenschaft trueist.

CoreWebView2ContextMenuRequestedEventArgs enthält die folgenden Informationen:

  • Eine geordnete Liste von ContextMenuItem Objekten, um das benutzerdefinierte Kontextmenü aufzufüllen. Die geordnete Liste umfasst Folgendes:

    • Der interne Name des Menüelements.
    • Die Benutzeroberflächenbezeichnung des Menüelements, die dem Benutzer in der Benutzeroberfläche angezeigt wird.
    • Die Art des Menüelements.
    • Eine Beschreibung der Tastenkombination, falls vorhanden, z. B. ALT+C.
    • Alle anderen Eigenschaften des benutzerdefinierten Menüelements.

  • Die Koordinaten, an denen das Kontextmenü angefordert wurde, damit Ihre App erkennen kann, auf welches Element der Benutzer mit der rechten Maustaste geklickt hat. Die Koordinaten werden in Bezug auf die obere linke Ecke des WebView2-Steuerelements definiert.

  • Ein Selektionsobjekt, das die Art des ausgewählten Kontexts und die entsprechenden Kontextmenüparameterdaten enthält.

Wenn der Benutzer ein benutzerdefiniertes Menüelement in einem Kontextmenü auswählt, löst das WebView2-Steuerelement ein CustomItemSelected Ereignis aus.

Wenn Ihre Host-App WebView2 anzeigt, dass ein Benutzer ein Menüelement in einem Kontextmenü ausgewählt hat, führt WebView2 dann den ausgewählten Befehl aus.

Erkennen, wann der Benutzer ein benutzerdefiniertes Menüelement auswählt

Ihre Host-App kann das vom Benutzer ausgewählte Menüelement verarbeiten, oder Ihre App kann das Menüelement an das WebView2-Steuerelement zurückgeben, um das vom Benutzer ausgewählte Menüelement zu behandeln.

Ihre Host-App sollte auf das CustomItemSelected Ereignis lauschen, das ausgelöst wird, wenn der Benutzer ein benutzerdefiniertes Menüelement in einem Standard- oder benutzerdefinierten Kontextmenü auswählt.

Das WebView2-Steuerelement löst dieses Ereignis aus, um anzuzeigen, dass der Benutzer ein benutzerdefiniertes Menüelement ausgewählt hat, das Ihre App zu einem Kontextmenü hinzugefügt hat.

Wenn der Benutzer einen benutzerdefinierten Menüpunkt auswählt, wird das CustomMenuItemSelected Ereignis in diesen Fällen für das ausgewählte Kontextmenüelementobjekt ausgelöst:

  • Die App fügt benutzerdefinierte Menüelemente hinzu, verschiebt jedoch die Kontextmenü-Benutzeroberfläche auf die WebView2-Plattform.

  • Die App fügt benutzerdefinierte Menüelemente hinzu, zeigt die benutzerdefinierte Benutzeroberfläche an und legt die SelectedCommandId Eigenschaft auf die ID des benutzerdefinierten Menüelements fest.

Melden eines ausgewählten Befehlsmenüelements an WebView2

Wenn der Benutzer einen WebView2-Kontextmenübefehl auswählt (ein Standardmenüelement in einem benutzerdefinierten Kontextmenü), kann die Host-App diese Auswahl optional an WebView2 melden, sodass WebView2 den Befehl aufruft.

Benutzerdefinierte Menüelemente

Wenn Ihre Host-App ein benutzerdefiniertes Menüelement als ausgewählten Menüelement meldet, wird das CustomMenuItemSelected Ereignis für das benutzerdefinierte Menüelement ausgelöst.

Deaktivieren von Kontextmenüs

Die AreDefaultContextMenusEnabled Eigenschaft steuert, ob ein Kontextmenü geöffnet werden kann. Wenn die WebView2-Einstellung AreDefaultContextMenusEnabled auf Falsefestgelegt ist, werden Kontextmenüs deaktiviert, und das ContextMenuRequested Ereignis wird nicht ausgelöst, z. B. wenn der Benutzer mit der rechten Maustaste klickt.

Übersicht über API-Referenz

Siehe auch

  • Last updated on