Afficher les éléments de menu

La classe d’interface utilisateur d’application multiplateforme .NET (.NET MAUI) MenuItem peut être utilisée pour définir 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 Android :

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

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

Ces propriétés sont sauvegardées par BindableProperty des objets, ce qui signifie qu’elles peuvent être des cibles de liaisons de données.

Créer un MenuItem

Pour créer un élément de menu, par exemple en tant que menu contextuel sur les éléments d’un ListView objet, créez un MenuItem objet dans un ViewCell objet utilisé comme DataTemplate objet pour le ListViewfichier 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 comment créer un MenuItem 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>

Cet exemple entraîne un objet qui a du MenuItem texte. Toutefois, l’apparence d’une MenuItem variable varie entre les plateformes.

Vous pouvez également créer un MenuItem code :

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

Un menu contextuel dans un ListView est activé et affiché 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 Windows, 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.

Définir le comportement de MenuItem

La MenuItem classe définit un Clicked événement. Un gestionnaire d’événements peut être attaché à cet événement pour réagir aux appuis ou aux clics sur MenuItem les objets :

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

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

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

Ces exemples référencent un gestionnaire d’événements OnItemClicked , qui est illustré dans l’exemple suivant :

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
}

Définir l’apparence de MenuItem

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 :

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.

Remarque

Les images peuvent être stockées dans un emplacement unique dans votre projet d’application. Pour plus d’informations, consultez Ajouter des images à un projet MAUI .NET.

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

Pour activer ou désactiver 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.