Xamarin.FormsMENUITEM MenuItem

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Die- Xamarin.Forms MenuItem Klasse definiert Menü Elemente für Menüs wie ListView Element Kontextmenüs und shellanwendungsflyout-Menüs.The Xamarin.Forms MenuItem class defines menu items for menus such as ListView item context menus and Shell application flyout menus.

Die folgenden Screenshots zeigen MenuItem Objekte in einem ListView Kontextmenü unter IOS und Android:The following screenshots show MenuItem objects in a ListView context menu on iOS and Android:

"MenuItems unter IOS und Android""MenuItems on iOS and Android"

Die- MenuItem Klasse definiert die folgenden Eigenschaften:The MenuItem class defines the following properties:

  • Commandist eine ICommand , die das Binden von Benutzeraktionen (z. b. Finger Tippen oder Klicks) auf Befehle ermöglicht, die für ein ViewModel definiert sind.Command is an ICommand that allows binding user actions, such as finger taps or clicks, to commands defined on a viewmodel.
  • CommandParameterist eine object , die den Parameter angibt, der an den übergeben werden soll Command .CommandParameter is an object that specifies the parameter that should be passed to the Command.
  • IconImageSourceein- ImageSource Wert, der das Anzeige Symbol definiert.IconImageSource is an ImageSource value that defines the display icon.
  • IsDestructiveein bool Wert, der angibt, ob das MenuItem zugehörige Benutzeroberflächen Element aus der Liste entfernt.IsDestructive is a bool value that indicates whether the MenuItem removes its associated UI element from the list.
  • IsEnabledein bool Wert, der angibt, ob dieses-Objekt auf Benutzereingaben antwortet.IsEnabled is a bool value that indicates whether this object responds to user input.
  • Textein- string Wert, der den Anzeige Text angibt.Text is a string value that specifies the display text.

Diese Eigenschaften werden von Objekten unterstützt, BindableProperty sodass die MenuItem Instanz das Ziel von Daten Bindungen sein kann.These properties are backed by BindableProperty objects so the MenuItem instance can be the target of data bindings.

Erstellen eines MENUITEMCreate a MenuItem

MenuItem-Objekte können in einem Kontextmenü für ListView die Elemente eines-Objekts verwendet werden.MenuItem objects can be used within a context menu on a ListView object's items. Das gängigste Muster besteht darin, MenuItem Objekte innerhalb einer-Instanz zu erstellen ViewCell , die als- DataTemplate Objekt für die s verwendet wird ListView ItemTemplate .The most common pattern is to create MenuItem objects within a ViewCell instance, which is used as the DataTemplate object for the ListViews ItemTemplate. Wenn das ListView Objekt aufgefüllt wird, wird jedes Element mithilfe von erstellt DataTemplate , wobei die Optionen verfügbar gemacht werden, MenuItem Wenn das Kontextmenü für ein Element aktiviert wird.When the ListView object is populated it will create each item using the DataTemplate, exposing the MenuItem choices when the context menu is activated for an item.

Im folgenden Beispiel wird die MenuItem Instanziierung innerhalb des Kontexts eines- ListView Objekts veranschaulicht:The following example shows MenuItem instantiation within the context of a ListView object:

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

Ein MenuItem kann auch im Code erstellt werden:A MenuItem can also be created in code:

// A function returns 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 instance to the ContextActions
    MenuItem menuItem = new MenuItem
    {
        Text = "Context Menu Option"
    };
    viewCell.ContextActions.Add(menuItem);

    // The function returns the custom ViewCell
    // to the DataTemplate constructor
    return viewCell;
});

// Finally, the dataTemplate is provided to
// the ListView object
ListView listView = new ListView
{
    ...
    ItemTemplate = dataTemplate
};

Definieren von MenuItem-Verhalten mit EreignissenDefine MenuItem behavior with events

Die MenuItem-Klasse macht ein Clicked-Ereignis verfügbar.The MenuItem class exposes a Clicked event. Ein Ereignishandler kann an dieses Ereignis angefügt werden, um auf die- MenuItem Instanz in XAML auf tippen oder Klicks zu reagieren:An event handler can be attached to this event to react to taps or clicks on the MenuItem instance in XAML:

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

Ein Ereignishandler kann auch im Code angefügt werden:An event handler can also be attached in code:

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

In den vorherigen Beispielen wurde auf einen OnItemClicked Ereignishandler verwiesen.Previous examples referenced an OnItemClicked event handler. Der folgende Code zeigt eine Beispiel Implementierung:The following code shows an example implementation:

void OnItemClicked(object sender, EventArgs e)
{
    // The sender is the menuItem
    MenuItem menuItem = sender as MenuItem;

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

    // Do something with the contextItem here
}

Definieren von MenuItem-Verhalten mit MVVMDefine MenuItem behavior with MVVM

Die MenuItem -Klasse unterstützt das Model-View-ViewModel (MVVM)-Muster durch BindableProperty -Objekte und die- ICommand Schnittstelle.The MenuItem class supports the Model-View-ViewModel (MVVM) pattern through BindableProperty objects and the ICommand interface. Der folgende XAML-Code zeigt MenuItem Instanzen an, die an in einem ViewModel definierten Befehlen gebunden sind:The following XAML shows MenuItem instances bound to commands defined on a viewmodel:

<ContentPage.BindingContext>
    <viewmodels:ListPageViewModel />
</ContentPage.BindingContext>

<StackLayout>
    <Label Text="{Binding Message}" ... />
    <ListView ItemsSource="{Binding Items}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.ContextActions>
                        <MenuItem Text="Edit"
                                    IconImageSource="icon.png"
                                    Command="{Binding Source={x:Reference contentPage}, Path=BindingContext.EditCommand}"
                                    CommandParameter="{Binding .}"/>
                        <MenuItem Text="Delete"
                                    Command="{Binding Source={x:Reference contentPage}, Path=BindingContext.DeleteCommand}"
                                    CommandParameter="{Binding .}"/>
                    </ViewCell.ContextActions>
                    <Label Text="{Binding .}" />
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

Im vorherigen Beispiel MenuItem werden zwei-Objekte mit Ihren Command -und- CommandParameter Eigenschaften definiert, die an Befehle für das ViewModel gebunden sind.In the previous example, two MenuItem objects are defined with their Command and CommandParameter properties bound to commands on the viewmodel. Das ViewModel enthält die Befehle, auf die in XAML verwiesen wird:The viewmodel contains the commands referenced in the XAML:

public class ListPageViewModel : INotifyPropertyChanged
{
    ...

    public ICommand EditCommand => new Command<string>((string item) =>
    {
        Message = $"Edit command was called on: {item}";
    });

    public ICommand DeleteCommand => new Command<string>((string item) =>
    {
        Message = $"Delete command was called on: {item}";
    });
}

Die Beispielanwendung enthält eine- DataService Klasse, die verwendet wird, um eine Liste von Elementen zum Auffüllen der-Objekte zu erhalten ListView .The sample application includes a DataService class used to get a list of items for populating the ListView objects. Ein "ViewModel" wird mit Elementen aus der-Klasse instanziiert DataService und als BindingContext im Code Behind festgelegt:A viewmodel is instantiated, with items from the DataService class, and set as the BindingContext in the code-behind:

public MenuItemXamlMvvmPage()
{
    InitializeComponent();
    BindingContext = new ListPageViewModel(DataService.GetListItems());
}

Warnung

MenuItemin Objekten werden nur Symbole unter Android angezeigt.MenuItem objects only display icons on Android. Auf anderen Plattformen wird nur der von der- Text Eigenschaft angegebene Text angezeigt.On other platforms, only the text specified by the Text property will be displayed.

Symbole werden mithilfe der- IconImageSource Eigenschaft angegeben.Icons are specified using the IconImageSource property. Wenn ein Symbol angegeben wird, wird der von der- Text Eigenschaft angegebene Text nicht angezeigt.If an icon is specified, the text specified by the Text property will not be displayed. Der folgende Screenshot zeigt ein- MenuItem Symbol mit einem Symbol unter Android:The following screenshot shows a MenuItem with an icon on Android:

"Screenshot des MenuItem-Symbols unter Android""Screenshot of MenuItem icon on Android"

Weitere Informationen zur Verwendung von Bildern in Xamarin.Forms finden Sie unter Bilder Xamarin.Forms in .For more information on using images in Xamarin.Forms, see Images in Xamarin.Forms.

Aktivieren oder Deaktivieren eines MenuItem zur LaufzeitEnable or disable a MenuItem at runtime

Um das Deaktivieren von zur MenuItem Laufzeit zu aktivieren, binden Sie seine- Command Eigenschaft an eine ICommand -Implementierung, und stellen Sie sicher, dass ein Delegat den ggf canExecute . aktiviert und deaktiviert ICommand .To enable of disable a MenuItem at runtime, bind its Command property to an ICommand implementation, and ensure that a canExecute delegate enables and disables the ICommand as appropriate.

Wichtig

Binden Sie die- IsEnabled Eigenschaft nicht an eine andere Eigenschaft, wenn Sie die- Command Eigenschaft zum Aktivieren oder Deaktivieren von verwenden MenuItem .Do not bind the IsEnabled property to another property when using the Command property to enable or disable the MenuItem.

Das folgende Beispiel zeigt eine MenuItem , deren- Command Eigenschaft an einen mit dem Namen gebunden ist ICommand MyCommand :The following example shows a MenuItem whose Command property binds to an ICommand named MyCommand:

<MenuItem Text="My menu item"
          Command="{Binding MyCommand}" />

Die- ICommand Implementierung erfordert einen Delegaten canExecute , der den Wert einer Eigenschaft zurückgibt bool , um die zu aktivieren und zu deaktivieren MenuItem :The ICommand implementation requires a canExecute delegate that returns the value of a bool property to enable and disable the MenuItem:

public class MyViewModel : INotifyPropertyChanged
{
    bool isMenuItemEnabled = false;
    public bool IsMenuItemEnabled
    {
        get { return isMenuItemEnabled; }
        set
        {
            isMenuItemEnabled = value;
            MyCommand.ChangeCanExecute();
        }
    }

    public Command MyCommand { get; private set; }

    public MyViewModel()
    {
        MyCommand = new Command(() =>
        {
            // Execute logic here
        },
        () => IsMenuItemEnabled);
    }
}

In diesem Beispiel wird der MenuItem deaktiviert, bis die- IsMenuItemEnabled Eigenschaft festgelegt ist.In this example, the MenuItem is disabled until the IsMenuItemEnabled property is set. Wenn dies auftritt, wird die- Command.ChangeCanExecute Methode aufgerufen, die bewirkt, dass der Delegat canExecute MyCommand erneut ausgewertet wird.When this occurs, the Command.ChangeCanExecute method is called which causes the canExecute delegate for MyCommand to be re-evaluated.

Plattformübergreifendes Kontextmenü VerhaltenCross-platform context menu behavior

Kontextmenüs werden auf jeder Plattform auf unterschiedliche Weise aufgerufen und angezeigt.Context menus are accessed and displayed differently on each platform.

Unter Android wird das Kontextmenü durch Long-Press für ein Listenelement aktiviert.On Android, the context menu is activated by long-press on a list item. Das Kontextmenü ersetzt den Bereich für Titel und Navigationsleiste, und die MenuItem Optionen werden als horizontale Schaltflächen angezeigt.The context menu replaces the title and navigation bar area and MenuItem options are displayed as horizontal buttons.

"Screenshot des Kontextmenüs unter Android""Screenshot of context menu on Android"

Unter IOS wird das Kontextmenü durch Schwenken auf ein Listenelement aktiviert.On iOS, the context menu is activated by swiping on a list item. Das Kontextmenü wird auf dem Listenelement angezeigt und MenuItems als horizontale Schaltflächen angezeigt.The context menu is displayed on the list item and MenuItems are displayed as horizontal buttons.

"Screenshot des Kontextmenüs unter IOS""Screenshot of context menu on iOS"

Bei UWP wird das Kontextmenü aktiviert, indem mit der rechten Maustaste auf ein Listenelement geklickt wird.On UWP, the context menu is activated by right-clicking on a list item. Das Kontextmenü wird in der Nähe des Cursors als vertikale Liste angezeigt.The context menu is displayed near the cursor as a vertical list.

"Screenshot des Kontextmenüs auf der UWP""Screenshot of context menu on UWP"