Submenu 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 submenu de menu mostra um menu único, embutido e de nível superior 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).

Esse é o controle correto?

Consulte menus e menus de contexto para obter ajuda na identificação de cenários de menu versus menu de contexto e orientação sobre quando usar o submenu de menu vs. submenu da barra de comando.

Os submenus de menu podem ser usados 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 comando específico for usado com frequência e você tiver o espaço disponível, consulte comando de coleção para obter exemplos sobre como colocar um comando diretamente em seu próprio elemento para que os usuários não precisem passar por um menu para acessá-lo.

Criar um submenu de menu

• APIs Importantes:Classe MenuFlyout, Propriedade ContextFlyout, Propriedade FlyoutBase.AttachedFlyout

Abra o aplicativo Da Galeria do WinUI 3 e consulte MenuFlyout em ação

O aplicativo Da Galeria do WinUI 3 inclui exemplos interativos de controles e recursos do WinUI. Obtenha o aplicativo na Microsoft Store ou navegue pelo código-fonte em GitHub.

Para criar um submenu de menu, use a classe MenuFlyout. Você define o conteúdo do menu adicionando objetos MenuFlyoutItem, MenuFlyoutSubItem, SplitMenuFlyoutItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem e MenuFlyoutSeparator ao MenuFlyout.

Esses objetos são para:

• MenuFlyoutItem—Executar uma ação imediata.
• MenuFlyoutSubItem— com uma lista em cascata dos itens de menu.
• SplitMenuFlyoutItem — executando uma ação padrão, com ações relacionadas em uma lista em cascata. Para obter mais informações, consulte Adicionar um item de menu dividido.
• ToggleMenuFlyoutItem—Ativar ou desativar uma opção.
• RadioMenuFlyoutItem— troca entre itens de menu mutuamente exclusivos.
• MenuFlyoutSeparator—Separa visualmente os itens de menu.

Este exemplo cria uma MenuFlyout e usa a propriedade ContextFlyout, que é uma propriedade disponível para a maioria dos controles, para mostrar a 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 == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.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 == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.UI.Colors.Red;
    }
}

Adicionar um item de menu dividido

• APIs importantes:classe SplitMenuFlyoutItem, propriedade Items

Abra o aplicativo Da Galeria do WinUI 3 e veja SplitMenuFlyoutItem em ação

O aplicativo Da Galeria do WinUI 3 inclui exemplos interativos de controles e recursos do WinUI. Obtenha o aplicativo na Microsoft Store ou navegue pelo código-fonte em GitHub.

Um SplitMenuFlyoutItem oferece uma experiência de botão dividido em um menu flutuante. Ele tem duas partes:

• A parte primária executa uma ação padrão, como um MenuFlyoutItem. Para responder quando o usuário o selecionar, manipule o evento Click ou defina a propriedade Command.
• A parte secundária abre um submenu de opções relacionadas, como um MenuFlyoutSubItem.

Use um item de menu dividido quando um comando tiver uma ação padrão comum e algumas variações, como salvar um arquivo em formatos diferentes. Ele mantém o menu mais curto do que seria se você listasse cada variação como um item separado.

Observação

SplitMenuFlyoutItem requer o SDK do Aplicativo Windows 1.8.6 ou posterior.

Esse exemplo, do aplicativo Galeria do WinUI 3, adiciona dois itens de menu dividido a um MenuFlyout. Os itens de submenu estão na propriedade Items . Como Items é a propriedade de conteúdo XAML de SplitMenuFlyoutItem, você pode adicionar os itens de submenu diretamente dentro do elemento SplitMenuFlyoutItem.

<StackPanel Orientation="Horizontal" Spacing="12">
    <Button Content="File Options">
        <Button.Flyout>
            <MenuFlyout>
                <SplitMenuFlyoutItem Text="Save" Click="SplitMenuFlyoutItem_Click">
                    <SplitMenuFlyoutItem.Icon>
                        <FontIcon Glyph="&#xE74E;" />
                    </SplitMenuFlyoutItem.Icon>
                    <MenuFlyoutItem Text="Save as .docx" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .pdf" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .txt" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
                <SplitMenuFlyoutItem Text="Share" Icon="Share" Click="SplitMenuFlyoutItem_Click">
                    <MenuFlyoutItem Text="Share via email" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Share via link" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
            </MenuFlyout>
        </Button.Flyout>
    </Button>
    <TextBlock x:Name="SelectedCommandText" VerticalAlignment="Center" />
</StackPanel>

private void SplitMenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    // SplitMenuFlyoutItem derives from MenuFlyoutItem, so one handler works for both.
    if (sender is MenuFlyoutItem selectedItem)
    {
        SelectedCommandText.Text = "Clicked: " + selectedItem.Text;
    }
}

O submenu também pode conter objetos MenuFlyoutSeparator e outros objetos SplitMenuFlyoutItem. Se a Items coleção estiver vazia, a parte secundária será desabilitada.

Para personalizar o submenu, defina SubMenuPresenterStyle como um estilo para o controle de apresentação do submenu e SubMenuItemStyle como um estilo para os itens no submenu.

Os usuários interagem com as duas partes separadamente quando usam o teclado:

• Quando a parte primária tiver foco, pressione Enter ou Space para executar a ação padrão ou pressione a tecla de seta para a direita para mover o foco para a parte secundária.
• Quando a parte secundária tiver foco, pressione Enter ou a tecla de direção para a direita para abrir o submenu.
• Quando o submenu estiver aberto, pressione Esc ou a tecla de seta para a esquerda para fechá-lo.

Os leitores de tela também anunciam as duas partes separadamente. A parte secundária é anunciada como um botão que fornece mais opções para o item de menu.

Icons

Considere fornecer ícones de item de menu para:

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

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

<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 dos ícones no MenuFlyoutItem é 16 x 16px. Se você usar SymbolIcon, FontIcon ou PathIcon, o ícone será dimensionado automaticamente para o tamanho correto sem perda de fidelidade. Se você usar BitmapIcon, certifique-se de que sua imagem tenha 16 x 16px.

Light dismiss

Os controles light dismiss, como menus, menus de contexto e outros submenus, prendem o foco do teclado ou do gamepad dentro da interface do usuário transitória até que esse seja ignorado. Para fornecer uma sugestão visual desse comportamento, faça light dismiss dos controles no Xbox para desenhar uma sobreposição que esmaece a visibilidade da interface do usuário fora do escopo. Esse comportamento pode ser modificado com a propriedade LightDismissOverlayMode . Por padrão, as interfaces do usuário transitórias desenham a sobreposição light dismiss no Xbox (Auto), mas não em outras famílias de dispositivos. Você pode optar por forçar a sobreposição a estar sempre Ativada ou sempre Desativada.

<MenuFlyout LightDismissOverlayMode="Off" />

Criar uma barra de menus

• APIs importantes:classe MenuBar. classe MenuBarItem

Abra o aplicativo da Galeria do WinUI 3 e veja MenuBar em ação

O aplicativo Da Galeria do WinUI 3 inclui exemplos interativos de controles e recursos do WinUI. Obtenha o aplicativo na Microsoft Store ou navegue pelo código-fonte em GitHub.

Você pode usar os mesmos elementos para criar menus em uma barra de menus, como em um submenu de menu. No entanto, em vez de agrupar os objetos MenuFlyoutItem em um MenuFlyout, agrupe-os em um elemento MenuBarItem. Cada MenuBarItem é adicionado ao 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 comando.

<MenuBar>
    <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"/>
    </MenuBarItem>

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

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

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

Artigos relacionados

• Noções básicas de design de comando para aplicativos do Windows
• Menus e menus de contexto
• Comandos contextuais para coleções e listas
• Classe MenuFlyout
• Classe SplitMenuFlyoutItem
• Classe MenuBar