Menu desdobrável 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

A aplicação WinUI 3 Gallery inclui exemplos interativos de controlos e funcionalidades WinUI. Descarrega a aplicação na Microsoft Store ou navega pelo código-fonte no GitHub.

Para criar um menu suspenso, utiliza-se a classe MenuFlyout. Define o conteúdo do menu adicionando os objetos MenuFlyoutItem, MenuFlyoutSubItem, SplitMenuFlyoutItem, 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.
• SplitMenuFlyoutItem — Realizar uma ação predefinida, com ações relacionadas numa lista em cascata. Para mais informações, consulte Adicionar um item do menu dividido.
• 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 == 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

A aplicação WinUI 3 Gallery inclui exemplos interativos de controlos e funcionalidades WinUI. Descarrega a aplicação na Microsoft Store ou navega pelo código-fonte no GitHub.

Um SplitMenuFlyoutItem proporciona uma experiência de botão fracionado num menu de flyout. Tem duas partes:

• A parte principal executa uma ação por defeito, como um MenuFlyoutItem. Para responder quando o utilizador o selecionar, gere o evento Click ou defina a propriedade Command .
• A parte secundária abre um submenu de opções relacionadas, como um MenuFlyoutSubItem.

Utilize um item de menu dividido quando um comando tiver uma ação padrão comum e algumas variações, como guardar um ficheiro em formatos diferentes. Isso mantém o teu menu mais curto do que seria se colocasses cada variação como um item separado.

Este exemplo, da aplicação WinUI 3 Gallery, adiciona dois itens de menu separados a um MenuFlyout. Os itens do submenu estão na propriedade Items. Como Items é a propriedade de conteúdo XAML do SplitMenuFlyoutItem, pode adicionar os itens do 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 pode também conter objetos MenuFlyoutSeparator e outros objetos SplitMenuFlyoutItem. Se a Items coleção estiver vazia, a parte secundária fica desativada.

Para personalizar o submenu, defina SubMenuPresenterStyle para um estilo para o presenter do submenu, e SubMenuItemStyle para um estilo para os itens no submenu.

Os utilizadores interagem com as duas partes separadamente quando usam o teclado:

• Quando a parte principal tiver foco, pressione Enter ou Espaço para realizar a ação padrão, ou pressione a tecla de seta Direita para mover o foco para a parte secundária.
• Quando a parte secundária tiver foco, pressiona Enter ou a seta direita para abrir o submenu.
• Quando o submenu estiver aberto, pressione Esc ou a tecla de seta esquerda para o fechar.

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

Icons

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>

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 um sinal visual para este comportamento, os controlos de descarte por luz na Xbox desenham uma sobreposição que diminui a visibilidade da interface fora do alcance. Esse comportamento pode ser modificado com a propriedade LightDismissOverlayMode. Por defeito, interfaces transitórias desenham a sobreposição de descarte de luz em Xbox (Auto), mas não noutras 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

A aplicação WinUI 3 Gallery inclui exemplos interativos de controlos e funcionalidades WinUI. Descarrega a aplicação na Microsoft Store ou navega pelo código-fonte no 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.

<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 de aplicações do Windows
• Menus e menus de contexto
• Comando contextual para coleções e listas
• classe MenuFlyout
• Classe SplitMenuFlyoutItem
• da classe MenuBar