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

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

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

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. 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;
    }
}

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>

Sugestão

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 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

• APIs importantes:classe MenuBar. MenuBarItem classe

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

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.

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>

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
• da classe MenuBar