Xamarin.Forms MenuItem

La Xamarin.FormsMenuItem classe définit des éléments de menu pour les menus tels que ListView les menus contextuels d’élément et les menus volants de l’application Shell.

Les captures d’écran suivantes montrent MenuItem des objets dans un ListView menu contextuel sur iOS et Android :

La classe MenuItem définit les propriétés suivantes :

• Command est une ICommand qui permet de lier des actions utilisateur, telles que des appuis avec le doigt ou des clics, aux commandes définies sur un viewmodel.
• CommandParameter est un object qui spécifie le paramètre qui doit être transmis à Command.
• IconImageSource est une ImageSource valeur qui définit l’icône d’affichage.
• IsDestructive est une bool valeur qui indique si l’élément MenuItem d’interface utilisateur associé est supprimé de la liste.
• IsEnabled est une bool valeur qui indique si cet objet répond à l’entrée utilisateur.
• Text est une string valeur qui spécifie le texte d’affichage.

Ces propriétés sont sauvegardées par BindableProperty des objets afin que l’instance MenuItem puisse être la cible de liaisons de données.

Créer un MenuItem

MenuItem les objets peuvent être utilisés dans un menu contextuel sur les éléments d’un ListView objet. Le modèle le plus courant consiste à créer MenuItem des objets au sein d’une ViewCell instance, qui est utilisé comme DataTemplate objet pour le ListViews ItemTemplate. Lorsque l’objet ListView est rempli, il crée chaque élément à l’aide du DataTemplate, exposant les MenuItem choix lorsque le menu contextuel est activé pour un élément.

L’exemple suivant montre MenuItem l’instanciation dans le contexte d’un ListView objet :

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

Vous pouvez également créer un MenuItem en 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
};

Définir le comportement de MenuItem avec des événements

La classe MenuItem expose un événement Clicked. Un gestionnaire d’événements peut être attaché à cet événement pour réagir aux appuis ou aux clics sur l’instance MenuItem en XAML :

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

Un gestionnaire d’événements peut également être attaché dans le code :

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

Les exemples précédents ont référencé un gestionnaire d’événements OnItemClicked . Le code suivant montre un exemple d’implémentation :

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
}

Définir le comportement de MenuItem avec MVVM

La MenuItem classe prend en charge le modèle Model-View-ViewModel (MVVM) via BindableProperty des objets et l’interface ICommand . Le code XAML suivant montre MenuItem les instances liées aux commandes définies sur un 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>

Dans l’exemple précédent, deux MenuItem objets sont définis avec leurs CommandParameter Command propriétés liées aux commandes sur le viewmodel. Le viewmodel contient les commandes référencées dans le code 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}";
    });
}

L’exemple d’application inclut une DataService classe utilisée pour obtenir une liste d’éléments pour remplir les ListView objets. Un viewmodel est instancié, avec des éléments de la DataService classe et défini comme BindingContext dans le code-behind :

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

Icônes MenuItem

Avertissement

MenuItem les objets affichent uniquement les icônes sur Android. Sur d’autres plateformes, seul le texte spécifié par la Text propriété s’affiche.

Les icônes sont spécifiées à l’aide de la IconImageSource propriété. Si une icône est spécifiée, le texte spécifié par la Text propriété ne s’affiche pas. La capture d’écran suivante montre une MenuItem icône avec une icône sur Android :

Pour plus d’informations sur l’utilisation d’images dans Xamarin.Forms, consultez Images dans Xamarin.Forms.

Activer ou désactiver un MenuItem au moment de l’exécution

Pour activer la désactivation d’un MenuItem lors de l’exécution, liez sa Command propriété à une ICommand implémentation et assurez-vous qu’un canExecute délégué active et désactive le ICommand cas échéant.

Important

Ne liez pas la IsEnabled propriété à une autre propriété lors de l’utilisation de la Command propriété pour activer ou désactiver le MenuItem.

L’exemple suivant montre une MenuItem propriété dont Command la propriété est liée à un ICommand nom MyCommand:

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

L’implémentation ICommand nécessite un canExecute délégué qui retourne la valeur d’une bool propriété pour activer et désactiver les MenuIteméléments suivants :

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

Dans cet exemple, la MenuItem valeur est désactivée jusqu’à ce que la IsMenuItemEnabled propriété soit définie. Lorsque cela se produit, la Command.ChangeCanExecute méthode est appelée, ce qui entraîne la réévaluation du canExecute délégué MyCommand .

Comportement du menu contextuel multiplateforme

Les menus contextuels sont accessibles et affichés différemment sur chaque plateforme.

Sur Android, le menu contextuel est activé en appuyant longuement sur un élément de liste. Le menu contextuel remplace le titre et la zone de barre de navigation et MenuItem les options s’affichent sous forme de boutons horizontaux.

Sur iOS, le menu contextuel est activé en balayant sur un élément de liste. Le menu contextuel s’affiche sur l’élément de liste et MenuItems s’affiche sous forme de boutons horizontaux.

Dans UWP, le menu contextuel est activé en cliquant avec le bouton droit sur un élément de liste. Le menu contextuel s’affiche près du curseur sous forme de liste verticale.

Liens connexes

• Images dans Xamarin.Forms