Afficher une barre de menus dans une application de bureau .NET MAUI

Une barre de menus .NET Multiplatform App UI (.NET MAUI) est un conteneur qui présente un ensemble de menus sur une ligne horizontale, en haut d’une application sur Mac Catalyst et Windows.

Chaque menu de niveau supérieur dans la barre de menus, appelé élément de barre de menus, est représenté par un objet MenuBarItem. MenuBarItem définit les propriétés suivantes :

• Text, de type string, définit le texte des menus.
• IsEnabled, de type boolean, spécifie si le menu est activé. La valeur par défaut de cette propriété est true.

Les propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être les cibles de liaisons de données et mises en forme avec un style.

MenuBarItem peuvent se composer des enfants suivants :

• MenuFlyoutItem, qui représente un élément de menu sur lequel il est possible de cliquer.
• MenuFlyoutSubItem, qui représente un élément de sous-menu sur lequel il est possible de cliquer.
• MenuFlyoutSeparator, qui est une ligne horizontale qui sépare les éléments dans le menu.

MenuFlyoutSubItem dérive de MenuFlyoutItem, qui, à son tour, dérive MenuItem. MenuItem définit plusieurs propriétés qui permettent d’avoir l’apparence et le comportement d’un élément de menu à spécifier. L’apparence d’un élément de menu ou sous-menu peut être obtenue en définissant les propriétés Text et IconImageSource. La réponse à un clic sur un élément de menu ou sous-menu peut être obtenue en définissant les propriétés Clicked, Command et CommandParameter. Pour plus d’informations sur les éléments de menu, consultez Afficher les éléments de menu.

Créer des éléments de barre de menus

Les objets MenuBarItem peuvent être ajoutés à la collection MenuBarItems, de type IList<MenuBarItem>, sur une ContentPage. Les applications de bureau .NET MAUI affichent une barre de menus contenant des éléments de menu lorsqu’elles sont ajoutées à n’importe quelle ContentPage hébergée dans une NavigationPage ou une application Shell.

L’exemple suivant montre une ContentPage qui définit des éléments de barre de menus :

<ContentPage ...>
    <ContentPage.MenuBarItems>
        <MenuBarItem Text="File">
            <MenuFlyoutItem Text="Exit"
                            Command="{Binding ExitCommand}" />
        </MenuBarItem>
        <MenuBarItem Text="Locations">
            <MenuFlyoutSubItem Text="Change Location">
                <MenuFlyoutItem Text="Redmond, USA"
                                Command="{Binding ChangeLocationCommand}"
                                CommandParameter="Redmond" />
                <MenuFlyoutItem Text="London, UK"
                                Command="{Binding ChangeLocationCommand}"
                                CommandParameter="London" />
                <MenuFlyoutItem Text="Berlin, DE"
                                Command="{Binding ChangeLocationCommand}"
                                CommandParameter="Berlin"/>
            </MenuFlyoutSubItem>
            <MenuFlyoutSeparator />            
            <MenuFlyoutItem Text="Add Location"
                            Command="{Binding AddLocationCommand}" />
            <MenuFlyoutItem Text="Edit Location"
                            Command="{Binding EditLocationCommand}" />
            <MenuFlyoutItem Text="Remove Location"
                            Command="{Binding RemoveLocationCommand}" />                            
        </MenuBarItem>
        <MenuBarItem Text="View">
            <MenuFlyoutItem Text="Refresh"
                            Command="{Binding RefreshCommand}" />
            <MenuFlyoutItem Text="Change Theme"
                            Command="{Binding ChangeThemeCommand}" />
        </MenuBarItem>
    </ContentPage.MenuBarItems>
</ContentPage>

Cet exemple définit trois menus de niveau supérieur. Chaque menu de niveau supérieur comporte des éléments de menu, et le deuxième menu de niveau supérieur a un sous-menu et un séparateur :

Remarque

Sur Mac Catalyst, des éléments de menu sont ajoutés à la barre de menus système.

Dans cet exemple, chaque MenuFlyoutItem définit un élément de menu qui exécute une ICommand lorsqu’il est sélectionné.

Des raccourcis clavier peuvent être ajoutés aux éléments de menu d’une barre de menus afin que ces derniers puissent être appelés via un raccourci clavier. Pour plus d’informations, consultez Accélérateurs clavier.

Afficher des icônes sur les éléments de menu

MenuFlyoutItem et MenuFlyoutSubItem héritent de la propriété IconImageSource de MenuItem, ce qui permet d’afficher une petite icône à côté du texte d’un élément de menu. Cette icône peut être une image ou une icône de police.

Avertissement

Mac Catalyst ne prend pas en charge l’affichage d’icônes sur les éléments de menu.

L’exemple suivant montre un élément de barre de menus, où les icônes des éléments de menu sont définies à l’aide d’icônes de police :

<ContentPage.MenuBarItems>
    <MenuBarItem Text="Media">
        <MenuFlyoutItem Text="Play">
            <MenuFlyoutItem.IconImageSource>
                <FontImageSource Glyph="&#x25B6;"
                                 FontFamily="Arial" />
            </MenuFlyoutItem.IconImageSource>
        </MenuFlyoutItem>
        <MenuFlyoutItem Text="Pause"
                        Clicked="OnPauseClicked">
            <MenuFlyoutItem.IconImageSource>
                <FontImageSource Glyph="&#x23F8;"
                                 FontFamily="Arial" />
            </MenuFlyoutItem.IconImageSource>
        </MenuFlyoutItem>
        <MenuFlyoutItem Text="Stop"
                        Clicked="OnStopClicked">
            <MenuFlyoutItem.IconImageSource>
                <FontImageSource Glyph="&#x23F9;"
                                 FontFamily="Arial" />
            </MenuFlyoutItem.IconImageSource>
        </MenuFlyoutItem>
    </MenuBarItem>
</ContentPage.MenuBarItems>

Dans cet exemple, l’élément de barre de menus définit trois éléments de menu qui affichent une icône et du texte sur Windows.

Pour plus d’informations sur l’affichage d’icônes de police, consultez Afficher des icônes de police. Pour plus d’informations sur l’ajout d’images à des projets .NET MAUI, consultez Ajouter des images à un projet d’application .NET MAUI.