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
![4500 4500](/uploads/cursos/6674/27672_4500.png)
![4501 4501](/uploads/cursos/6674/27673_4501.png)
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ú
![4502 4502](/uploads/cursos/6674/27674_4502.es.png)
Dé clic en Editar elementos y se desplegará la siguiente ventana de edición en la cual ya se escribieron algunos Ítems.
![4503 4503](/uploads/cursos/6674/27676_4503.es.png)
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í:
![4504 4504](/uploads/cursos/6674/27675_4504.png)
![4506 4506](/uploads/cursos/6674/27677_4506.png)
Ahora presione F5 para ejecutar el programa y ver como queda la aplicación.
![4507 4507](/uploads/cursos/6674/27679_4507.es.png)
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.
![4508 4508](/uploads/cursos/6674/27678_4508.png)
- 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í:
![4509 4509](/uploads/cursos/6674/27680_4509.png)
- 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.
![4510 4510](/uploads/cursos/6674/27681_4510.png)
- 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í:
![4511 4511](/uploads/cursos/6674/27682_4511.es.png)
- 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.
![4512 4512](/uploads/cursos/6674/27683_4512.es.png)
- Se mostrará la siguiente ventana donde debe seleccionar Recursos en la columna de la Izquierda.
![4513 4513](/uploads/cursos/6674/27684_4513.es.png)
- En el Menú Agregar recurso elija el Submenú Agregar archivo existente.
![4514 4514](/uploads/cursos/6674/27685_4514.png)
- 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:
![4516 4516](/uploads/cursos/6674/27687_4516.png)
- 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.
![4517 4517](/uploads/cursos/6674/27686_4517.es.png)
Se abre la siguiente ventana donde escribirá un Ítem y luego presione la tecla Enter y escriba el siguiente Ítem y así sucesivamente.
![4518 4518](/uploads/cursos/6674/27690_4518.es.png)
Clic en Aceptar y los ítems se mostrarán en el ListBox
![4519 4519](/uploads/cursos/6674/27688_4519.es.png)
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.
![4520 4520](/uploads/cursos/6674/27691_4520.es.png)
- Método 2
El segundo método para agregar Ítems es accediendo a la propiedad Ítems del ListBox
![4521 4521](/uploads/cursos/6674/27692_4521.png)
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í:
![4522 4522](/uploads/cursos/6674/27693_4522.png)
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.
![4523 4523](/uploads/cursos/6674/27694_4523.es.png)
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:
![4524 4524](/uploads/cursos/6674/27695_4524.es.png)
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.
![4526 4526](/uploads/cursos/6674/27696_4526.es.png)
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
![4527 4527](/uploads/cursos/6674/27697_4527.es.png)
![4528 4528](/uploads/cursos/6674/27698_4528.es.png)
![4529 4529](/uploads/cursos/6674/27699_4529.es.png)
![4530 4530](/uploads/cursos/6674/27701_4530.es.png)
![4531 4531](/uploads/cursos/6674/27702_4531.es.png)
Guarde el proyecto y ciérralo.