Control ListBox

Control ListBox

Es un control que sirve para ingresar información y en el cuadro de herramientas se reconoce por el siguiente ícono

Introducir Ítems en un ListBox

Agregue un control ListBox al formulario.

Par introducir los Ítems puede hacerse de la siguiente manera:

• Desde código.
• Desde  la ventana de propiedades.
• Directamente en el control.

Dé clic derecho en el control y verá el siguiente menú

Dé clic en Editar elementos y se desplegará la siguiente ventana de edición en la cual ya se escribieron algunos Ítems.

Para agregar los Ítems basta con escribir cada uno y luego presionar la tecla Enter y después clic en Aceptar…La ventana quedará así:                                

Ahora presione F5 para ejecutar el programa y ver como queda la aplicación.

Mostrar Ítems de un ListBox en un TextBox

Para mostrar en un TextBox, un Item seleccionado en un ListBox  se usa la instrucción ListBox.selectedItem

Ejercicio: Ítem de ListBox  a TextBox

• Crear un nuevo proyecto con el nombre ListBoxItem  a TextBox
• Agregue un control ListBox y un TextBox
• Dé clic derecho en el control ListBox y luego en Editar elementos para que agregue los ítems con las palabras que se ven en la siguiente imagen.

• Dé doble clic en el control ListBox para que se abra el editor de código y escriba la siguiente instrucción entre Private Sub y End Sub  del procedimiento.

Dim Product As String

Product = ListBox1.SelectedItem

TextBox1.Text = ListBox1.SelectedItem

En la primera línea del código anterior, se está declarando una variable Product del tipo String lo que significa que solo almacenará texto.

Luego en la segunda línea, seasigna un valor a la variable, que será igual al Ítem seleccionado en el ListBox.

Por último enla tercera línea se utiliza la variable en el TextBox al instruir que el texto que se muestre en el TextBox sea igual al Ítem seleccionado en el ListBox.

El código queda así:

• Ejecute la aplicación y luego seleccione un Ítem ya sea dando clic, o con las teclas cursoras y observe como el Ítem seleccionado aparece en el TextBox.

• Cierre la aplicación.

Mostrar Imagen de un Ítem seleccionado en un ListBox

Se puede hacer que se muestre un archivo de imagen en un PictureBox, seleccionando un Ítem en un ListBox usando el código ListBox.SelectedItem

Ejercicio:

Crear un nuevo proyecto con el nombre IDENTIDAD DE EL PROGRESO

Agregar al formulario, un PictureBox, un ListBox y un Label

• Cambie la propiedad Text del Label a Fotos De El Progreso, la propiedad BackColor a Verde y aumente el tamaño de las letras, modificando la propiedad Font
• Cambie la propiedad Text del Formulario, a Album De Fotos.
• En la pestaña de  la esquina superior derecha del PictureBox elija en Aumentar tamaño, la opción StretchImage  para que al mostrar la imagen se vea completa.
• En esta etapa la interfaz debe estar así:

• Agregar Recursos al proyecto:

Ponga mucha atención a estas explicaciones por que serán de mucha utilidad en sus tareas de programación; Agregar recursos significa, incluir dentro de nuestro proyecto los archivos que se necesitan. Por ejemplo si en el PictureBox vamos a incluir imágenes, podemos agregarlas al proyecto; Evitando, al momento de ocuparlas, ir a buscarlas por rutas más “lejanas” o más difíciles de encontrar. Es decir, ¡Las tenemos cerca!

• Para agregar las imágenes que se mostrarán en el PictureBox, y que queden como recursos del proyecto, abra la ventana de propiedades del proyecto desde el submenú Propiedades del proyecto del Menú Proyectos.

• Se mostrará la siguiente ventana donde debe seleccionar Recursos en la columna de la Izquierda.

• En el Menú Agregar recurso elija el Submenú Agregar archivo existente.

• En la ventana que se muestra busque un archivo de imagen de su computadora. (Obviamente no serán igual a las que yo agregué)

Si las imágenes las tiene en una sola carpeta puede seleccionarlas todas y dar clic en Abrir para agregarlas de una sola vez, pero si están en rutas de archivo diferentes entonces agregue una cada vez.

Al agregar las imágenes se mostrarán los recursos parecidos a la siguiente imagen:

• Regrese al formulario de diseño, dando clic en el menú Form1.vb (diseño) que se encuentra en la parte superior de la ventana donde agregó las imágenes.
• Agregar los Ítems al Listbox

Los Ítems son los elementos que se mostrarán en el ListBox y que permitirá seleccionarlos y mostrar la imagen. Para agregarlos se pueden usar tres métodos:

• Método 1

Clic derecho en el ListBox y luego clic en Editar elementos.

Se abre la siguiente ventana donde escribirá un Ítem y luego presione la tecla Enter y escriba el siguiente Ítem y así sucesivamente.

Clic en Aceptar y los ítems se mostrarán en el ListBox

Amplíe el control para que se vean los Ítems completos, pero déjelo de tal manera que solo se vean 4 Ítems. Si es necesario modifique el tamaño del formulario o del PictureBox

Modifique la propiedad Font del ListBox para visualizar  mejor los Ítems.

• Método 2

El segundo método para agregar Ítems es accediendo a la propiedad Ítems del ListBox

Solo da clic en los puntos suspensivos de la derecha y lo llevará  a la misma ventana del método 1 para editar Ítems. Luego los escribe y da clic en Aceptar.

Método 3

Los Ítems se pueden insertar en el ListBox usando código.

La sintaxis es la siguiente:

ListBox.Items.Add (“Nombre del Item”)

Por ejemplo, con la siguiente instrucción se agregará el elemento “Ítem por código” en el listbox actual.

   ListBox1.Items.Add("Item por Código")

Para escribirlo, abra el editor de código y en el evento Load del formulario escriba la instrucción anterior, esto es importante, El código debe ir en el form Load, no en el ListBox 

El editor de código deberá verse así:

Si coloca el código en el ListBox, el efecto no será el esperado.

Otra cosa importante es que el Ítem creado por código solo se ve en tiempo de ejecución cuando se carga el formulario.

Ahora inserte el código para que al seleccionar un Ítem en el ListBox se muestre la imagen en el PictureBox.

Observe que primero se crea la variable con el nombre “I” y se deja como tipo Object o String.

El valor que tendrá la variable será igual al Ítem seleccionado.

A continuación se hace uso de la estructura de decisión If…Then para que de acuerdo al ítem seleccionado se muestre la imagen correspondiente que ya tenemos en los recursos del proyecto.

Una vez que escribe My.Resources Se muestran los nombres  de las  imágenes que tiene entre los recursos del proyecto, para facilitarle la elección.

El código anterior debe ir entre Private Sub y End Sub del ListBox

El Editor de código en este proyecto, tendrá la siguiente apariencia:

Ejecute la aplicación y verá como aparecen todos los Ítems agregados, incluyendo el creado por código.

Puede utilizar la barra de desplazamiento del ListBox o las teclas cursoras para recorrer los Ítems.

Agregue el siguiente código para que se vea la siguiente imagen que ya tiene en recursos del proyecto, con el nombre de Edificio3, Pero recuerde, que debe agregar también el Ítem con el nombre de Municipalidad De El Progreso

        If ListBox1.SelectedItem = "Municipalidad De El Progreso" Then

            PictureBox1.Image = My.Resources.Edificio3

        End If

Guarde el proyecto y ciérralo.