Share via

Menus e menus de contexto

  • Artigo

Os menus e os menus de contexto são semelhantes em termos de aparência e do 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, há diferenças entre elas, como o que você deve usar para criá-las e como elas são acessadas por um usuário.

Exemplo de um menu de contexto típico

Esse é o controle 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 uma solicitação de confirmação, use uma caixa de diálogo ou um submenu.

Se um comando específico 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 chegar a ele.

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

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

Se você 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 de texto é apresentar e editar texto; Comandos adicionais (como Recortar, Copiar e Colar) são secundários e pertencem a um menu de contexto.

Exemplo de um 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 mouse (ou por meio de uma ação equivalente, como pressionar e segurar com o dedo).
  • São associados a elemento por meio de sua propriedade ContextFlyout.

Nos casos em que o menu de contexto inclui comandos comuns (como comandos Copiar, Recortar, Colar, Excluir, Compartilhar ou seleção de texto), use o 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 inclui comandos comuns, o submenu da barra de comandos ou o submenu de menu podem ser usados para mostrar um menu de contexto. É recomendável usar 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:

  • Têm um único ponto de entrada (um menu Arquivo na parte superior da tela, por exemplo) que sempre é exibido.
  • Geralmente são ligados a um botão ou um item de menu pai.
  • São invocados por clique com o botão esquerdo (ou uma ação equivalente, como tocar com o dedo).
  • São associados a um elemento por meio das propriedades Flyout ou FlyoutBase.AttachedFlyout ou agrupados em uma barra de menus na parte superior da janela do aplicativo.

Quando o usuário invoca um elemento de comando (como um botão) cuja função principal é apresentar comandos adicionais, use o submenu de menu para hospedar um único menu de nível superior para ser mostrado embutido como um submenu anexado ao elemento de interface do usuário na tela. Cada MenuFlyout pode hospedar itens de menu e submenus. Para aplicativos que podem precisar 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 do Aplicativo Windows e o WinUI 3, mas geralmente são aplicáveis a aplicativos UWP que usam o WinUI 2. Consulte a referência da API da UWP para obter informações e exemplos específicos da plataforma.

Esta seção contém informações necessárias para usar o controle em um aplicativo UWP ou WinUI 2.

Os controles CommandBarFlyout e MenuBar para aplicativos UWP são incluídos como parte da Biblioteca de Interface do Usuário do Windows 2. Para obter mais informações, incluindo instruções de instalação, confira Biblioteca de interface do usuário do Windows. As APIs para esses controles existem nos namespaces Windows.UI.Xaml.Controls e Microsoft.UI.Xaml.Controls .

É recomendável usar a WinUI 2 mais recente para obter os estilos e modelos mais atuais para todos os controles. O WinUI 2.2 ou posterior inclui um novo modelo para esses controles que usa cantos arredondados. Para obter mais informações, confira Raio de canto.

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

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

<muxc:CommandBarFlyout />
<muxc:MenuBar />