Windows Dev Center

Como adicionar um menu a uma barra de aplicativos (XAML)

Quando você adicionar comandos a uma barra de aplicação, considere se seus conjuntos de comando funcionariam melhor em um menu de comando. Menus permitem que você apresente mais opções em menos espaço e inclua controles interativos. Neste exemplo, o menu Classificar exibe uma lista simples que facilita as opções de escolha.

Veja este recurso em ação como parte da nossa série sobre recursos para aplicativos, do início ao fim:  Interface do usuário de aplicativo da Windows Store, do início ao fim

Menu de barra de aplicativos

O que você precisa saber

Tecnologias

Pré-requisitos

Instruções

Etapa 1: Adicione uma barra de aplicativos ao seu aplicativo

Para saber mais, veja Guia de início rápido: adicionando barras de aplicativos.

Adicionamos aqui um controle CommandBar como a barra de aplicativos inferior.


<Page.BottomAppBar>
    <CommandBar>
        ...
    </CommandBar>
</Page.BottomAppBar>

Etapa 2: Adicione um AppBarButton à barra de aplicativos.

Adicione um AppBarButton e defina as propriedades Icon e Label.


...
    <CommandBar>
        <AppBarButton Icon="Sort" Label="Sort">
            .... 
        </AppBarButton>
    </CommandBar>
...

Etapa 3: Adicione um MenuFlyout a AppBarButton

Adicione um MenuFlyout à propriedade Flyout do botão. O submenu é aberto automaticamente quando o botão é clicado.


...
        <AppBarButton Icon="Sort" Label="Sort">
            <AppBarButton.Flyout>
                <MenuFlyout>
                    ....
                </MenuFlyout>
            </AppBarButton.Flyout>
        </AppBarButton>
...

Etapa 4: Adicione MenuFlyoutItems a MenuFlyout

Adicione um MenuFlyoutItem a cada escolha no menu e defina sua propriedade Text. Manipule seu evento Click ou atribua um Command para executar uma ação quando o usuário fizer uma escolha.


...
                <MenuFlyout>
                    <MenuFlyoutItem Text="By rating" Click="MenuFlyoutItem_Click" Tag="rating"/>
                    <MenuFlyoutItem Text="By match" Click="MenuFlyoutItem_Click" Tag="match"/>
                    <MenuFlyoutItem Text="By distance" Click="MenuFlyoutItem_Click" Tag="distance"/>
                </MenuFlyout>
...

Exemplo completo

Aqui está o XAML final da barra de aplicativos e o código do manipulador de eventos do evento MenuFlyoutItem.Click.


<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton Icon="Sort" Label="Sort">
            <AppBarButton.Flyout>
                <MenuFlyout>
                    <MenuFlyoutItem Text="By rating" Click="MenuFlyoutItem_Click" Tag="rating"/>
                    <MenuFlyoutItem Text="By match" Click="MenuFlyoutItem_Click" Tag="match"/>
                    <MenuFlyoutItem Text="By distance" Click="MenuFlyoutItem_Click" Tag="distance"/>
                </MenuFlyout>
            </AppBarButton.Flyout>
        </AppBarButton>
    </CommandBar>
</Page.BottomAppBar>


private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    MenuFlyoutItem selectedItem = sender as MenuFlyoutItem;

    if (selectedItem != null)
    {
        if (selectedItem.Tag.ToString() == "rating")
        {
            SortByRating();
        }
        else if (selectedItem.Tag.ToString() == "match")
        {
            SortByMatch();
        }
        else if (selectedItem.Tag.ToString() == "distance")
        {
            SortByDistance();
        }
    }
}

Tópicos relacionados

Guia de início rápido: adicionando barras de aplicativo
AppBar
CommandBar
AppBarButton
MenuFlyout

 

 

Mostrar:
© 2015 Microsoft