Partilhar via

Menus e menus de contexto

Os menus e os menus de contexto são semelhantes na sua aparência e no que podem conter. Ambos exibem uma lista organizada de comandos ou opções e economizam espaço ocultando até que o usuário precise deles. No entanto, existem diferenças entre eles, como o que você deve usar para criá-los e como eles são acessados por um usuário.

Exemplo de um menu de contexto típico

Será este o controlo correto?

Menus e menus de contexto são para organizar comandos e economizar espaço, ocultando esses comandos até que o usuário precise deles. Para exibir conteúdo arbitrário, como uma notificação ou solicitação de confirmação, use uma caixa de diálogo ou um submenu.

Se um determinado comando for usado com frequência e você tiver o espaço disponível, considere colocá-lo diretamente em seu próprio elemento para que os usuários não precisem passar por um menu para acessá-lo.

Quando você deve usar um menu ou um menu de contexto?

  • Se o elemento host for um button ou algum outro elemento de comando cuja função principal seja apresentar comandos adicionais, use um menu.
  • Se o elemento host for algum outro tipo de elemento que tenha outra finalidade principal (como apresentar texto ou uma imagem), use um menu de contexto.

Se quiser adicionar comandos (como Recortar, Copiar e Colar) a um elemento de texto ou imagem, use um menu de contexto em vez de um menu. Nesse cenário, a função principal do elemento text é apresentar e editar texto; comandos adicionais (como Recortar, Copiar e Colar) são secundários e pertencem a um menu de contexto.

Exemplo de menu de contexto na galeria de fotos

Menus de contexto

Os menus de contexto têm as seguintes características:

  • São anexados a um único elemento e exibem comandos secundários.
  • São invocados clicando com o botão direito do rato (ou uma ação equivalente, como pressionar e segurar com o dedo).
  • Estão associados a um elemento por meio de sua propriedade ContextFlyout.

Nos casos em que o menu de contexto incluirá comandos comuns (como Copiar, Recortar, Colar, Excluir, Compartilhar ou comandos de seleção de texto), use submenu da barra de comandos e agrupe esses comandos comuns como comandos primários para que eles sejam mostrados como uma única linha horizontal no menu de contexto.

Nos casos em que o menu de contexto não incluirá comandos comuns, o flyout da barra de comandos ou o flyout do menu podem ser usados para mostrar um menu de contexto. Recomendamos o uso de CommandBarFlyout porque ele fornece mais funcionalidade do que MenuFlyout e, se desejado, pode obter o mesmo comportamento e aparência de MenuFlyout usando apenas comandos secundários.

Os menus têm as seguintes características:

  • Tenha um único ponto de entrada (um menu Arquivo na parte superior da tela, por exemplo) que seja sempre exibido.
  • Geralmente são anexados a um botão ou a um item de menu pai.
  • São invocados clicando com o botão esquerdo (ou uma ação equivalente, como tocar com o dedo).
  • Estão associados a um elemento por meio de seu de submenu ou propriedades de FlyoutBase.AttachedFlyout ou agrupados em uma barra de menus na parte superior da janela do aplicativo.

Quando o utilizador invoca um elemento de comando (como um botão) cuja função principal é apresentar comandos adicionais, use para hospedar um único menu de nível superior a ser mostrado diretamente como um submenu anexado ao elemento da interface do utilizador no ecrã. Cada MenuFlyout pode hospedar itens de menu e submenus. Para aplicativos que talvez precisem de mais organização ou agrupamento, use uma barra de menus como uma maneira rápida e simples de mostrar um conjunto de vários menus de nível superior em uma linha horizontal.

UWP e WinUI 2

Importante

As informações e exemplos neste artigo são otimizados para aplicativos que usam o SDK de Aplicativos Windows e WinUI 3, mas geralmente são aplicáveis a aplicativos UWP que usam WinUI 2. Consulte a referência da API UWP para obter informações e exemplos específicos da plataforma.

Esta seção contém informações que você precisa para usar o controle em um aplicativo UWP ou WinUI 2.

Os controles CommandBarFlyout e MenuBar para aplicativos UWP estão incluídos como parte do WinUI 2. Para obter mais informações, incluindo instruções de instalação, consulte WinUI 2. As APIs para esses controles existem tanto nos namespaces Windows.UI.Xaml.Controls como Microsoft.UI.Xaml.Controls.

Recomendamos usar a WinUI 2 mais recente para obter os estilos e modelos mais atuais para todos os controles. WinUI 2.2 ou posterior inclui um novo modelo para esses controles que usa cantos arredondados. Consulte Raio de cantopara obter mais informações.

Para usar o código neste artigo com WinUI 2, use um alias em XAML (usamos muxc) para representar as APIs da Biblioteca da Interface do Usuário do Windows incluídas em seu projeto. Consulte Introdução ao WinUI 2 para obter mais informações.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:CommandBarFlyout />
<muxc:MenuBar />
  • Last updated on