Xamarin.Forms Menuitem

Télécharger l’exemple

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 d’application Shell.

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

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

• Command est un qui permet de ICommand lier des actions utilisateur, telles que des appuis ou des clics au doigt, à des commandes définies sur un mode d’affichage.
• CommandParameter est un object qui spécifie le paramètre qui doit être passé au Command.
• IconImageSource est une ImageSource valeur qui définit l’icône d’affichage.
• IsDestructive est une bool valeur qui indique si le MenuItem supprime son élément d’interface utilisateur associé 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 affiché.

Ces propriétés étant soutenues par BindableProperty des objets, le MenuItem instance peut être la cible des 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 dans un 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 de , DataTemplateexposant 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>

Un MenuItem peut également être créé dans le 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 le MenuItem instance 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 référencent 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 à des commandes définies sur un modèle de vue :

<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 Command propriétés et CommandParameter liées à des commandes sur le modèle de vue. Le viewmodel contient les commandes référencées dans le 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 mode de vue 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 des icônes sur Android. Sur les 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 un MenuItem 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 au moment 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 le cas échéant.

Important

Ne liez pas la IsEnabled propriété à une autre propriété lorsque vous utilisez la Command propriété pour activer ou désactiver le MenuItem.

L’exemple suivant montre un MenuItem dont Command la propriété se lie à un ICommand nommé 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 :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);
    }
}

Dans cet exemple, le MenuItem est désactivé jusqu’à ce que la IsMenuItemEnabled propriété soit définie. Dans ce cas, la Command.ChangeCanExecute méthode est appelée, ce qui entraîne la réévaluation du canExecute délégué pour 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.

Sur 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

• MenuItem Demos
• Images dans Xamarin.Forms