CommandBar – Controles UWP

Dentro de um aplicativo existem aquelas tarefas mais comuns que o usuário deve ter acesso rápido pois são utilizadas frequentemente.

 

Para isso podemos utilizar o controle CommandBar.

 

Ele é um controle de uso geral, flexível e leve que pode mostrar conteúdo complexo (imagem e barra de progresso, por exemplo) ou blocos de texto, assim como comandos simples, como os controles AppBarButton, AppBarToggleButton e AppBarSeparator.

 

Incluindo um CommandBar na tela

 

Para incluir um CommamdBar na tela do nosso aplicativo pelo Visual Studio é muito simples. Apenas arraste o item CommandBar da Caixa de Ferramentas (Toolbox).

 

Controles UWP - CommandBar - menu do Visual Studio

 

O Visual Studio insere um CommandBar “modelo” com 2 botões de exemplo:

 

Controles UWP - CommandBar - modelo do Visual Studio

 

Agora, se você quiser fazer do jeito roots, via código, comece digitando as tags no seu xaml:

 

 

Você ficará com a tela do seu aplicativo assim:

 

Controles UWP - CommandBar - inserindo via código

 

E se executar o app, o controle fica assim:

 

Controles UWP - CommandBar - executando o modelo

 

Anatomia de um CommandBar

 

O CommandBar possui 4 áreas principais:

 

  • O conteúdo, que aparece a esquerda (Content);
  • O botão “Mais” que fica na ponta direita do controle;
  • Os comandos primários que aparecem a esquerda do botão Mais e
  • O menu “flutuante” (overflow) onde ficam os comandos secundários e só aparece quando o CommandBar está aberto.

 

Por padrão, o CommandBar mostra uma fila de ícones de botões e um botão “Mais” ilustrado com reticencias (…)

 

Controles UWP - CommandBar - botão Mais

 

Abaixo temos o mesmo CommadBar depois que o usuário clica no botão Mais.

 

Podemos fazer a mesma coisa via programação, com a propriedade IsOpen = True:

 

Controles UWP - CommandBar - Anatomia do CommandBar

 

Os elementos dentro do controle seguem sempre a mesma ordem: Content, Comandos Primários, Botão Mais e Comandos Secundários. A única alteração que podemos fazer é inverter a ordem deles setando a propriedade FlowDirection para “RightToLeft”.

 

 

Controles UWP - CommandBar - a direita

 

Posição do CommandBar

 

Se você simplesmente colocar a tag <CommandBar> dentro do seu XAML, a barra de comando aparecerá na parte de cima da tela.

 

Você pode posicionar ela no final da tela, utilizando a propriedade BottomAppBar do elemento Page assim:

 

 

Desta mesma forma, pode-se explicitar que a barra ficará na parte de cima da tela:

 

 

Elementos do CommandBar

 

Podemos incluir objetos dentro do CommandBar através de 3 propriedades: Content, PrimaryCommands e SecondaryCommands.

A propriedade Content aceita qualquer elemento XAML, ao contrário das propriedades PrimaryCommands e SecondaryCommands, que aceitam apenas os elementos AppBarButton, AppBarToggleButton e AppBarSeparator.

 

Por padrão, qualquer elemento dentro de CommandBar sem localização definida é incluído na coleção PrimaryCommands.

 

Então, para incluir elementos dentro do conteúdo, fazemos assim:

 

 

Tudo o que for incluído em SecondaryCommands fará parte do menu flutuante que se abre quando o botão Mais é pressionado.

 

 

Se preciso, podemos mover comandos entre PrimaryCommands e SecondaryCommands via código.

 

As características dos controles AppBarButton e AppBarToggleButton são o ícone e o texto associado. Eles possuem dois tamanhos: normal e compacto.

 

Por padrão, o texto associado é mostrado. Quando a propriedade IsCompact for verdadeiro, o texto associado fica escondido. Quando usados dentro de um controle CommandBar, IsCompact muda automaticamente de acordo com a propriedade IsOpen.

 

Os elementos AppBarButton, AppBarToggleButton e AppBarSeparator serão vistos em detalhes num próximo artigo.

 

Estados Aberto e Fechado

 

Como vimos acima, quando o usuário clica no botão Mais a barra de comandos alterna entre o estado Aberto e Fechado.

 

Vimos também que podemos utilizar a propriedade IsOpen no código para abrir e fechar a CommandBar.

 

É possível ainda usar os eventos Opening, Opened, Closing e Closed para detectar se a barra está abrindo/fechando e tomar alguma ação. Pode-se fazer a barra ficar semi transparente quando ela estiver fechada, por exemplo.

 

Dicas no uso da CommandBar

 

  • Se em seu aplicativo houver um comando que aparece em várias páginas, coloque ele sempre na mesma posição. Acostume o usuário com sua interface, fique familiar.

 

  • Quando for usar comandos do tipo Aceitar e Rejeitar, Sim e Não ou OK e Cancelar, coloque os comandos de aceite (Aceitar, Sim, Ok) à esquerda de Rejeitar, Não e Cancelar. Isso mantém a consistência entre os vários aplicativos no mercado e facilita a vida do usuário.

 

  • Para dispositivos portáteis pequenos, coloque a CommandBar embaixo, para melhor acesso.

 

  • Já em dispositivos com tela maiores, coloque a barra de comando no topo da tela, para melhor visualização e maior destaque.

 

  • Por padrão, o texto dos botões fica embaixo do ícone. Em telas maiores, considere colocar os textos associados ao lado dos ícones para melhorar a legibilidade, pois assim eles não se escondem quando a barra é fechada. Para fazer isso, use a propriedade DefaultLabelPosition=”Right” da CommandBar.

 

E para receber um aviso quando os próximos artigos forem publicados, se cadastre na Grupo VIP App Dev!

Comece pelo e-book GRATUITO

5 Passos Para Ser Um App Dev

Se você não sabe por onde começar, este e-book te mostra os passos para ser um desenvolvedor de aplicativos de sucesso.
100% livre de spam.

Para enviar seu comentário, preencha os campos abaixo:

Deixe uma resposta

*

Seja o primeiro a comentar!