Freigeben über

Anpassen von Kontextmenüs in WebView2

  • Artikel

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 (Kontextmenüs) einer WebView2-App anzupassen. Sie können beispielsweise eine der folgenden Aktionen ausführen:

  • Fügen Sie ein benutzerdefiniertes Kontextmenü hinzu.

    Anstatt das Standardkontextmenü zu verwenden, kann Ihre Host-App ein eigenes Kontextmenü mithilfe der Informationen zeichnen, die aus dem WebView2-Kontextmenü gesendet werden. Ihre App behandelt das ContextMenuRequested Ereignis. Sie können die in den Ereignisargumenten ContextMenuRequested von bereitgestellten Daten verwenden, um ein benutzerdefiniertes Kontextmenü mit Einträgen Ihrer Wahl anzuzeigen. In diesem Fall behandeln Sie das Ereignis und fordern eine Verzögerung an.

    Sie können einem benutzerdefinierten Kontextmenü Standardmenüelemente und/oder benutzerdefinierte Menüelemente hinzufügen.

  • Fügen Sie einem benutzerdefinierten Kontextmenü Standardmenüelemente hinzu.

  • Fügen Sie einem Standardkontextmenü benutzerdefinierte Menüelemente hinzu.

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

  • Deaktivieren Sie Kontextmenüs.

Terminologie:

Begriff Definition
Menüpunkt Ein weit gefasster Begriff. Enthält Kontrollkästchen, Befehl, Optionsfeld, Trennzeichen und Untermenü.
Befehl Ein schmaler 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ü mithilfe der Informationen zeichnen, die aus dem WebView2-Kontextmenü gesendet werden. Ihre App behandelt das ContextMenuRequested Ereignis. Sie können die in den Ereignisargumenten ContextMenuRequested von bereitgestellten Daten verwenden, um ein benutzerdefiniertes Kontextmenü mit Einträgen Ihrer Wahl anzuzeigen. In diesem Fall behandeln Sie das Ereignis und fordern eine Verzögerung an.

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

Sie können einem benutzerdefinierten Kontextmenü Standardmenüelemente und/oder benutzerdefinierte Menüelemente hinzufügen.

Um ein benutzerdefiniertes Kontextmenü anzuzeigen, das die gewünschten Menüelemente enthält, verwenden Sie die Daten, die CoreWebView2ContextMenuRequestedEventArgs im des CoreWebView2ContextMenuRequested-Ereignisses bereitgestellt werden. In diesem Fall geben Sie als truean Handled und fordern eine Verzögerung an.

Fügen Sie für ein CoreWebView2.ContextMenuRequested Ereignis einen Ereignislistener hinzu, der über einen verfügt CoreWebView2ContextMenuRequestedEventArgs.

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

Beispiel: Hinzufügen eines benutzerdefinierten Kontextmenüs

Im folgenden Beispiel wird das WebView2-Kontextmenü im Kontextmenüformat Win32/WPF dargestellt.

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ü

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

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, wann der Benutzer das Öffnen eines Kontextmenüs anfordert. Dies ist für benutzerdefinierte oder Standardkontextmenüs identisch.

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

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

  • Fügen Sie dem Standardkontextmenü benutzerdefinierte Menüelemente hinzu.
  • Entfernen Sie benutzerdefinierte Menüelemente 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 anzugeben, 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 zulässt, dass das Kontextmenü angezeigt wird, d. h. wenn die AreDefaultContextMenusEnabled -Eigenschaft ist true.

CoreWebView2ContextMenuRequestedEventArgs enthält die folgenden Informationen:

  • Eine sortierte Liste von ContextMenuItem Objekten zum Auffüllen des benutzerdefinierten Kontextmenüs. Die sortierte Liste enthält Folgendes:

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

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

  • Ein Auswahlobjekt, das die Art des ausgewählten Kontexts und die entsprechenden Parameterdaten des Kontextmenüs enthält.

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

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 verarbeiten.

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 anzugeben, dass der Benutzer ein benutzerdefiniertes Menüelement ausgewählt hat, das Ihre App einem Kontextmenü hinzugefügt hat.

Wenn der Benutzer ein benutzerdefiniertes Menüelement auswählt, wird das CustomMenuItemSelected Ereignis für das ausgewählte Kontextmenüelementobjekt ausgelöst, in folgenden Fällen:

  • 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 (ein Standardmenüelement in einem benutzerdefinierten Kontextmenü) auswählt, 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ähltes 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 Einstellung WebView2 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 die API-Referenz

Siehe auch