Flyout de menu e barra de menus

Os submenus de menu são usados em cenários de menu e menu de contexto para exibir uma lista de comandos ou opções quando solicitado pelo usuário. Um menu pendente mostra um menu de nível superior incorporado que pode ter itens de menu e submenus. Para mostrar um conjunto de vários menus de nível superior em uma linha horizontal, use a barra de menus (que você normalmente posiciona na parte superior da janela do aplicativo).

Será este o controlo correto?

Consulte menus e menus de contexto para obter ajuda na identificação da distinção entre cenários de menus e menus de contexto e sobre quando usar o complemento de menu versus complemento da barra de comandos.

Os menus drop-down podem ser utilizados como menus e menus de contexto para organizar comandos. 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 utilizado frequentemente e tiver espaço disponível, consulte exemplos de comandos de coleção para obter exemplos de como colocar um comando diretamente num elemento próprio para que os utilizadores não precisem de passar por um menu para o aceder.

Criar um menu suspenso

• APIs importantes:classe MenuFlyout, propriedade ContextFlyout, propriedade FlyoutBase.AttachedFlyout

Abra o aplicativo WinUI 3 Gallery e veja MenuFlyout em ação

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

Para criar um menu suspenso, utiliza-se a classe MenuFlyout. Você define o conteúdo do menu adicionando os objetos MenuFlyoutItem, MenuFlyoutSubItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem e MenuFlyoutSeparator ao MenuFlyout.

Estes objetos destinam-se a:

• MenuFlyoutItem—Executando uma ação imediata.
• MenuFlyoutSubItem—Contém uma lista em cascata de itens de menu.
• ToggleMenuFlyoutItem—Ativar ou desativar uma opção.
• RadioMenuFlyoutItem—Alternar entre itens de menu mutuamente exclusivos.
• MenuFlyoutSeparator—Separando visualmente os itens de menu.

Este exemplo cria um MenuFlyout e usa a propriedade ContextFlyout, uma propriedade disponível para a maioria dos controles, para mostrar o MenuFlyout como um menu de contexto.

<Rectangle
  Height="100" Width="100">
  <Rectangle.ContextFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
    </MenuFlyout>
  </Rectangle.ContextFlyout>
  <Rectangle.Fill>
    <SolidColorBrush x:Name="rectangleFill" Color="Red" />
  </Rectangle.Fill>
</Rectangle>

private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
    // Change the color from red to blue or blue to red.
    if (rectangleFill.Color == Windows.UI.Colors.Red)
    {
        rectangleFill.Color = Windows.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Windows.UI.Colors.Red;
    }
}

O próximo exemplo é quase idêntico, mas em vez de usar a propriedade ContextFlyout para mostrar a classe MenuFlyout como um menu de contexto, o exemplo usa a propriedade FlyoutBase.ShowAttachedFlyout para mostrá-la como um menu.

<Rectangle
  Height="100" Width="100"
  Tapped="Rectangle_Tapped">
  <FlyoutBase.AttachedFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
    </MenuFlyout>
  </FlyoutBase.AttachedFlyout>
  <Rectangle.Fill>
    <SolidColorBrush x:Name="rectangleFill" Color="Red" />
  </Rectangle.Fill>
</Rectangle>

private void Rectangle_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}

private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
    // Change the color from red to blue or blue to red.
    if (rectangleFill.Color == Windows.UI.Colors.Red)
    {
        rectangleFill.Color = Windows.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Windows.UI.Colors.Red;
    }
}

Ícones

Considere fornecer ícones de itens de menu para:

• Os itens mais usados.
• Itens de menu cujo ícone é padrão ou bem conhecido.
• Itens de menu cujo ícone ilustra bem o que o comando faz.

Não se sinta obrigado a fornecer ícones para comandos que não têm uma visualização padrão. Ícones enigmáticos não são úteis, criam confusão visual e impedem que os usuários se concentrem nos itens importantes do menu.

<MenuFlyout>
  <MenuFlyoutItem Text="Share" >
    <MenuFlyoutItem.Icon>
      <FontIcon Glyph="&#xE72D;" />
    </MenuFlyoutItem.Icon>
  </MenuFlyoutItem>
  <MenuFlyoutItem Text="Copy" Icon="Copy" />
  <MenuFlyoutItem Text="Delete" Icon="Delete" />
  <MenuFlyoutSeparator />
  <MenuFlyoutItem Text="Rename" />
  <MenuFlyoutItem Text="Select" />
</MenuFlyout>

Dica

O tamanho do ícone em um MenuFlyoutItem é 16x16px. Se você usar SymbolIcon, FontIcon ou PathIcon, o ícone será automaticamente dimensionado para o tamanho correto sem perda de fidelidade. Se usar o BitmapIcon, certifique-se de que o ícone tenha 16x16px.

Dispensa leve

Descarte leve controlos como menus, menus de contexto e outros submenus, prender o foco do teclado e do gamepad dentro da interface de utilizador transitória até serem descartados. Para fornecer uma pista visual para esse comportamento, os controles de descarte de luz no Xbox desenharão uma sobreposição que diminui a visibilidade da interface do usuário fora do escopo. A propriedade LightDismissOverlayMode pode modificar esse comportamento. Por padrão, as interfaces de usuário transitórias desenharão a sobreposição de descarte leve no Xbox (automático), mas não em outras famílias de dispositivos. Você pode optar por forçar a sobreposição a estar sempre On ou sempre Off.

<MenuFlyout LightDismissOverlayMode="Off" />

Criar uma barra de menus

• APIs importantes:classe MenuBar. MenuBarItem classe

Abra o aplicativo WinUI 3 Gallery e veja MenuBar em ação

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

Você usa os mesmos elementos para criar menus em uma barra de menus como em um submenu. No entanto, em vez de agrupar objetos MenuFlyoutItem em um MenuFlyout, você os agrupa em um elemento MenuBarItem. Cada MenuBarItem é adicionado à MenuBar como um menu de nível superior.

Observação

Este exemplo mostra apenas como criar a estrutura da interface do usuário, mas não mostra a implementação de nenhum dos comandos.

<muxc:MenuBar>
    <muxc:MenuBarItem Title="File">
        <MenuFlyoutSubItem Text="New">
            <MenuFlyoutItem Text="Plain Text Document"/>
            <MenuFlyoutItem Text="Rich Text Document"/>
            <MenuFlyoutItem Text="Other Formats..."/>
        </MenuFlyoutSubItem>
        <MenuFlyoutItem Text="Open..."/>
        <MenuFlyoutItem Text="Save"/>
        <MenuFlyoutSeparator />
        <MenuFlyoutItem Text="Exit"/>
    </muxc:MenuBarItem>

    <muxc:MenuBarItem Title="Edit">
        <MenuFlyoutItem Text="Undo"/>
        <MenuFlyoutItem Text="Cut"/>
        <MenuFlyoutItem Text="Copy"/>
        <MenuFlyoutItem Text="Paste"/>
    </muxc:MenuBarItem>

    <muxc:MenuBarItem Title="View">
        <MenuFlyoutItem Text="Output"/>
        <MenuFlyoutSeparator/>
        <muxc:RadioMenuFlyoutItem Text="Landscape" GroupName="OrientationGroup"/>
        <muxc:RadioMenuFlyoutItem Text="Portrait" GroupName="OrientationGroup" IsChecked="True"/>
        <MenuFlyoutSeparator/>
        <muxc:RadioMenuFlyoutItem Text="Small icons" GroupName="SizeGroup"/>
        <muxc:RadioMenuFlyoutItem Text="Medium icons" IsChecked="True" GroupName="SizeGroup"/>
        <muxc:RadioMenuFlyoutItem Text="Large icons" GroupName="SizeGroup"/>
    </muxc:MenuBarItem>

    <muxc:MenuBarItem Title="Help">
        <MenuFlyoutItem Text="About"/>
    </muxc:MenuBarItem>
</muxc:MenuBar>

UWP e WinUI 2

Importante

As informações e os exemplos neste artigo são otimizados para aplicativos que usam o SDK de Aplicativo 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.

MenuBar requer o Windows 10, versão 1809 (SDK 17763) ou posterior, ou WinUI 2.

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

• APIs do UWP:classe MenuFlyout, classe MenuBar, propriedade ContextFlyout, propriedade FlyoutBase.AttachedFlyout
• WinUI 2 Apis:classe MenuBar, propriedade ContextFlyout , propriedade FlyoutBase.AttachedFlyout
• Abra o aplicativo WinUI 2 Gallery e veja MenuBar em ação. O aplicativo WinUI 2 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 2. Obtenha o aplicativo no Microsoft Store ou obtenha o código-fonte em GitHub.

Recomendamos usar o mais recente WinUI 2 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. Para obter mais informações, consulte Raio de canto.

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:MenuFlyout />
<muxc:MenuBar />

Artigos relacionados

• Noções básicas de design de comandos para aplicativos do Windows
• Menus e menus de contexto
• Comando contextual para coleções e listas
• classe MenuFlyout
• da classe MenuBar