Mostrar una barra de menús en una aplicación de escritorio de .NET MAUI

Una barra de menús de interfaz de usuario de aplicaciones multiplataforma de.NET (.NET MAUI) es un contenedor que presenta un conjunto de menús en una fila horizontal, en la parte superior de una aplicación en Mac Catalyst y Windows.

Cada menú de nivel superior de la barra de menús, conocido como elemento de barra de menús, se representa mediante un objeto MenuBarItem. MenuBarItem define las siguientes propiedades:

• Text, de tipo string, define el texto del menú.
• IsEnabled, de tipo boolean, especifica si el menú está habilitado. El valor predeterminado de esta propiedad es true.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.

Un MenuBarItem puede constar de los siguientes elementos secundarios:

• MenuFlyoutItem, que representa un elemento de menú en el que se puede hacer clic.
• MenuFlyoutSubItem, que representa un elemento de submenú en el que se puede hacer clic.
• MenuFlyoutSeparator, que es una línea horizontal que separa los elementos del menú.

MenuFlyoutSubItem deriva de MenuFlyoutItem que, a su vez, deriva de MenuItem. MenuItem define varias propiedades que permiten especificar la apariencia y el comportamiento de un elemento de menú. La apariencia de un elemento de menú, o subelemento, se puede definir estableciendo las propiedades Text y IconImageSource. La respuesta a un clic de un elemento de menú, o subelemento, se puede definir estableciendo las propiedades Clicked, Command y CommandParameter. Para obtener más información sobre los elementos, consulta Mostrar elementos del menú.

Crear elementos de la barra de menús

Los objetos MenuBarItem se pueden agregar a la colección MenuBarItems, de tipo IList<MenuBarItem>, en un ContentPage. Las aplicaciones de escritorio de .NET MAUI mostrarán una barra de menús, que contiene elementos de menú, cuando se agregan a cualquier ContentPage que se hospede en una NavigationPage o en una aplicación Shell.

En el ejemplo siguiente se muestra un ContentPage que define los elementos de la barra de menús:

<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>

En este ejemplo se definen tres menús de nivel superior. Cada menú de nivel superior tiene elementos de menú y el segundo menú de nivel superior tiene un submenú y un separador:

Nota:

En Mac Catalyst, los elementos de menú se agregan a la barra de menús del sistema.

En este ejemplo, cada MenuFlyoutItem define un elemento de menú que ejecuta un elemento ICommand cuando está seleccionado.

Los aceleradores de teclado se pueden agregar a los elementos de menú de una barra de menús para que se pueda invocar un elemento de menú a través de un método abreviado de teclado. Para obtener más información, consulta Aceleradores de teclado.

Mostrar iconos en los elementos de menú

MenuFlyoutItem y MenuFlyoutSubItem heredan la propiedad IconImageSource de MenuItem, que permite mostrar un icono pequeño junto al texto de un elemento de menú. Este icono puede ser una imagen o un icono de fuente.

Advertencia

Mac Catalyst no admite la visualización de iconos en los elementos de menú.

En el ejemplo siguiente se muestra un elemento de barra de menús, donde los iconos de los elementos de menú se definen mediante iconos de fuente:

<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>

En este ejemplo, el elemento de la barra de menús define tres elementos de menú que muestran un icono y texto en Windows.

Para obtener más información sobre cómo mostrar iconos de fuente, consulta Display font icons. Para obtener información sobre cómo agregar imágenes a proyectos de .NET MAUI, consulta Incorporación de imágenes a un proyecto de aplicación .NET MAUI.