Menús y menús contextuales

  • Artículo

Los menús y los menús contextuales son parecidos en su apariencia y en lo que pueden contener. Ambos muestran una lista organizada de comandos o opciones y ahorran espacio ocultando hasta que el usuario los necesite. Sin embargo, hay diferencias entre ellos, como lo que debe usar para crearlos y cómo un usuario tiene acceso a ellos.

Ejemplo de un menú contextual típico

¿Es este el control adecuado?

Los menús y los menús contextuales sirven para organizar comandos y ahorrar espacio ocultando esos comandos hasta que el usuario los necesite. 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 un comando determinado se usará con frecuencia y tiene el espacio disponible, considere la posibilidad de colocarlo directamente en su propio elemento para que los usuarios no tengan que pasar por un menú para llegar a él.

¿Cuándo debes usar un menú o un menú contextual?

  • Si el elemento host es un botón o algún otro elemento de comando cuyo rol principal es presentar comandos adicionales, usa un menú.
  • Si el elemento host es algún otro tipo de elemento con otra finalidad principal (por ejemplo, presentar texto o una imagen), usa un menú contextual.

Si desea agregar comandos (como Cortar, Copiar y Pegar) a un elemento de texto o imagen, use un menú contextual en lugar de un menú. En este escenario, el rol principal del elemento de texto es presentar y editar texto; los comandos adicionales (como Cortar, Copiar y Pegar) son secundarios y pertenecen a un menú contextual.

Ejemplo de menú contextual en Galería de fotos

Menús contextuales

Los menús contextuales tienen las siguientes características:

  • Se adjuntan a un solo elemento y muestran comandos secundarios.
  • Se invocan al hacer clic con el botón derecho (o una acción equivalente, como pulsar y sostener con el dedo).
  • Se asocian con un elemento a través de su propiedad ContextFlyout.

En los casos en los que el menú contextual incluirá comandos comunes (como los comandos Copiar, Cortar, Pegar, Eliminar, Compartir o selección de texto), use el control flotante de la barra de comandos y agrupe estos comandos comunes como comandos principales para que se muestren como una sola fila horizontal en el menú contextual.

En los casos en los que el menú contextual no incluya comandos comunes, se puede usar el control flotante de la barra de comandos o el control flotante del menú para mostrar un menú contextual. Se recomienda usar CommandBarFlyout porque proporciona más funcionalidad que MenuFlyout y, si lo desea, puede lograr el mismo comportamiento y aspecto de MenuFlyout mediante solo comandos secundarios.

Los menús tienen las siguientes características:

  • Tienen un solo punto de entrada (un menú Archivo en la parte superior de la pantalla, por ejemplo) que se muestra siempre.
  • Por lo general, se adjuntan a un botón o un elemento de menú principal.
  • Se invocan mediante un clic con el botón izquierdo (o una acción equivalente, como pulsar con el dedo).
  • Se asocian con un elemento a través de sus propiedades Flyout o FlyoutBase.AttachedFlyout o se agrupan en una barra de menús en la parte superior de la ventana de aplicación.

Cuando el usuario invoca un elemento de comando (como un botón) cuyo rol principal es presentar comandos adicionales, use el control flotante de menú para hospedar un único menú de nivel superior que se mostrará insertado como un control flotante asociado al elemento de interfaz de usuario en lienzo. Cada MenuFlyout puede hospedar elementos de menú y submenús. En el caso de las aplicaciones que pueden necesitar más organización o agrupación, use una barra de menús como una manera rápida y sencilla de mostrar un conjunto de varios menús de nivel superior en una fila horizontal.

UWP y WinUI 2

Importante

La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulte el material de referencia de las API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene información que necesita para usar el control en una aplicación para UWP o WinUI 2.

Los controles CommandBarFlyout y MenuBar para aplicaciones para UWP se incluyen como parte de la biblioteca de interfaz de usuario de Windows 2. Para obtener más información e instrucciones sobre la instalación, consulta el artículo Windows UI Library (Biblioteca de interfaz de usuario de Windows). Las API de estos controles existen en los espacios de nombres Windows.UI.Xaml.Controls y Microsoft.UI.Xaml.Controls .

Se recomienda usar la versión más reciente de WinUI 2 para obtener los estilos y plantillas más actuales para todos los controles. WinUI 2.2 o posterior incluye una nueva plantilla para estos controles que usa esquinas redondeadas. Para obtener más información, consulta Radio de redondeo.

Para usar el código de este artículo con WinUI 2, use un alias en XAML (usamos muxc) para representar las API de la Biblioteca de interfaz de usuario de Windows que se incluyen en el proyecto. Consulte Introducción a la Biblioteca de interfaz de usuario de Windows 2 para obtener más información.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:CommandBarFlyout />
<muxc:MenuBar />