The WPF Menu control

Una de las partes mas comunes de una aplicación de Windows es el menú, algunas veces referido como el menú principal porque usualmente solo existe uno en la aplicación. El menú es práctico porque ofrece muchas opciones, usando muy poco espacio, incluso aunque Windows esta fomentando el uso de la cinta de opciones (ribbon) como reemplazo para los bueno y viejos menúes y barras de herramientas, definitivamente aun tienen su lugar en cada caja de herramientas de un buen desarrollador.

WPF viene con un control preciso para crear menus llamado... Menu. Agregar items es muy simple - simplemente agregas los elementos del MenuItem a el, y cada MenuItem puede tener una gama de Sub-Items, permitiendote crear menus jerárquicos como los conoces desde muchas aplicaciones de Windows. ¡Vamos directo al grano! Aquí va un ejemplo donde usamos el Menu:

<Window x:Class="WpfTutorialSamples.Common_interface_controls.MenuSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MenuSample" Height="200" Width="200">
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_File">
                <MenuItem Header="_New" />
                <MenuItem Header="_Open" />
                <MenuItem Header="_Save" />
                <Separator />
                <MenuItem Header="_Exit" />
            </MenuItem>
        </Menu>
        <TextBox AcceptsReturn="True" />
    </DockPanel>
</Window>

Como en muchas Aplicaciones de Winodws, mi menu esta ubicado en parte superior de la ventana, pero deacuerdo con la enorme flexibilidad de WPF, puedes colocar un Menu donde lo desees, y con la altura o anchura que desees.

He definido un unico item de Nivel Superior, con 4 elementos secundarios y un separador. Uso la propiedad de Encabezado para definir la etiqueta del elemento, y deberias notar el guion bajo antes de cada primer letra de cada etiqueta. Le dice a WPF que use ese caracter como la tecla de acelerador, lo que significa que el usuario puede presionar la tecla ALT seguido de un caracter dado, para activar el elemento del Menu. Esto funciona desde el Item de Nivel superior, hasta lo mas bajo de la jerarquia, viendo esto, en el siguiente ejemplo yo podria persionar Alt, y luego F y luego N, para activar el item Nuevo.

Iconos y cajas de verificacion

Dos características comunes de un Menu es el icono, usado para identificar mas facilmente el Menu y lo que hace, y la habilidad de tener elementos de Menu seleccionables, que puede activar y desactivar una característica especifica. El MenuItem de WPF soporta ambos, y es muy facil de usar:

<Window x:Class="WpfTutorialSamples.Common_interface_controls.MenuIconCheckableSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MenuIconCheckableSample" Height="150" Width="300">
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_File">
                <MenuItem Header="_Exit" />
            </MenuItem>
            <MenuItem Header="_Tools">
                <MenuItem Header="_Manage users">
                    <MenuItem.Icon>
                        <Image Source="/WpfTutorialSamples;component/Images/user.png" />
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="_Show groups" IsCheckable="True" IsChecked="True" />
            </MenuItem>
        </Menu>
        <TextBox AcceptsReturn="True" />
    </DockPanel>
</Window>

Para este ejemplo, he creado un elemento secundario de nivel superior, donde he agregado dos elementos: uno con un icono definido, usando la propiedad Icono      con un control de imagen estándar dentro de él, y uno donde usamos la propiedad IsCheckable para permitir que el usuario verifique y desmarque el elemento.      Incluso utilicé la propiedad IsChecked para que se revisara de forma predeterminada. Desde Code-behind, esta es la misma propiedad que puedes leer para saber      si un elemento de menú dado está marcado o no.

Manejo de Clicks

Cuando el usuario hace clic en un elemento de menú, generalmente querrá que pase algo. La forma más fácil es simplemente agregar un controlador de evento click al MenuItem,      Como esto:

<MenuItem Header="_New" Click="mnuNew_Click" />

En Code-behind necesitarás implementar el método mnuNew_Click, así:

private void mnuNew_Click(object sender, RoutedEventArgs e)
{
	MessageBox.Show("New");
}

Esto será suficiente para las aplicaciones más simples, o al prototipar algo, pero la forma de WPF es usar un comando para esto.

Atajos de teclado y comandos

Puede manejar fácilmente el evento Click de un elemento de menú como lo hicimos anteriormente, pero el enfoque más común es usar comandos WPF. Hay mucha teoría sobre usar y crear comandos, así que tienen su propia categoría de artículos aquí en el sitio, pero por ahora, puedo decirles que tienen un par de ventajas cuando se usa en WPF, especialmente en combinación con un menú o una barra de herramientas.

En primer lugar, aseguran que puede tener la misma acción en una barra de herramientas, un menú e incluso un menú contextual, sin tener que implementar el mismo código en      lugares múltiples También hacen que el manejo de los atajos de teclado sea mucho más fácil, porque a diferencia de WinForms, WPF no está escuchando el teclado por accesos directos de forma automática si los asigna por Ej. un elemento del menú - tendrá que hacer eso manualmente.

Sin embargo, al usar comandos, WPF es todo oídos y responderá a los atajos de teclado automáticamente. El texto (encabezado) del elemento del menú también se establece      de forma automática (aunque puede sobrescribirlo si es necesario), y también lo es InputGestureText, que muestra al usuario qué atajo de teclado se puede usar para invocar      el elemento de menú específico. Vayamos directamente a un ejemplo de combinación del Menú con los comandos de WPF:

<Window x:Class="WpfTutorialSamples.Common_interface_controls.MenuWithCommandsSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MenuWithCommandsSample" Height="200" Width="300">
    <Window.CommandBindings>
        <CommandBinding Command="New" CanExecute="NewCommand_CanExecute" Executed="NewCommand_Executed" />
    </Window.CommandBindings>
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_File">
                <MenuItem Command="New" />
                <Separator />
                <MenuItem Header="_Exit" />
            </MenuItem>
            <MenuItem Header="_Edit">
                <MenuItem Command="Cut" />
                <MenuItem Command="Copy" />
                <MenuItem Command="Paste" />
            </MenuItem>
        </Menu>

        <TextBox AcceptsReturn="True" Name="txtEditor" />
    </DockPanel>
</Window>

using System;
using System.Windows;
using System.Windows.Input;

namespace WpfTutorialSamples.Common_interface_controls
{
	public partial class MenuWithCommandsSample : Window
	{
		public MenuWithCommandsSample()
		{
			InitializeComponent();
		}

		private void NewCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e)
		{
			e.CanExecute = true;
		}

		private void NewCommand_Executed(object sender, ExecutedRoutedEventArgs e)
		{
			txtEditor.Text = "";
		}
	}
}

Puede que no sea completamente obvio, pero al usar comandos, obtenemos un montón de cosas gratis: atajos de teclado, texto y InputGestureText en los artículos y WPF automáticamente habilita / deshabilita los elementos dependiendo del control activo y su estado. En este caso, Cortar y Copiar están deshabilitados porque no hay texto seleccionado, pero Pegar está habilitado, ¡porque mi portapapeles no está vacío!

Y porque WPF sabe cómo manejar ciertos comandos en combinación con ciertos controles, en este caso los comandos Cortar / Copiar / Pegar en combinación con un control de entrada de texto, ni siquiera tenemos que manejar sus eventos de ejecución, ¡funcionan de inmediato! Sin embargo, tenemos que manejarlo para el comando Nuevo , ya que WPF no tiene forma de adivinar qué queremos que haga cuando el usuario lo active. Esto se hace con las CommandBindings de la ventana, todas explicadas en detalle en el capítulo sobre comandos.

Resumen

Trabajar con el control de menú WPF es fácil y rápido, por lo que es sencillo crear jerarquías de menú incluso complejas, y al combinarlo con comandos WPF,      obtienes tanta funcionalidad gratis.