Wpf - Incluir un Menú en un formulario

Descripción general

Este documento muestra paso a paso como se incluye un menu dentro de un formulario Wpf.

[TOC] Tabla de Contenidos

• Incluir un Menú en un formulario
  • Control DocPanel
  • Añadir una imagen al menú
  • Añadir un separador en un menú
  • Aplicar un estilo
  • Para añadir un evento
  • Añadir un Check en un menú
  • Menú de Ayuda.
    • Como mostrar una ventana sencilla Acerca De
  • El codigo completo axml de este ejemplo

---

↑↑↑

Incluir un Menú en un formulario

---

↑↑↑

Control DocPanel

Arrastrar un control [DocPanel] sobre cualquier punto del formulario (ojo fijarse que no se deja caer encima de algún control).

En la ventana propiedades modificar los siguientes campos

Listado 01

HorizontalAlignment="Stretch"  VerticalAlignment="Top" Width="Auto" Margin="0"

El control deberá situarse en la parte superior del formulario ocupando toda su anchura

No es necesario usar un control [DockPanel] pero facilita el mover el menú posteriormente si en necesario y merece la pena utilizarlo

Arrastrar un control [Menu] y dejarlo caer en el control [DockPanel]

En la ventana propiedades modificar los siguientes campos

Listado 02

HorizontalAlignment="Stretch"  VerticalAlignment="Top" 
Width="Auto" DockPanel.Dock="Top"
Y LastChildFill="False"

Listado 03

<Grid>

     <DockPanel  Name="dockPanelMenu" 
                 Height="31" Width="Auto"  
                 HorizontalAlignment="Stretch" 
                 VerticalAlignment="Top" 
                 DockPanel.Dock="Top" 
                 LastChildFill="False">

         <Menu Name="MenuGeneral"
               Height="23" Width="Auto"   
               DockPanel.Dock="Top">
                
         </Menu>
            
     </DockPanel>

 </Grid>

El control deberá aparecer como una barra gris que ocupa la parte superior del control [DockPanel]

A continuación, en la ventana propiedades, hacer clik en [Items] se abre la ventana del editor de colecciones y allí escribiremos nuestros menús.

Listado 04

<Menu Name="MenuGeneral"
          Height="23" Width="Auto"   
          DockPanel.Dock="Top">

        <MenuItem Header="_Archivo" Name=" MenuArchivo">
        </MenuItem>
        <MenuItem Header="_Editar" Name=" MenuEditar">
        </MenuItem>
        <MenuItem Header="_Herramientas" Name=" MenuHerramientas">
        </MenuItem>
        <MenuItem Header="_Ayuda" Name=" MenuAyuda">
        </MenuItem>
 </Menu>

• El atributo [Header] establece la etiqueta que mostrara el control. El carácter [Guion bajo (_)] sirve para mostrar debajo del carácter siguiente a donde se encuentra un subrayado y establece el atajo de teclado que se asigna a esta opción de menú.
• Los atajos de teclado, se muestran pulsado la tecla [Tab] y permite usar el teclado, (Pulsando la letra que aparece subrayada) para seleccionar la opción de menú.
• La etiqueta [Name] establece un nombre que identifica a ese elemento

Cada elemento del menú puede tener a su vez una colección de elementos de menú, de esta forma iremos escribiendo el árbol completo de nuestros menús

Ejemplo del menú edición

Listado 05

<MenuItem Header="_Editar" Name="MenuEditar">
     <MenuItem Header="_Cortar" Name="MenuEditarCortar"/>
     <MenuItem Header="C_opiar" Name="MenuEditarCopiar"/>
     <MenuItem Header="_Pegar"  Name="MenuEditarPegar"/>
 </MenuItem>

Observa que el atributo [name] que es el que identifica a este elemento está compuesto por el nombre del elemento padre seguido del nombre del hijo. Esta convención no está escrita por ningún sitio, pero evita problemas posteriores

---

↑↑↑

Añadir una imagen al menú

Para añadir una imagen al menú, lo primero que hay que hacer es incorporar al proyecto las imágenes, en este caso lo que he hecho ha sido crear una carpeta que he llamado [ImagenesMenu] y después importar las imágenes que quiero mostrar en el menú.

A continuación tenemos que escribir el código para incluir las imágenes en el menú y se hace de la siguiente forma

Listado 06

<MenuItem Header="_Editar" Name="MenuEditar">
      <MenuItem Header="_Cortar" Name="MenuEditarCortar">
          <MenuItem.Icon>
              <Image Source="ImagenesMenu/CutHS.png" />
          </MenuItem.Icon>
      </MenuItem>
      <MenuItem Header="C_opiar" Name="MenuEditarCopiar">
          <MenuItem.Icon>
              <Image Source="ImagenesMenu/CopyHS.png" />
          </MenuItem.Icon>
      </MenuItem>
      <MenuItem Header="_Pegar"  Name="MenuEditarPegar">
          <MenuItem.Icon>
              <Image Source="ImagenesMenu/PasteHS.png" />
          </MenuItem.Icon>
      </MenuItem>
</MenuItem>

---

↑↑↑

Añadir un separador en un menú

Para añadir un separador dentro del menú usaremos la etiqueta <Separator />,[Ver Separator] a continuación tienes un ejemplo con el menú Ayuda.

Listado 07

<MenuItem Header="_Ayuda" Name="MenuAyuda">
     <MenuItem Header="_Contenidos"            Name="MenuAyudaContenidos"/>
     <Separator />
     <MenuItem Header="Soporte _tecnico"       Name="MenuAyudaSoporteTecnico"/>
     <MenuItem Header="Informar de un _Error"  Name="MenuAyudaInforarError"/>
     <Separator />
     <MenuItem Header="Acerca _de..."          Name="MenuAyudaAcercaDe"/>
 </MenuItem>

---

↑↑↑

Aplicar un estilo

También podemos aplicar un estilo, definiendo y/o aplicando un estilo que ya exista

Primero se define el estilo

Listado 08

<Window.Resources>
    <Style x:Key="EstilosDelMenu" TargetType="Menu">
        <Setter Property="Background" Value="Coral" />
        <Setter Property="Foreground" Value="Navy" />
        <Setter Property="FontFamily" Value="Comic Sans MS" />
    </Style>
</Window.Resources>

Y a continuación se aplica el estilo al menú

<Menu Name="MenuGeneral"
        Height="23" Width="Auto"   
        DockPanel.Dock="Top"
        Style="{StaticResource EstilosDelMenu}">

Los estilos se pueden aplicar (o no) a los menús hijos, en este caso solo se aplican al menú padre

---

↑↑↑

Para añadir un evento

Escribiremos [Click=] y en el menú emergente que se abre haremos clic sobre y aceptaremos el nombre que nos propone el diseñador para la función "Escuchadora? Del evento

Listado 09

<MenuItem Header="_Archivo" Name="Archivo">
     <MenuItem Header="_Nuevo" 
               Name="MenuArchivoNuevo" 
               Click="MenuArchivoNuevo_Click"/>
     <Separator />
     <MenuItem Header="_Terminar" 
               Name="MenuArchivoTerminar" 
               Click="MenuArchivoTerminar_Click" />
 </MenuItem>

Observa que el nombre del evento se forma usando el texto que hemos escrito en el parámetro Name y se añade [_Click] ejemplo [MenuArchivoTerminar_Click]

En el código del formulario se escriben automáticamente el esqueleto de la función que escucha el evento

Listado 10

Private Sub MenuArchivoNuevo_Click(sender As System.Object, e As System.Windows.RoutedEventArgs)
    ' Falta escribir el codigo
End Sub

Private Sub MenuArchivoTerminar_Click(sender As System.Object, e As System.Windows.RoutedEventArgs)
    Me.Close()
End Sub

Ahora solo tenemos que escribir código para darle contenido a los eventos del menú

---

↑↑↑

Añadir un Check en un menú

Un menú puede tener la marcha Check a la izquierda del menú y se consigue con el atributo [IsChecked="True"]. Este atributo se puede modificar a través de código

Listado 11

<MenuItem Header="_Herramientas" Name="MenuHerramientas">
     <MenuItem Header="Siempre_Visible" 
               Name="MenuHerramientasSiempreVisible" 
               IsChecked="True" 
               Click="MenuHerramientasSiempreVisible_Click"/>
</MenuItem>

El código del controlador de eventos será más o menos así

Private Sub MenuHerramientasSiempreVisible_Click(
            sender As System.Object, e As System.Windows.RoutedEventArgs)

    ' Quitar o poner el Check del menú
    Me.MenuHerramientasSiempreVisible.IsChecked =
        Not (Me.MenuHerramientasSiempreVisible.IsChecked)

    ' Establecer la ventana como [siempre visible] en 
    ' función del valor [IsChecked] del menú
    Me.Topmost = Me.MenuHerramientasSiempreVisible.IsChecked
End Sub

---

↑↑↑

Menú de Ayuda.

---

↑↑↑

Como mostrar una ventana sencilla Acerca De

Listado 12

<Window x:Class="WindowAcercaDe"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Acerca De ... "  
        Height="156" Width="300" 
        ResizeMode="NoResize">

    <Grid>
        <Label Name="version" 
               Content="Version 1.0" 
               Height="28"  Width="75"
               Margin="100,16,0,0" 
               HorizontalAlignment="Left" 
               VerticalAlignment="Top" />

        <Label  Name="FechaCreacion" 
                Content="Fecha creación: Octubre 2012" 
                Height="28"  Width="194"
                Margin="45,41,0,0"
                HorizontalAlignment="Left"  
                VerticalAlignment="Top" />

        <Button  Name="ok" 
                 Content="OK" 
                 Height="23"  Width="78"
                 Margin="100,85,0,0"
                 HorizontalAlignment="Left" 
                 VerticalAlignment="Top" 
                 Click="ok_Click" />
    </Grid>

</Window>

El controlador del evento clic del botón

Listado 13

Private Sub ok_Click(sender As System.Object, 
                     e As System.Windows.RoutedEventArgs)
    Me.Close()
End Sub

El aspecto de la ventana de ayuda

La forma de usar esta ventana es estableciendo el evento en el menú [Acerca De …]

Listado 14

<MenuItem Header="Acerca _de..."         
          Name="MenuAyudaAcercaDe" 
          Click="MenuAyudaAcercaDe_Click"/>

y escribiendo el código siguiente en el controlador de eventos

Listado 15

Private Sub MenuAyudaAcercaDe_Click(
            ByVal sender As System.Object,
            ByVal e As System.Windows.RoutedEventArgs)
    Dim winAcercaDe As WindowAcercaDe = New WindowAcercaDe
    winAcercaDe.ShowDialog()
End Sub

---

↑↑↑

El codigo completo axml de este ejemplo

Listado 16

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="PruebasMenu" Height="200" Width="300">

    <Window.Resources>
        <Style x:Key="EstilosDelMenu" TargetType="Menu">
            <Setter Property="Background" Value="Coral" />
            <Setter Property="Foreground" Value="Navy" />
            <Setter Property="FontFamily" Value="Comic Sans MS" />
        </Style>
        <ContextMenu  x:Key="TextBoxContextMenu">

        </ContextMenu>
    </Window.Resources>


    <Grid>

        <DockPanel  Name="dockPanelMenu" 
                    Height="31" Width="Auto"  
                    HorizontalAlignment="Stretch" 
                    VerticalAlignment="Top" 
                    DockPanel.Dock="Top" 
                    LastChildFill="False">

            <Menu Name="MenuGeneral"
                  Height="23" Width="Auto"   
                  DockPanel.Dock="Top"
                  Style="{StaticResource EstilosDelMenu}">

                <MenuItem Header="_Archivo" Name="MenuArchivo">
                    <MenuItem Header="_Nuevo" Name="MenuArchivoNuevo" Click="MenuArchivoNuevo_Click"/>
                    <Separator />
                    <MenuItem Header="_Terminar" Name="MenuArchivoTerminar" Click="MenuArchivoTerminar_Click" />
                </MenuItem>

                <MenuItem Header="_Editar" Name="MenuEditar">
                    <MenuItem Header="_Cortar" Name="MenuEditarCortar">
                        <MenuItem.Icon>
                            <Image Source="ImagenesMenu/CutHS.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Header="C_opiar" Name="MenuEditarCopiar">
                        <MenuItem.Icon>
                            <Image Source="ImagenesMenu/CopyHS.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Header="_Pegar"  Name="MenuEditarPegar">
                        <MenuItem.Icon>
                            <Image Source="ImagenesMenu/PasteHS.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                </MenuItem>

                <MenuItem Header="_Herramientas" Name="MenuHerramientas">
                    <MenuItem Header="Siempre_Visible" 
                              Name="MenuHerramientasSiempreVisible" 
                              IsChecked="True" 
                              Click="MenuHerramientasSiempreVisible_Click"/>
                </MenuItem>


                <MenuItem Header="_Ayuda" Name="MenuAyuda">
                    <MenuItem Header="_Contenidos"            Name="MenuAyudaContenidos"/>
                    <Separator />
                    <MenuItem Header="Soporte _tecnico"       Name="MenuAyudaSoporteTecnico"/>
                    <MenuItem Header="Informar de un _Error"  Name="MenuAyudaInforarError"/>
                    <Separator />
                    <MenuItem Header="Acerca _de..."         
                              Name="MenuAyudaAcercaDe" 
                              Click="MenuAyudaAcercaDe_Click"/>
                </MenuItem>

            </Menu>

        </DockPanel>
    </Grid>
</Window>

---

↑↑↑

A.1.Referencias

Controls

System.Windows.Controls (Espacio de nombres)

• Información del documento:
  • Fecha.: [0000-00-00]
  • Resumen.: Proporciona clases para crear elementos, denominados controles, que permiten a un usuario interactuar con una aplicación.Las clases de control se encuentran en la base de la experiencia del usuario con cualquier aplicación porque permiten al usuario ver, seleccione, o escriba los datos u otra información.
• URL del enlace: http://msdn.microsoft.com/es-es/library/ms590941.aspx

DocPanel

DockPanel (Clase)

• Información del documento:
  • Fecha.: [0000-00-00]
  • Resumen.: Control Wpf. Define un área donde puede organizar horizontal o verticalmente los elementos secundarios, en relación unos con otros.
• URL del enlace: http://msdn.microsoft.com/es-es/library/system.windows.controls.dockpanel.aspx

Menu

Menu (Clase)

• Información del documento:
  • Fecha.: [0000-00-00]
  • Resumen.: Representa un control de menú de Windows que permite organizar jerárquicamente los elementos asociados a los comandos y controladores de eventos.
• URL del enlace: http://msdn.microsoft.com/es-es/library/system.windows.controls.menu.aspx

MenuItem

MenuItem (Clase)

• Información del documento:
  • Fecha.: [0000-00-00]
  • Resumen.: Representa un elemento seleccionables de Menu.
• URL del enlace: http://msdn.microsoft.com/es-es/library/system.windows.controls.menuitem.aspx

Separator

Separator (Clase)

• Información del documento:
  • Fecha.: [0000-00-00]
  • Resumen.: Control que se utiliza para separar elementos de controles de elementos.
• URL del enlace: http://msdn.microsoft.com/es-es/library/system.windows.controls.separator.aspx

---

↑↑↑

A.2.Enlaces

[Para saber mas]

Menus in WPF

Creando el Menu File de Notepad con WPF Menu

Wpf - Como incluir imágenes en un menú usando recursos incrustados

[Grupo de documentos]

[Documento Index]

[Documento Start]

[Imprimir el Documento]