Ejemplo Visual Basic – Menú contextual


En este artículo se pretende mostrar un ejemplo de una característica presente en la mayoría de aplicaciones: el menú contextual. Principalmente esta dirigido a todo aquel que quiera iniciarse en el desarrollo de programas con el lenguaje Visual Basic. Para su realización se ha usado el entorno Microsoft Visual Basic 2010 Express, que puede obtenerse gratuitamente en el siguiente enlace.
Este ejemplo consiste en un formulario que posee un menú emergente. Este se muestra cuando se pulsa el botón derecho del ratón. El menú posee las opciones de mostrar o ocultar una imagen, la opción de cambiar el color de fondo del formulario, y la opción de salir de la aplicación.
En primer lugar creamos un nuevo proyecto escogiendo la plantilla Aplicación de Windows Forms con el nombre MenuContextual.


Por defecto, se asigna el nombre de archivo Form1.vb, así pues le asignaremos un nombre más descriptivo cómo MenuContext1.vb. Hay dos formas de hacerlo:

  • editando directamente el nombre en el Explorador de soluciones seleccionando el archivo y en el menú contextual la opción cambiar nombre
  • guardando el archivo en el menú Archivo y el submenú Guardar archivo como..

A continuación definimos algunas propiedades del formulario. En la propiedad Name le vamos a asignar el nombre FrmMenuContext, y como título a mostrar indicaremos en la propiedad Text la frase “Ejemplo Menú Contextual “. También vamos a indicar que no se pueda maximizar la ventana seleccionando el boleano False en la propiedad MaximizeBox, y que esta se muestre en el centro de la pantalla seleccionando la opción CenterScreen de la propiedad StartPosition. Además vamos a indicar que no se pueda modificar el tamaño de la aplicación con la propiedad FormBorderStyle y la opción FixedSingle.
En resumen, debemos modificar las siguientes propiedades del formulario:

Name = FrmMenuContext
Text = Ejemplo Menú Contextual
StartPosition = CenterScreen
MaximizeBox = False
FormBorderStyle = FixedSingle

El siguiente paso es añadir el menú contextual, para ello en el cuadro de herramientas seleccionamos el control ContextMenuStrip ubicado en el apartado Menús y barras de herramientas, y en la propiedad Name le asignamos el nombre FormContextMenuStrip.

Ahora debemos indicar que este menú emergente será el del formulario. Para ello en las propiedades del formulario, editamos la propiedad ContextMenuStrip y escogemos el FormContextMenuStrip que previamente hemos creado.

Nota: un menú contextual (componente ContextMenuStrip) debe estar asociado a un control que puede ser un formulario, botón, caja de texto… y se asocia con la propiedad ContextMenuStrip del control. El menú solo se muestra al situar el ratón sobre el control y pulsar el botón derecho.
A continuación vamos a crear las opciones del menú emergente, para ello seleccionamos el componente y aparecerá automáticamente un menú editable:


Creamos dos opciones Mostrar imagen y Ocultar imagen, y les asignamos los atajos de teclado Ctrl + M y Ctrl + O en sus respectivas propiedades ShortcutKeys. Además desactivamos la opción Ocultar imagen estableciendo a falso su propiedad Enabled.
Propiedades a modificar de Mostrar imagen:
Text = Mostrar imagen
ShortcutKeys = Ctrl+M
Propiedades a modificar de Ocultar imagen:
Text = Ocultar imagen
ShortcutKeys = Ctrl+O
Enabled = False

A continuación introducimos un separador en el menú, para ello pinchamos en la caja combinada con el texto ‘Escriba aquí’, que se utiliza para crear opciones del menú, y escogemos la opción Separator.

Cómo se puede observar, los menús pueden tener una opción normal (MenuItem), una caja combinada (ComboBox), un separador (Separator) o una caja de texto (TextBox).
Siguiendo con el menú de ejemplo, añadimos un nuevo item con el texto Color y le añadimos un submenú con una caja combinada. A esta caja le asignamos el nombre ColoresToolStripComboBox, y le indicamos que sólo muestre una lista despegable sin que se pueda editar, para ello establecemos la opción DropDownList de la propiedad DropDownStyle. También escogemos la opción Standard de la propiedad FlatStyle que determina el aspecto de la caja. Finalmente en la propiedad Items añadimos los elementos de la caja que serán los posibles colores del formulario.
Propiedades a modificar de la caja combinada:
Name = ColoresToolStripComboBox
DropDownStyle = DropDownList
FlatStyle = Standard
Items =
Amarillo
Azul
Rojo
Verde

Finalmente añadimos otro separador al menú y una última opción con el nombre Salir y el atajo de teclado Ctrl + S.
Propiedades a modificar de Salir:
Text = Salir
ShortcutKeys = Ctrl+S


Una vez completado el menú, vamos a añadir la imagen a mostrar o ocultar del formulario. Para ello en el cuadro de herramientas escogemos el componente PictureBox y lo arrastramos hasta el formulario.


Como nombre le asignamos PicBxImagen y indicamos que por defecto no se muestre escogiendo el valor False en la propiedad Visible. También indicamos que no se pueda modificar con la propiedad Locked y que el tamaño del control se adapte al de la imagen.
Propiedades a modificar del PictureBox:
Name = PicBxImagen
Visible = False
SizeMode = AutoSize
Locked = True
En la propiedad Image, escogeremos el archivo de imagen que mostrará el PictureBox. Se abrirá un cuadro de dialogo donde deberemos seleccionar la opción Recurso local y a continuación pulsar el botón Importar, donde escogeremos la imagen.

Finalmente añadiremos una etiqueta (componente Label) para informar del funcionamiento de la aplicación. Para ello modificaremos las siguientes propiedades del Label:
Name = LblInfo
Text = Pulsa el botón derecho del ratón para ver el menú contextual
Una vez finalizado el diseño del ejemplo, vamos a codificar los eventos del menú.
En primer lugar en el evento Click de la opción Mostrar imagen vamos a indicar que se muestre la imagen activando la propiedad Visible del PictureBox. También vamos a habilitar la opción de ocultar la imagen y a la vez deshabilitar la opción de mostrar la imagen, puesto que esta ya se estará mostrando.

Código del evento Click de la opción Mostrar imagen:

Private Sub MostrarImagenToolStripMenuItem_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MostrarImagenToolStripMenuItem.Click

Me.PicBxImagen.Visible = True
Me.OcultarImagenToolStripMenuItem.Enabled = True
Me.MostrarImagenToolStripMenuItem.Enabled = False
End Sub

En el evento Click de la opción Ocultar imagen vamos a indicar que no se muestre la imagen desactivando la propiedad Visible del PictureBox. También vamos a deshabilitar la opción de ocultar la imagen y habilitar la opción de mostrar la imagen.
Código del evento Click de la opción Ocultar imagen:

Private Sub OcultarImagenToolStripMenuItem_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles OcultarImagenToolStripMenuItem.Click
Me.PicBxImagen.Visible = False
Me.OcultarImagenToolStripMenuItem.Enabled = False
Me.MostrarImagenToolStripMenuItem.Enabled = True
End Sub

En el evento Click de la opción Salir simplemente indicaremos que se cierre la aplicación.

Código del evento Click de la opción Salir:

Private Sub SalirToolStripMenuItem_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles SalirToolStripMenuItem.Click
Me.Close()
End Sub
Tan solo nos quedará codificar el evento SelectedIndexChanged de la caja combinada ColoresToolStripComboBox. Según el elemento que se seleccione en la caja, se asignará un nuevo color de fondo para el formulario.
Código del evento SelectedIndexChanged de la caja combinada de la opción Colores:
Private Sub ColoresToolStripComboBox_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles ColoresToolStripComboBox.SelectedIndexChanged
Select Case ColoresToolStripComboBox.SelectedItem
Case "Amarillo"
Me.BackColor = Color.Yellow
Case "Azul"
Me.BackColor = Color.Blue
Case "Rojo"
Me.BackColor = Color.Red
Case "Verde"
Me.BackColor = Color.Green
End Select
Me.ContextMenuStrip.Close()
End Sub
End Class

Tan solo quedará ejecutar el ejemplo para comprobar que funciona correctamente.

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: