Compartir a través de


SimpleMenu y SimpleMenuItem

Esta página es específica de proyectos WPF

El menú es un control de elementos que organiza jerárquicamente los elementos asociados a los comandos y los controladores de eventos. Para colocar contenido en un menú en Microsoft Expression Blend, haga doble clic en el menú y, a continuación, dibuje un elemento (como un rectángulo) en él. Otra posibilidad es hacer clic con el botón secundario en el menú en Objetos y escala de tiempo y, a continuación, hacer clic en Agregar SimpleMenuItem para agregar elementos individuales a la colección, o bien hacer clic en Enlazar ItemsSource a datos para generar la colección de elementos MenuItem desde un origen de datos. Para agregar un elemento de menú de segundo nivel, puede hacer clic con el botón secundario en un elemento de menú en Objetos y escala de tiempo y, a continuación, hacer clic en Agregar SimpleMenuItem, o bien agregar un elemento de menú personalizado desde la ficha Estilos locales del Panel biblioteca Cc295350.0224cabd-5da1-4e01-bddd-4a647401a098(es-es,Expression.10).png.

Para editar el texto del elemento de menú, haga clic con el botón secundario en él en Objetos y escala de tiempo y, a continuación, haga clic en Editar texto. También puede activar el elemento de menú si hace doble clic en él y dibuja un control. Para ver los elementos de menú secundarios de un elemento de menú de la mesa de trabajo cuando están expandidos, puede hacer clic con el botón secundario en el elemento de menú primario en Objetos y escala de tiempo y, a continuación, hacer clic en Expandir MenuItem.

Vista de la mesa de trabajo de un control SimpleMenu después de agregar dos elementos y un separador

Cc295350.6f7455aa-d548-46a9-b93c-4b1eaefe455d(es-es,Expression.10).png

Desglosar la plantilla de control

La plantilla del control SimpleMenu está formada por los siguientes elementos:

  • Un panel de cuadrícula, que se usa para que el menú contenga varios elementos secundarios. El panel de cuadrícula también se usa porque facilita al diseñador de la interfaz de usuario (UI) de la aplicación la adición de otros elementos a la plantilla.

  • Un elemento Border, que se usa porque incluye una propiedad BorderThickness (grosor del borde) que se puede enlazar mediante una plantilla a la propiedad BorderThickness (grosor del borde) del control de menú al que se aplica la plantilla.

  • Un elemento StackPanel, que está incluido en el elemento Grid y se usa para disponer los elementos de menú. De forma predeterminada, la propiedad Orientation (orientación) de StackPanel está establecida en Horizontal.

La plantilla del control SimpleMenuItem está formada por los siguientes elementos:

  • Un panel de cuadrícula, que se usa para que el elemento de menú contenga varios elementos secundarios. También se usa un panel de cuadrícula porque facilita al diseñador la adición de otros elementos a la plantilla. Este panel utiliza el concepto de tamaño compartido, lo que permite que cada elemento de menú tenga el mismo ancho que todos los demás elementos del menú.

  • Un elemento ContentPresenter denominado Icon, que se enlaza a la propiedad Icon (icono) del elemento de menú al que se aplica esta plantilla.

  • Un panel de cuadrícula denominado GlyphPanel, que se usa para mostrar una marca de verificación en caso de que el elemento de menú pueda activarse. De forma predeterminada, el elemento Glyph está contraído, pero el desencadenador IsChecked hace que esté visible.

  • Un elemento ContentPresenter denominado HeaderHost, que se enlaza a la propiedad Header (encabezado) del elemento de menú al que se aplica esta plantilla. El enlace se establece en la propiedad ContentSource (origen de contenido) del elemento HeaderHost.

  • Un panel de cuadrícula denominado ArrowPanel, que se usa para proporcionar una forma de expandir el elemento de menú. De forma predeterminada, ArrowPanel está contraído, pero el desencadenador Role = SubmenuHeader hace que esté visible; este desencadenador identifica el elemento de menú como un encabezado de submenú (un elemento de menú de segundo nivel o de nivel inferior que tiene elementos de menú secundarios).

  • Un elemento Popup denominado SubMenuPopup, que se usa para contener cualquier elemento de menú secundario existente. Estos elementos se colocan en un elemento StackPanel marcado como el host de elementos, de forma que este elemento de menú sepa dónde colocar los elementos de menú secundarios. Si desea organizar de forma diferente los elementos de menú, use otro panel de diseño, como WrapPanel; para ello, haga clic con el botón secundario en el elemento StackPanel, en Objetos y escala de tiempo, elija Cambiar tipo de diseño y, a continuación, seleccione un panel.

    Vista de objetos: partes básicas (plantilla) de un control SimpleMenu (izquierda) y un control SimpleMenuItem (derecha)

    Cc295350.3c30a1c8-c055-441a-86ee-6038a02a6087(es-es,Expression.10).pngCc295350.2183480e-56b0-4241-a8da-4be1527de135(es-es,Expression.10).png

Cc295350.7e183f1f-37d8-4dcb-980c-19a5d61ca087(es-es,Expression.10).gifVolver al principio

Desencadenadores de propiedad usados

Los desencadenadores de propiedad de la plantilla de control sirven para hacer que el control reaccione ante los cambios de propiedad. Puede hacer clic en los elementos en Desencadenadores, en el panel Interacción, para ver las propiedades que cambian cuando se activa un desencadenador. Por ejemplo, en la plantilla del elemento de menú, si la propiedad IsChecked (está activado) es True, significa que el elemento de menú al que se aplica la plantilla puede activarse, por lo que el desencadenador hace que el elemento GlyphPanel esté visible.

Cc295350.7e183f1f-37d8-4dcb-980c-19a5d61ca087(es-es,Expression.10).gifVolver al principio

Pinceles usados

Las plantillas SimpleMenu y SimpleMenuItem utilizan los siguientes recursos de pincel del diccionario de recursos SimpleStyles.xaml:

  • La propiedad Background (fondo) del menú se establece mediante LightBrush y mediante DisabledBackgroundBrush cuando IsEnabled es False.

  • La propiedad BorderBrush (pincel del borde) del menú se establece mediante NormalBorderBrush y mediante DisabledBorderBrush cuando IsEnabled es False.

  • La propiedad Background (fondo) del elemento SubMenuBorder se establece mediante WindowBackgroundBrush.

  • La propiedad BorderBrush (pincel del borde) del elemento SubMenuBorder se establece mediante SolidBorderBrush.

Además, las plantillas usan enlaces a colores del sistema, lo que permite que los controles usen los valores predeterminados del sistema. En muchos casos, es posible que desee cambiar estos pinceles para poder crear un diseño único. Para ello, puede editar los desencadenadores que establecen los colores del sistema.

Cc295350.7e183f1f-37d8-4dcb-980c-19a5d61ca087(es-es,Expression.10).gifVolver al principio

Prácticas recomendadas e instrucciones de diseño

  • En general, debe usar un control Grid como raíz de la plantilla si espera que el diseñador agregue más elementos visuales al control. Expression Blend busca un panel de diseño como el control Grid y lo activa de forma predeterminada para que los elementos nuevos de la mesa de trabajo se agreguen como elementos secundarios del panel de diseño.

  • El control desplegable se representa sobre todos los demás controles. Normalmente, esto es deseable para un menú. El control desplegable en sí tiene una lógica que permite establecer el desplazamiento desde el control primario; por ejemplo, estableciendo la propiedad Placement (colocación) en "Right". En el caso de un menú, su expansión está controlada por un enlace al control primario. Para que el menú se expanda correctamente, es necesario mantener el enlace.

  • Este panel de cuadrícula raíz de la plantilla del elemento de menú usa el concepto de tamaño compartido, lo que permite que cada elemento de menú tenga el mismo ancho que todos los demás elementos del menú. Si desea cambiar este comportamiento, es necesario modificar la propiedad SharedSizeGroup (grupo de tamaño compartido) en la vista XAML, porque Expression Blend no la muestra en el panel Propiedades. En la mayoría de los casos, no es necesario modificar SharedSizeGroup, ya que permite ajustar el tamaño del menú adecuadamente. Como práctica recomendada, puede cambiar la apariencia del elemento de menú dibujando los elementos en el panel de cuadrícula raíz de la plantilla del elemento de menú, en lugar de reorganizar las columnas o su contenido.

  • Algunos de los desencadenadores de la plantilla del elemento de menú funcionan con una propiedad denominada Role (función). Role se establece dependiendo del nivel del elemento de menú en la jerarquía de menús. Si modifica la plantilla del elemento de menú, puede desear conservar los desencadenadores basados en Role. La plantilla usada por el control MenuItem del sistema real es considerablemente más compleja que SimpleMenuItem. La plantilla de control MenuItem usa un estilo para intercambiar entre distintas plantillas de control basadas en la función del elemento de menú. SimpleMenuItem usa una sola plantilla para lograrlo y, por tanto, es más fácil modificarlo.

  • Para modificar la plantilla SimpleMenuItem, haga clic en el botón Editar recurso situado junto al estilo SimpleMenuItem en el panel Recursos. A continuación, en el modo de edición del estilo, haga clic con el botón secundario en Style en Objetos y escala de tiempo, elija Editar partes del control (Plantilla) y, a continuación, haga clic en Editar plantilla o Editar una copia.

  • Para obtener información acerca de cómo enlazar un elemento de menú a un comando, vea el artículo sobre información general sobre menús en MSDN.

Cc295350.7e183f1f-37d8-4dcb-980c-19a5d61ca087(es-es,Expression.10).gifVolver al principio