Sección de tutoriales y manuales vb

Control ImageList - Lista de imágenes

Guía con ejemplos que describe el uso del control ImageList de visual basic

Contenido :

Introducción
Página de propiedades para configurar el control
Recorrer en tiempo de ejecución la lista de imágenes del ImageList
Método Add
Método Remove
Método Clear
Otras propiedades y métodos

1 - Introducción

El control ImageList " traducido al español " significa lista de imágenes y la función principal es la de almacenar gráficos para poder enlazarlos y autoabastecer a otros controles de dichas imágenes, como por ejemplo las barras de herramientas o ToolBar, el control ListView , el control ImageCombo, TreeView y algunos otros

También es posible usarlo para almacenar solo imágenes pero que no estén enlazadas a otros controles, y poder luego recuperarlas mediante la propiedad Picture, por ejemplo para usarlo con un contol Picture, Image form etc..

Para agregar el control ImageList se debe hacer desde el Menú Componentes en la opción Microsoft Windows Common Controls 6

Ventana de componentes

vista de la ventana de componentes para añadir el imagelist al proyecto

Cuando lo agregamos a un formulario, este control solo permanecerá visible en tiempo de diseño, ya que su única función como se dijo es la de agrupar y contener imágenes para poder utilizarla por separado o para abastecer a otros controles de las mismas, por lo que no requiere que sea visible en tiempo de ejecución

2 - Página de propiedades

Para poder configurar el ImageList, se puede acceder desde la ventana de propiedades de Visual Basic en la opción Personalizado o bien haciendo Click derecho sobre el control y elegir del menú desplegable la opción Propiedades, al hacer esto se abre una ventana como la siguiente:

Vista previa de la página de propiedades del control ImageList

En la solapa general podemos establecer el tamaño que presentarán las imágenes que cargaremos. Estas medidas son de 16 x 16, 32 x 32, 48 x 48, y otra llamada custom donde podemos Especificar el tamaño personalizado en pixeles que tendrán las mismas.

En la solapa imágenes mediante el botón insertar imagen, podemos ir cargando los gráficos al control y mediante el botón borrar imagen podemos eliminar el que se encuentra seleccionado.

Nota: No se puede añadir o eliminar un gráfico si el control ImageList se encuentra enlazado a otro control

vista de la página de propiedades del imageList para agregar y remover gráficos

El campo index y el campo key son propiedades de cada imagen y mediante las mismas podremos luego referenciar e identificar cada una de ellas para trabajar en el código y para poder enlazarlas con otros controles.

Importante: Cuando agregamos imágenes a un control ImageList y luego queremos por ejemplo cambiar la propiedad de tamaño de las imágenes, Visual Basic mostrará un error como este:

mensaje de error

Es decir que al contener imágenes las propiedades de tamaño de las mismas son de solo lectura, por lo tanto esta propiedad la debemos especificar antes de colocar la lista de imágenes.

3 - Recorrer en tiempo de ejecución la lista de imágenes del ImageList :

Objeto ListIImages y Colección Item

Si quisiéramos recorrer la lista de imágenes mediante un bucle For-Next por ejemplo, podemos usar la colección Item del objeto ListImages. La única diferencia en recorrer los elementos o imagenes como se haría por ejemplo en un control ComboBox o ListBox, es que el primer elemento de la lista no es el 0 si no el 1. Para saber el último elemento se utiliza la propiedad Count del objeto ListImages - 1.

El siguiente ejemplo recorre toda la lista de imágenes y muestra un mensaje con la propiedad Key de cada imagen cargada en el control, si es que tiene propiedad Key establecida, si no, muestra un mensaje vacío, mejor dicho una cadena vacía.

For i = 1 To ImageList1.ListImages.Count - 1

MsgBox ImageList1.ListImages(i).Key

Next

El objeto ListImages posee varios otros métodos y propiedades que se despliegan en la lista como se ve acá:

lista de propiedades y métodos del control ImageList

4 - Método Add

Este método se utiliza para agregar imágenes en tiempo de ejecución. Esta imagen puede ser una gráfico cargado por ejemplo en un control Picture, un control Image o una variable por ejemplo de tipo IpictureDisp, de tipo Picture o StdPicture

Un ejemplo de esto último:

Cargar en un control Picture1 un gráfico. Luego vamos a agregar el gráfico del Picture1 en el ImageList, y por último mostraremos esa imagen cargada en un control Image1. Esto no tiene ningún sentido, pero es para que te des una idea de como podés utilizar este método.

ImageList1.ListImages.Add , "UnNombre", Picture1.Picture

Image1 = ImageList1.ListImages("UnNombre").Picture

El primer parámetro es Index, que en el ejemplo no se colocó ya que es opcional.

El segundo parámetro es Key, es decir la clave para poder referenciar luego a dicha imagen, también es opcional.

El último parámetro es Picture, y debe ser una imagen válida como se comentó antes, y lo que se le está indicando es que almacene y agregue al ImageList la imagen cargada en el Picture1.

La segunda línea de código lo que hace es cargar en el control Image1 la imagen anterior que acabamos de agregar. Para indicarle que imagen queremos cargar, le pasamos al objeto ListImages la clave anterior como parámetro (también podríamos pasarle el Index de la imagen) y luego le indicamos la propiedad Picture.

Pero ¿ Como se puede cargar en un ImageList, el gráfico dibujado con los métodos gráficos, por ejemplo en un PictureBox?

Si quisieramos guardar una imagen dibujada en un control Picture, por ejemplo de esta manera:

With Picture1
     
     Picture1.Print "Hola Mundo"
     
     ImageList1.ListImages.Add , , .Picture

End With

Lo anterior, primero escribe en el Picture1 una frase, y luego intenta guardar la imagen en el ImageList, pero esto no guardaría la imagen, ya que en este caso cuando se utilizan los métodos gráficos en un control, la imagen es parte de la propiedad Image, no de la propiedad Picture. Entonces ¿ por que no pasamos la propiedad Image en ves de la propiedad Picture? .. Por que no se puede, ya que el valor del tercer parámetro del imagelist debe ser un objeto Picture, no un Objeto image.

Para solucionar esto, lo que se suele hacer es asignar a la propiedad Picture del control PictureBox, la propiedad Image, y luego de esto agegarla al ImageList.

Picture1.Picture = Picture1.Image

Ahora si se puede guardar el gráfico

Ejemplo:

Colocar un Timer1, un Picture1, un Command1 y un ImageList1

Dim I As Integer

Private Sub Command1_Click()
I = 1
Timer1.Interval = 100
End Sub

Private Sub Form_Load()

With Picture1
     
     .AutoRedraw = True
     .FontName = "Times New Roman"
     .FontSize = 20
     
     .ForeColor = vbRed
     Picture1.Print "Hola Mundo"
     
     .Picture = .Image
     
     ImageList1.ListImages.Add , , .Picture
     
     .Cls
     .ForeColor = vbBlue
     Picture1.Print "Hola Mundo"
     
     .Picture = .Image
     
     ImageList1.ListImages.Add , , .Picture
     
     .Cls
     .Picture = Nothing
     
         
End With



End Sub

Private Sub Timer1_Timer()

Me.Picture = ImageList1.ListImages(I).Picture

If I = 2 Then
   I = 1
Else
   I = I + 1
End If

End Sub

Al presionar el Command1, se mostrarán mediante un Timer, los dos gráficos cargados en el ImageList, en la propiedad Picture del formulario.

Cambiando de tema, también podríamos cargar y agregar una imagen utilizando el método LoadPicture leyendola del disco, por ejemplo de esta manera:

ImageList1.ListImages.Add , "UnNombre", LoadPicture(App.Path & "\icono.ico")

Al agregar una imagen dinámicamente, esta se agrega al final de la lista de imágenes, es decir por ejemplo si el imageList contiene 5 imágenes y agregamos una mas con el método Add, el valor de la propiedad Index de esta última imagen sería 6. Esto siempre y cuando no especifiquemos un valor en la propiedad Index, ya que al indicar el valor en dicha propiedad, se sobreescribe la imagen que esté en esa posición, lo mismo ocurre con la propiedad Key

5 - Método Remove

Para eliminar una imagen cargada en el ImageList se utiliza el método Remove, donde le podemos pasar la clave o la propiedad Index al objeto ListImages, por ejemplo:

'Le pasamos a Remove la Clave
ImageList1.ListImages.Remove ("UnNombre")

'Le pasamos a Remove el número de indice, o sea el Index
ImageList1.ListImages.Remove (7)

Nota: Antes de eliminar una imagen debemos serciorarnos que el Index o la clave sean válidos y existan, ya que si no nos daría error en tiempo de ejecución

6 - Método Clear

Para eliminar toda la lista de imágenes podemos usar el método Clear, este no requiere ningún parámetro, solo basta con ejecutarlo, por ejemplo:

ImageList1.ListImages.Clear

7 - Otras propiedades y métodos

ImageHeight : Devuelve o establece el alto de un objeto ListImage.
ImageWidth: Devuelve o establece el ancho de los objetos ListImage de un control ImageList.
Index: Devuelve o establece el número que identifica un control en una matriz de controles.
MaskColor: Devuelve o establece un valor que indica al color que será transparente en las operaciones gráficas de ImageList.
Overlay: Crea una tercera imagen compuesta de dos objetos ListImage y devuelve una referencia al nuevo objeto
Parent: Devuelve el objeto en el que se encuentra este objeto.
Tag: Guarda datos adicionales necesarios para su programa.
UseMaskColor: Devuelve o establece un valor que determina si el control ImageList utilizará la propiedad MaskColor.

Nota si querés ver mas ejemplos de este control, podés ver los ejemplos del ListView, ToolBar, ImageCombo y algunos otros, para mostrar gráficos en forma enlazadada con el control ImageList

Volver al índice

Buscar en Recursos vb