Exibir uma barra de menus em um aplicativo da área de trabalho do .NET MAUI

Uma barra de menus do .NET MAUI (.NET Multi-platform App UI) é um contêiner que apresenta um conjunto de menus em uma linha horizontal, na parte superior de um aplicativo no Mac Catalyst e no Windows.

Cada menu de nível superior na barra de menus, conhecido como item da barra de menus, é representado por um objeto MenuBarItem. MenuBarItem define as propriedades a seguir:

• Text, do tipo string, define o texto do menu.
• IsEnabled, do tipo boolean, especifica se o menu está habilitado. O valor padrão dessa propriedade é true.

Essas propriedades são apoiadas por objetos BindableProperty, o que significa que podem ser alvos de associações de dados e ser estilizada.

Um MenuBarItem pode consistir nos seguintes filhos:

• MenuFlyoutItem, que representa um item de menu que pode ser clicado.
• MenuFlyoutSubItem, que representa um item de submenu que pode ser clicado.
• MenuFlyoutSeparator, que é uma linha horizontal que separa itens no menu.

MenuFlyoutSubItem deriva de MenuFlyoutItem, que, por sua vez, deriva da interface MenuItem. MenuItem define várias propriedades que permitem que a aparência e o comportamento de um item de menu sejam especificados. A aparência de um item de menu ou subitem pode ser definida com a configuração das propriedades Text e IconImageSource. A resposta a um clique de item de menu ou subitem pode ser definida com a configuração das propriedades Clicked, Command e CommandParameter. Para obter mais informações sobre itens de menu, consulte Exibir itens de menu.

Criar itens da barra de menus

Os objetos MenuBarItem podem ser adicionados à coleção MenuBarItems, do tipo IList<MenuBarItem>, em um ContentPage. Os aplicativos da área de trabalho do .NET MAUI exibirão uma barra de menus com itens de menu, quando forem adicionados a qualquer ContentPage hospedado em um NavigationPage ou em um aplicativo Shell.

O seguinte exemplo mostra um ContentPage que define itens da barra 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>

Esse exemplo define três menus de nível superior. Cada menu de nível superior tem itens de menu, e o segundo menu de nível superior tem um submenu e um separador:

Observação

No Mac Catalyst, os itens de menu são adicionados à barra de menus do sistema.

Neste exemplo, cada MenuFlyoutItem define um item de menu que executa um ICommand quando selecionado.

Os aceleradores de teclado podem ser adicionados a itens de menu em uma barra de menus, para que um item de menu possa ser invocado por meio de um atalho de teclado. Para obter mais informações, confira Aceleradores de teclado.

Exibir ícones em itens de menu

MenuFlyoutItem e MenuFlyoutSubItem herdam a propriedade IconImageSource de MenuItem, o que permite que um ícone pequeno seja exibido ao lado do texto de um item de menu. Esse ícone pode ser uma imagem ou um ícone de fonte.

Aviso

O Mac Catalyst não dá suporte à exibição de ícones em itens de menu.

O seguinte exemplo mostra um item da barra de menus, em que os ícones dos itens de menu são definidos usando ícones de fonte:

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

Nesse exemplo, o item da barra de menus define três itens de menu que exibem um ícone e um texto no Windows.

Para obter mais informações sobre como exibir ícones de fonte, consulte Exibir ícones de fonte. Para obter informações sobre como adicionar imagens a projetos do .NET MAUI, consulte Adicionar imagens a um projeto do aplicativo .NET MAUI.