Menús
Menú: Definición.
Los menús son importantes herramientas de trabajo en la mayoría de los programas basados en Windows, nos permiten mediante un botón, acceder, ejecutar acciones o abrir otras ventanas en un programa.
He aquí una imagen de la barra de menús de Word.
![5600 5600](/uploads/cursos/6674/27857_5600.png)
Es obvio que la vista será diferente según el Windows y Microsoft Office que usted tenga instalado en su computadora.
Los menús generalmente están ubicados en la barra de menús de manera horizontal y tienen algunas características comunes:
Menú: Características.
- Comienzan con una letra mayúscula y generalmente el nombre es corto.
- Archivo y Editar, son a menudo, los dos primeros menús y el último es la Ayuda.
- Tienen Shortcuts, que permiten abrir el menú mediante combinación de teclas.
- Tiene submenús que dan otras posibilidades dentro del mismo menú.
A continuación observe una imagen de los submenús que tiene el menú Archivo en Word.
![5601 5601](/uploads/cursos/6674/27860_5601.png)
Menú Strip
MenuStrip es el control del cuadro de herramientas que permite el diseño de menús en nuestros programas.
Está en la categoría de Menús y barras de herramientas del Cuadro de herramientas, como se observa en la siguiente imagen.
![5602 5602](/uploads/cursos/6674/27859_5602.png)
Cuando se agrega un MenuStrip al formulario, este se ubica en la bandeja de componentes en la parte inferior del IDE.
![5603 5603](/uploads/cursos/6674/27858_5603.png)
Pero también se abre una casilla en el formulario, que tiene el siguiente aspecto y que nos permitirá diseñar el menú de acuerdo a las necesidades.
![5604 5604](/uploads/cursos/6674/27861_5604.png)
Ejercicio:
Abra Visual Basic y cree un nuevo proyecto y asígnele el nombre Mi Menú y al formulario agréguele un control MenuStrip; Al hacerlo, tendrá aproximadamente la siguiente apariencia, en donde se observa el control en la bandeja de componentes y una casilla en el formulario para diseñar el menú.
![5605 5605](/uploads/cursos/6674/27862_5605.es.png)
Observe que hay una pestañita en la esquina superior derecha del formulario…
![5606 5606](/uploads/cursos/6674/27863_5606.png)
Que al darle clic mostrará una ventana con varias opciones…
![5607 5607](/uploads/cursos/6674/27865_5607.png)
De clic en Insertar elementos estándar y se insertará un menú en el formulario con los botones comunes en un menú y que usted puede modificar agregando o eliminando elementos.
![5608 5608](/uploads/cursos/6674/27864_5608.png)
Al dar clic en Archivo y Editar verá que hay submenús dentro de ellos.
Ahora le dejo la tarea que revise los submenús que contienen los menús Herramientas y Ayuda.
Diseñando menús:
Vamos a hacer un ejercicio en donde diseñaremos un menú siguiendo todos los pasos y a medida que avancemos iremos explicando lo que vamos haciendo.
Cree un nuevo Proyecto y asígnele el nombre Menú Diseño.
En el formulario, agregue desde la barra de herramientas un control MenuStrip, y un control Label.
A continuación puede ver, una captura de pantalla que incluye el formulario y la bandeja de componentes para que vea también el control MenuStrip en la bandeja de componentes en la parte inferior del IDE y abajo del formulario.
![5611 5611](/uploads/cursos/6674/27868_5611.es.png)
En la casilla que se despliega en la parte superior del formulario escriba Calendario y luego dé clic y se agregarán una casilla al lado y otra abajo…
![5612 5612](/uploads/cursos/6674/27869_5612.png)
En la casilla inferior escriba Fecha y observe que se agregan más casillas para seguir adicionando menús.
![5613 5613](/uploads/cursos/6674/27870_5613.png)
Continúe agregando hasta que quede así:
![5614 5614](/uploads/cursos/6674/27871_5614.png)
Si da clic derecho en el submenú fecha podrá acceder a un menú contextual, que le permitirá eliminar, cortar, copiar, ver el código y sus propiedades, etc.
![5615 5615](/uploads/cursos/6674/27872_5615.png)
Clic en propiedades…
![5616 5616](/uploads/cursos/6674/27873_5616.es.png)
24.5 ShortcutKeys para menús
Para acceder y ejecutar un menú, usando teclas claves o ShorcutKeys hágalo en la propiedad ShorcutKeys.
![5617 5617](/uploads/cursos/6674/27874_5617.png)
Dé clic en la pestañita…Aparece la siguiente ventana en donde debe ponerle check a una de las opciones que se muestran y que constituirá la primera parte del ShortcutKey o acceso por teclado y luego de clic en la pestañita…
![5618 5618](/uploads/cursos/6674/27875_5618.png)
Aparece una columna de números, letras y palabras…
![5619 5619](/uploads/cursos/6674/27876_5619.png)
Selecciones una de todas. Por ejemplo como el submenú al cual le queremos poner ShortcutKey es a Fecha entonces la combinación de teclas podría ser Ctrl+F
Seleccione F y ahora observe que la combinación se agregó al submenú Fecha. Lo que significa que se puede ejecutar el submenú fecha con las teclas Ctrl+F
![5620 5620](/uploads/cursos/6674/27877_5620.png)
![5621 5621](/uploads/cursos/6674/27879_5621.png)
Ejecutando un submenú con una letra.
Si en la propiedad Text de la ventana de propiedad de un menú o submenú colocamos el signo ampersand (&) antes de la palabra, entonces se subrayará la primera letra del submenú o menú; lo que permite que, con solo presionar en el teclado esa letra, se ejecutará el submenú o menú, según sea el caso.
En la propiedad Text del submenú fecha escriba al comienzo “&”, claro, sin las comillas para que le quede así.
![5622 5622](/uploads/cursos/6674/27878_5622.png)
Ahora deje la ventana propiedades y revise el menú y observe que F aparece subrayado y al estar así, permite que al tener abierta la aplicación y presiona la letra F se ejecutará la acción que está programada en ese submenú.
Otra alternativa es colocar la letra & cuando está escribiendo el nombre que llevará el menú o submenú, tiene el mismo efecto que si lo hace desde la ventana de propiedades.
Siga el mismo procedimiento para el submenú Salir y asígnele el ShortcutKey Ctrl+S
![5623 5623](/uploads/cursos/6674/27880_5623.png)
Ahora agregue dos controles Labels y póngales su propiedad Autosize en True para que el tamaño se adapte al contenido.
En la propiedad Text del Label1 escriba Fecha y en la del Label2 escriba Hora.
También modifique el formulario para que sea más largo que alto, como se ve en la siguiente imagen.
![5624 5624](/uploads/cursos/6674/27881_5624.png)
Programando Submenús:
Un menú o submenú sin código tiene poca utilidad por lo que hay que programarlo escribiendo el código correspondiente.
Dé clic en Fecha y coloque la oración Label1.text =DateString
Luego dé clic en Hora y escriba el código Label2.Text=TimeString
El editor de código quedará así:
![5625 5625](/uploads/cursos/6674/27882_5625.png)
Por último, abra el editor de código para el submenú Salir y coloque la palabra End
![5626 5626](/uploads/cursos/6674/27883_5626.png)
El editor de código queda finalmente como la siguiente imagen:
![5627 5627](/uploads/cursos/6674/27885_5627.png)
![5628 5628](/uploads/cursos/6674/27884_5628.png)
Ejecute el programa y vea el resultado…
![5629 5629](/uploads/cursos/6674/27886_5629.png)
![5630 5630](/uploads/cursos/6674/27887_5630.png)
Al dar clic en Fecha aparece la fecha y al dar clic en Hora se despliega la hora.
![5631 5631](/uploads/cursos/6674/27888_5631.png)
Cierre el formulario y vuelva a ejecutarlo y ahora presione la tecla F y mostrará la fecha ahora presione la tecla S para salir del formulario.
Agregue más menús y submenús al formulario, utilizando los mismos métodos que se explicaron para el menú Calendario.
Antes de dejar el tema de Submenús, debe saber que la barra de menús puede colocarse arriba, abajo, al centro, a la izquierda, o a la derecha del formulario; Utilizando la propiedad Dock del MenuStrit. (Recuerde que está en la bandeja de componentes y para ver sus propiedades debe dar clic en el control). En la ventana propiedades busque Dock, que al seleccionarlo abre una ventana con botones que permiten elegir la posición del menú. En este caso elegimos Top.
![5632 5632](/uploads/cursos/6674/27890_5632.png)
Si elegimos abajo, el menú se ubicará en la parte inferior del formulario.
![5634 5634](/uploads/cursos/6674/27889_5634.png)
Menús Contextuales:
Son menús o submenús, a los cuales se accede al hacer clic derecho en el mouse.
Para hacer un menú contextual se usa la herramienta ContextMenuStrip del cuadro de herramientas.
![5635 5635](/uploads/cursos/6674/27891_5635.png)
Cuando usted agrega el control, éste se ubica en la bandeja de componentes ubicada en la parte inferior del IDE y no se ve nada en el formulario, hasta que usted dá clic en el control.
En la imagen siguiente observe el control en la bandeja de componentes y el aspecto que tiene en el formulario una vez que da clic.
![5636 5636](/uploads/cursos/6674/27892_5636.es.png)
![5637 5637](/uploads/cursos/6674/27893_5637.es.png)
Ejercicio:
- Cree un nuevo proyecto con el nombre Menú Contextual y en el formulario agregue un ContextMenuStrip y un PictureBox
- En los campos que se muestran, escriba en el primer Ítem, la palabra Ver y en el segundo Ocultar.
- Dé clic en una parte libre del formulario, es decir, donde no haya algún control y cámbiele su propiedad ContextMenuStrip a TextBoxMenu.
![5639 5639](/uploads/cursos/6674/27894_5639.png)
- Agregue un Ítem Ver y otro Ocultar
![5640 5640](/uploads/cursos/6674/27895_5640.png)
- Agregue primero un control PictureBox al formulario e insértele una imagen de su preferencia y que tenga en su computadora. (ya se explicó cómo hacerlo y si no recuerda vuelva a leer las secciones correspondientes en este libro).
![5641 5641](/uploads/cursos/6674/27897_5641.es.png)
- Escriba el código PictureBox1.Show en el editor de código del Menú Ver
- Escriba el código PictureBox1.Hide en el editor de código de Menú Ocultar
El código quedará así:
![5642 5642](/uploads/cursos/6674/27896_5642.png)
- Presione F5 para ejecutar el programa.
![5643 5643](/uploads/cursos/6674/27898_5643.es.png)
Dé clic derecho en cualquier parte del formulario y verá el menú contextual en donde puede ocultar y hacer visible la imagen.
![5644 5644](/uploads/cursos/6674/27899_5644.es.png)
Dé clic en Ver y el resultado es que la imagen permanece o se hace visible.
![5645 5645](/uploads/cursos/6674/27901_5645.es.png)
Alterne dando clic en el menú contextual Ver y Ocultar y la imagen aparecerá y desaparecerá del formulario.
![5646 5646](/uploads/cursos/6674/27900_5646.es.png)
![5647 5647](/uploads/cursos/6674/27902_5647.es.png)
![5648 5648](/uploads/cursos/6674/27903_5648.es.png)
Guarde el proyecto y cierre el programa o continúe haciendo prácticas e innovaciones para practicar lo aprendido.