Control flotante de menú y barra de menús

Los menús flotantes se usan en escenarios de menú y menú contextual para mostrar una lista de comandos u opciones cuando el usuario lo solicite. Un menú desplegable muestra un único menú de nivel superior en línea que puede tener elementos de menú y submenús. Para mostrar un conjunto de varios menús de nivel superior en una fila horizontal, use la barra de menús (que normalmente se ubica en la parte superior de la ventana de la aplicación).

Ejemplo de un menú contextual típico

¿Es este el control adecuado?

Consulte menús y menús contextuales para obtener ayuda para identificar escenarios de menús frente a menús contextuales, así como instrucciones sobre cuándo usar el menú flotante de menú frente al control flotante de la barra de comandos.

Los menús flotantes se pueden usar como menús y menús contextuales para organizar los comandos. Para mostrar contenido arbitrario, como una notificación o una solicitud de confirmación, use un cuadro de diálogo o un control flotante.

Si se usará con frecuencia un comando determinado y hubiera espacio disponible, consulte comandos de colecciones para ver ejemplos sobre cómo colocar un comando directamente en su propio elemento para que los usuarios no tengan que pasar por un menú para llegar a él.

Creación de un menú flotante

Abra la aplicación Galería de WinUI 3 y vea MenuFlyout en acción.

Icono de la galería de WinUI 3 La aplicación Galería de WinUI 3 incluye ejemplos interactivos de características y controles winUI. Obtenga la aplicación del Microsoft Store o examine el código fuente en GitHub.

Para crear un menú flotante o un menú contextual, utilice la clase MenuFlyout. Para definir el contenido del menú, agregue objetos MenuFlyoutItem, MenuFlyoutSubItem, SplitMenuFlyoutItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem y MenuFlyoutSeparator a MenuFlyout.

Estos objetos son para:

En este ejemplo se crea un elemento MenuFlyout y se usa la propiedad ContextFlyout, una propiedad disponible para la mayoría de los controles, para mostrar el elemento MenuFlyout como un menú contextual.

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

El ejemplo siguiente es casi idéntico, pero en lugar de usar la propiedad ContextFlyout para mostrar la clase MenuFlyout como un menú contextual, en el ejemplo se usa la propiedad FlyoutBase.ShowAttachedFlyout para mostrarla como un menú.

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

Agregar un elemento de menú desplegable dividido

Abra la aplicación Galería de WinUI 3 y vea SplitMenuFlyoutItem en acción

Icono de la galería de WinUI 3 La aplicación Galería de WinUI 3 incluye ejemplos interactivos de características y controles winUI. Obtenga la aplicación del Microsoft Store o examine el código fuente en GitHub.

SplitMenuFlyoutItem proporciona una experiencia de botón de división en un menú flotante. Tiene dos partes:

  • La parte principal realiza una acción predeterminada, como menuFlyoutItem. Para responder cuando el usuario lo selecciona, controle el evento Click o establezca la propiedad Command .
  • La parte secundaria abre un submenú de opciones relacionadas, como menuFlyoutSubItem.

Use un elemento de menú dividido cuando un comando tenga una acción predeterminada común y algunas variaciones, como guardar un archivo en diferentes formatos. Mantiene el menú más corto de lo que sería si enumeraras cada variación como un elemento independiente.

Nota:

SplitMenuFlyoutItem requiere SDK de Aplicaciones para Windows 1.8.6 o posterior.

En este ejemplo, desde la aplicación Galería de WinUI 3, se agregan dos elementos de menú con botón dividido a un MenuFlyout. Los elementos del submenú se encuentran en la propiedad Items . Dado que Items es la propiedad de contenido XAML de SplitMenuFlyoutItem, puedes agregar los elementos de submenú directamente dentro del 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;
    }
}

El submenú también puede contener objetos MenuFlyoutSeparator y otros objetos SplitMenuFlyoutItem. Si la Items colección está vacía, la parte secundaria está deshabilitada.

Para personalizar el submenú, establezca SubMenuPresenterStyle en un estilo para el presentador del submenú y SubMenuItemStyle en un estilo para los elementos del submenú.

Los usuarios interactúan con las dos partes por separado cuando usan el teclado:

  • Cuando la parte principal tiene el foco, presione Entrar o Espacio para realizar la acción predeterminada o presione la tecla de flecha derecha para mover el foco a la parte secundaria.
  • Cuando la parte secundaria tenga el foco, presione Intro o la tecla de flecha derecha para abrir el submenú.
  • Cuando el submenú esté abierto, presione Esc o la tecla de flecha izquierda para cerrarlo.

Los lectores de pantalla también anuncian las dos partes por separado. La parte secundaria se anuncia como un botón que proporciona más opciones para el elemento de menú.

Icons

Considera la posibilidad de proporcionar iconos de elemento de menú para:

  • Los elementos que se usan con mayor frecuencia.
  • Elementos de menú cuyo icono es estándar o bien conocido.
  • Elementos de menú cuyo icono muestra bien lo que hace el comando.

No te sientas obligado a proporcionar iconos para comandos que no tienen una visualización estándar. Los iconos crípticos no son útiles, provocan una aglutinación visual y evitan que los usuarios se centren en los elementos de menú importantes.

Menú contextual de ejemplo con iconos 

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

Sugerencia

El tamaño del icono de un elemento MenuFlyoutItems es de 16 x 16 píxeles. Si usas SymbolIcon, FontIcon o PathIcon, el icono escalará automáticamente hasta el tamaño correcto sin pérdida de fidelidad. Si usas BitmapIcon, asegúrate de que el activo mide 16 x 16 píxeles.

Cierre del elemento por cambio de foco

Los controles de cierre del elemento por cambio de foco, tales como menús, menús contextuales y otros controles flotantes, capturan el foco del teclado y del controlador para juegos dentro de la interfaz de usuario transitoria hasta que se descartan. Para proporcionar una indicación visual para este comportamiento, los controles de cierre del elemento por cambio de foco de Xbox dibujarán una superposición que atenúa el contraste y la visibilidad de la interfaz de usuario que está fuera del ámbito. Este comportamiento se puede modificar con la propiedad LightDismissOverlayMode. De manera predeterminada, las interfaces de usuario transitorias dibujarán la superposición del cierre del elemento por cambio de foco en Xbox (Automático), pero no en otras familias de dispositivos. Puedes elegir forzar la superposición para que siempre esté Activado o Desactivado.

<MenuFlyout LightDismissOverlayMode="Off" />

Creación de una barra de menús

Abra la aplicación Galería de WinUI 3 y vea MenuBar en acción.

Icono de la galería de WinUI 3 La aplicación Galería de WinUI 3 incluye ejemplos interactivos de características y controles winUI. Obtenga la aplicación del Microsoft Store o examine el código fuente en GitHub.

Usa los mismos elementos para crear menús en una barra de menús, tal como aparece en un control flotante de menú. Sin embargo, en lugar de agrupar objetos MenuFlyoutItem en un elemento MenuFlyout, agrúpalos en un elemento MenuBarItem. Cada MenuBarItem se agrega a MenuBar como un menú de nivel superior.

Ejemplo de una barra de menús

Nota:

En este ejemplo solo se muestra cómo crear la estructura de la interfaz de usuario; no se muestra la implementación de ninguno de los comandos.

<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>
  • Se actualizó por última vez el