Idioma: HTML | XAML

Guia de início rápido: adicionando barras de aplicativos (XAML)

Applies to Windows and Windows Phone

Use barras de aplicativos para mostrar a navegação, os comandos e as ferramentas que podem ser ocultas quando não forem necessárias. Você pode colocar uma barra de aplicativos na parte superior da página, na parte inferior da página, ou nas duas. As barras de aplicativos são ocultas por padrão e são mostradas ou dispensadas quando o usuário clica com o botão direito, pressiona Windows + Z ou passa o dedo a partir da extremidade do topo ou a parte inferior da tela. Elas podem ser mostradas programaticamente quando o usuário faz uma seleção ou interage com o aplicativo.

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

Pré-requisitos

Escolher entre AppBar ou CommandBar

A estrutura XAML inclui os controles CommandBar e AppBar para exibir a interface do usuário que aparece ao passar o dedo pelas bordas de cima e de baixo da tela. A CommandBar tem mais funcionalidades internas, mas está limitada ao tipo de conteúdo que você pode inserir nela. A AppBar permite adicionar qualquer conteúdo em linguagem XAML, mas é você que tem que gerenciar o layout e o redimensionamento.

Importante  Os controles CommandBar, AppBarButton, AppBarToggleButton e AppBarSeparator estão disponíveis apenas para aplicativos desenvolvidos para Windows 8.1. Nos aplicativos desenvolvidos para Windows 8, use um controle AppBar.

  1. Se você precisar de uma barra de aplicativos apenas com os controles AppBarButton,AppBarToggleButton e AppBarSeparator, use a CommandBar. A CommandBar torna a criação de barras de aplicativos básicas mais simples, com:

    • Layout automático de comandos, com os comandos principais à direita e os comandos secundários à esquerda.
    • Redimensionamento automático de comandos da barra de aplicativos quando o tamanho do aplicativo muda.
  2. Se você precisar de conteúdo mais complexo, como imagens, barras de progresso, caixa de pesquisa, blocos de texto e botões personalizados, use um controle AppBar. Você pode usar uma AppBar com conteúdo personalizado para criar uma barra de ferramentas ou uma interface do usuário de navegação. Ao colocar os comandos em um controle AppBar, você tem que redimensionar e reorganizar o conteúdo da AppBar conforme muda o tamanho da tela. Para saber mais, veja Como usar uma barra de aplicativos em diferentes modos de exibição.

Adicionando uma barra de aplicativos

  • Para adicionar uma barra de aplicativos ao seu aplicativo, atribua um controle CommandBar ou AppBar à propriedade TopAppBar ou BottomAppBar de uma Page.

    Use a barra de navegação (barra de aplicativos superior) para mostrar a navegação no seu aplicativo. Normalmente, você usa uma AppBar com botões personalizados para navegação. Para saber mais, veja Design de navegação para aplicativos da Windows Store.

    Use a barra de aplicativos inferior para mostrar os comandos e ferramentas. Para saber mais, veja Design de comandos para aplicativos da Windows Store.

    Este exemplo mostra como adicionar um controle AppBar como a barra de aplicativos superior e um controle CommandBar como a barra de aplicativos inferior.

    
    
    <Page.TopAppBar>
        <AppBar>
            <!-- AppBar content -->
        </AppBar>
    </Page.TopAppBar>
    
    <Page.BottomAppBar>
        <CommandBar>
            <!-- CommandBar content -->
        </CommandBar>
    </Page.BottomAppBar>
    
    

Em um aplicativo de várias páginas, você pode compartilhar barras de aplicativos com os comandos comuns nas páginas. Para saber mais, veja Como compartilhar uma barra de aplicativos em páginas.

Adicionando conteúdo à CommandBar

  • Para adicionar conteúdo à CommandBar, insira os controles AppBarButton, AppBarToggleButton e AppBarSeparator nas coleções PrimaryCommands e SecondaryCommands de CommandBar. Os controles adicionados diretamente à CommandBar em XAML são incluídos na coleção PrimaryCommands automaticamente.

    Este exemplo mostra uma CommandBar com PrimaryCommands e SecondaryCommands.

    
    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Label="Refresh" Icon="Refresh" Click="AppBarButton_Click"/>
            <AppBarButton Label="Help" Icon="Help" Click="AppBarButton_Click"/>
    
            <CommandBar.SecondaryCommands>
                <AppBarButton Label="Edit" Icon="Edit" Click="AppBarButton_Click"/>
                <AppBarButton Label="Remove" Icon="Remove" Click="AppBarButton_Click"/>
                <AppBarButton Label="Add" Icon="Add" Click="AppBarButton_Click"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
    
    

    Controle da barra de aplicativos inferior

Adicionando conteúdo à AppBar

  • A AppBar só pode ter uma parte de conteúdo filho, assim você adiciona um painel de layout no qual é possível incluir outros controles.

    Este exemplo mostra a AppBar com botões de navegação e uma caixa de pesquisa.

    
    <Page.TopAppBar>
        <AppBar>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal">
                    <Button Content="Home" Width="140" Height="80" Click="AppBarButton_Click"/>
                    <Button Content="Page 1" Width="140" Height="80" Click="AppBarButton_Click"/>
                    <Button Content="Page 2" Width="140" Height="80" Click="AppBarButton_Click"/>
                </StackPanel>
                <SearchBox Grid.Column="1" Width="300" Height="50" HorizontalAlignment="Right"/>
            </Grid>
        </AppBar>
    </Page.TopAppBar>
    
    

    Controle da barra de aplicativos inferior

Abrindo uma barra de aplicativos programaticamente

Por padrão, as barras de aplicativos aparecem quando o usuário clica com o botão direito, ou pressiona Windows + Z, ou passa o dedo a partir da extremidade do topo ou a parte inferior da tela. Quando o usuário executa uma dessas ações, as barras de aplicativos superior e inferior aparecem, se a página tiver as duas. Você pode abrir uma barra de aplicativos programaticamente, definindo a propriedade IsOpen como true. Quando você faz isso, apenas a barra de aplicativos específica para a qual você definir o valor da propriedade (superior ou inferior) é aberta.

  1. Inicialmente, para abrir a barra de aplicativos quando a página é carregada, defina a propriedade IsOpen como true em seu XAML.
    
    <Page.BottomAppBar>
        <CommandBar IsOpen="True">
            <AppBarButton Label="Refresh" Icon="Refresh" Click="AppBarButton_Click"/>
            <AppBarButton Label="Help" Icon="Help" Click="AppBarButton_Click"/>
        </CommandBar>
    </Page.BottomAppBar>
    
    
  2. Para abrir a barra de aplicativos programaticamente, defina a propriedade IsOpen como true em seu código. Para mencionar a barra de aplicativos no código, você pode dar um nome e usá-lo para fazer referência a ela ou mencionar a propriedade TopAppBar ou BottomAppBar.
    
    private void OpenButton_Click(object sender, RoutedEventArgs e)
    {
        if (this.BottomAppBar != null)
        {
            this.BottomAppBar.IsOpen = true;
        }
    }
    
    

    Você normalmente abre a barra de aplicativos programaticamente para mostrar comandos contextuais quando o usuário interage com um item em seu aplicativo. Por exemplo, você pode mostrar uma barra de aplicativos com comandos de formatação quando o usuário seleciona o texto em seu aplicativo. Quando você mostrar os comandos contextuais, defina o aplicativo no modo de dispensa de barras como fixo até que o contexto mude para manter os comandos visíveis.

Tornando uma barra de aplicativos fixa

Por padrão, as barras de aplicativos são dispensadas quando o usuário interage com o seu aplicativo em qualquer lugar fora da barra de aplicativos. Para manter os comandos visíveis, você pode alterar o modo de dispensa definindo a propriedade IsSticky como true. Quando um barra de aplicativos é fixa, ela é dispensada apenas quando o usuário clica com o botão direito, pressiona Windows + Z ou passa o dedo a partir da extremidade do topo ou a parte inferior da tela.

  1. Para que sua barra de aplicativos permaneça visível quando o usuário interagir com o aplicativo, defina a propriedade IsSticky como true em seu XAML.
    
    <Page.TopAppBar>
        <AppBar IsSticky="True">
            <StackPanel Orientation="Horizontal">
                <Button Content="Home" Width="140" Height="80" Click="AppBarButton_Click"/>
                <Button Content="Page 1" Width="140" Height="80" Click="AppBarButton_Click"/>
                <Button Content="Page 2" Width="140" Height="80" Click="AppBarButton_Click"/>
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>
    
    
  2. Para alterar o modo de descarte da barra de aplicativos programaticamente, defina a propriedade IsSticky como true em seu código. Para mencionar a barra de aplicativos no código, você pode dar um nome e usá-lo para fazer referência a ela ou mencionar a propriedade TopAppBar ou BottomAppBar.
    
    private void OpenButton_Click(object sender, RoutedEventArgs e)
    {
        if (this.TopAppBar != null)
        {
            this.TopAppBar.IsSticky = true;
        }
    }
    
    

Resumo e próximas etapas

Neste guia início rápido, você aprendeu como adicionar uma barra de aplicativos ao seu aplicativo da Windows Store em C++, C# ou Visual Basic.

Para fornecer uma experiência consistente para os seus usuários, reveja as Diretrizes das barras de aplicativos.

Para saber mais sobre os controles AppBarButton, veja Guia de início rápido: adicionando botões à barra de aplicativos.

Tópicos relacionados

Amostra de controle AppBar em XAML
Guia de início rápido: adicionando botões à barra de aplicativos
Design de comandos para aplicativos da Windows Store
AppBar
Cenários de recursos do Reversi: barra de aplicativos

 

 

Mostrar:
© 2014 Microsoft