Anzeigen von Menüelementen

Die .NET Multi-Platform App UI (.NET MAUI) MenuItem -Klasse kann verwendet werden, um Menüelemente für Menüs wie ListView Elementkontextmenüs und Shell-App-Flyoutmenüs zu definieren.

Die folgenden Screenshots zeigen MenuItem-Objekte in einem ListView Kontextmenü unter Android:

Die MenuItem-Klasse definiert die folgenden Eigenschaften:

• Command, vom Typ ICommand, ermöglicht das Binden von Benutzeraktionen, z. B. Fingertippen oder Klicks, an Befehle, die in einem ViewModel definiert sind.
• CommandParameter, vom Typ object, gibt den Parameter an, der an den Command übergeben werden soll.
• IconImageSource, vom Typ ImageSource, definiert das Menüelementsymbol.
• IsDestructive, vom Typ bool, gibt an, ob MenuItem sein zugeordnetes UI-Element aus der Liste entfernt.
• IsEnabled, vom Typ bool, gibt an, ob das Menüelement auf Benutzereingaben reagiert.
• Text, vom Typ string, gibt den Menüelementtext an.

Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können.

Erstellen eines Menüelements

Um einen Menüpunkt zu erstellen, z. B. als Kontextmenü für die Elemente eines ListView-Objekts, erstellen Sie ein MenuItem-Objekt innerhalb eines ViewCell-Objekts, das als DataTemplate-Objekt für das ListViews ItemTemplate verwendet wird. Wenn das ListView-Objekt ausgefüllt ist, wird es jedes Element unter Verwendung von DataTemplate erstellen und die MenuItem-Auswahlmöglichkeiten offenlegen, wenn das Kontextmenü für ein Element aktiviert wird.

Das folgende Beispiel zeigt, wie man ein MenuItem im Kontext eines ListView-Objekts erstellt:

<ListView>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.ContextActions>
                    <MenuItem Text="Context menu option" />
                </ViewCell.ContextActions>
                <Label Text="{Binding .}" />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

In diesem Beispiel wird ein MenuItem-Objekt mit Text angezeigt. Die Darstellung einer MenuItem variiert auf unterschiedlichen Plattformen.

Eine MenuItem kann auch im Code erstellt werden:

// Return a ViewCell instance that is used as the template for each list item
DataTemplate dataTemplate = new DataTemplate(() =>
{
    // A Label displays the list item text
    Label label = new Label();
    label.SetBinding(Label.TextProperty, ".");

    // A ViewCell serves as the DataTemplate
    ViewCell viewCell = new ViewCell
    {
        View = label
    };

    // Add a MenuItem to the ContextActions
    MenuItem menuItem = new MenuItem
    {
        Text = "Context Menu Option"
    };
    viewCell.ContextActions.Add(menuItem);

    // Return the custom ViewCell to the DataTemplate constructor
    return viewCell;
});

ListView listView = new ListView
{
    ...
    ItemTemplate = dataTemplate
};

Ein Kontextmenü in einer ListView wird aktiviert und auf jeder Plattform anders angezeigt. Unter Android wird das Kontextmenü durch langes Drücken auf ein Listenelement aktiviert. Das Kontextmenü ersetzt den Bereich der Titel- und Navigationsleiste und MenuItem-Optionen werden als horizontale Schaltflächen angezeigt. Unter iOS wird das Kontextmenü durch Wischen in einem Listenelement aktiviert. Das Kontextmenü wird auf dem Listenelement angezeigt und MenuItems werden als horizontale Schaltflächen angezeigt. Unter Windows wird das Kontextmenü aktiviert, indem mit der rechten Maustaste auf ein Listenelement geklickt wird. Das Kontextmenü wird in der Nähe des Cursors als vertikale Liste angezeigt.

Verhalten von Menüelementen definieren

Die Klasse MenuItem definiert ein Clicked-Ereignis. An dieses Ereignis kann ein Ereignishandler angehängt werden, um auf Tippen oder Klicken auf MenuItem-Objekte zu reagieren:

<MenuItem ...
          Clicked="OnItemClicked" />

Ein Ereignishandler kann auch in Code angefügt werden:

MenuItem item = new MenuItem { ... };
item.Clicked += OnItemClicked;

In diesen Beispielen wird auf einen OnItemClicked-Ereignishandler verwiesen, der im folgenden Beispiel gezeigt wird:

void OnItemClicked(object sender, EventArgs e)
{
    MenuItem menuItem = sender as MenuItem;

    // Access the list item through the BindingContext
    var contextItem = menuItem.BindingContext;

    // Do something with the contextItem here
}

Definieren der Darstellung des MenuItem-Objekts

Symbole werden mithilfe der IconImageSource-Eigenschaft angegeben. Wenn ein Symbol angegeben wird, wird der durch die Eigenschaft Text angegebene Text nicht angezeigt. Der folgende Screenshot zeigt ein MenuItem mit einem Symbol auf Android:

MenuItem-Objekte zeigen nur Symbole auf Android an. Auf anderen Plattformen wird nur der durch die Eigenschaft Text angegebene Text angezeigt.

Hinweis

Bilder können an einem einzigen Speicherort in Ihrem App-Projekt gespeichert werden. Weitere Informationen finden Sie unter Hinzufügen von Bildern zu einem .NET MAUI-Projekt.

Aktivieren oder Deaktivieren von Menüelementen zur Laufzeit

Um ein MenuItem zur Laufzeit zu aktivieren oder zu deaktivieren, binden Sie seine Command-Eigenschaft an eine ICommand-Implementierung und stellen Sie sicher, dass ein canExecute-Delegat das ICommand je nach Bedarf aktiviert und deaktiviert.

Wichtig

Binden Sie die Eigenschaft IsEnabled nicht an eine andere Eigenschaft, wenn Sie die Eigenschaft Command zum Aktivieren oder Deaktivieren der MenuItem verwenden.