16/05/13

Uso del control ImageList

Free Web Site - Free Web Space and Site Hosting - Web Hosting - Internet Store and Ecommerce Solution Provider - High Speed Internet

Search the Web

Indice Tutoriales

Uso del control ImageList

Un control ImageList contiene una coleccin de imgenes que pueden utilizar otros controles comunes de Windows, especficamente los controles ListView, TreeView, TabStrip y Toolbar. Por ejemplo, el control ImageList puede almacenar todas las imgenes que aparecen en los botones de un control Toolbar. Tambin puede utilizar el control ImageList con controles que asignen un objeto Picture a una propiedad Picture, como los controles PictureBox, Image y CommandButton. El uso del control ImageList como almacn nico de imgenes le ahorrar tiempo de desarrollo, pues le permite escribir cdigo que se refiera a un catlogo de imgenes nico y coherente. En lugar de escribir cdigo que cargue mapas de bits o iconos (con la funcin LoadPicture), puede poblar el control ImageList una nica vez, asignar valores a la propiedad Key si lo desea y escribir cdigo que utilice las propiedades Key o Index para hacer referencia a las imgenes. El control utiliza archivos de mapa de bits (.bmp) o de icono (.ico) de una coleccin de objetos ListImage. Puede agregar o quitar imgenes en tiempo de diseo o en tiempo de ejecucin. El objeto ListImage tiene las propiedades estndar de las colecciones: Key, Index y Count. Tambin dispone de mtodos estndar, como Add, Remove y Clear. Para obtener ms informacin En el captulo 9, "Programacin con objetos", del Manual del programador de Visual Basic, se ofrece una introduccin al trabajo con objetos y colecciones. Por ltimo, el control presenta los mtodos Overlay, Draw y ExtractIcon, que permiten crear imgenes compuestas, dibujar imgenes en los objetos que tengan la propiedad hDC (por ejemplo Form y Printer) y crear un icono a partir de un mapa de bits almacenado en el control.

Aplicaciones posibles
Almacenar las imgenes que representan carpetas abiertas, carpetas cerradas y documentos. Estas imgenes pueden asignarse dinmicamente al objeto Node del control TreeView para representar sus distintos estados cuando se expande o se contrae, o si es un documento o una carpeta. Almacenar imgenes que representan operaciones habituales de PC, como guardar, abrir e imprimir archivos. Estas imgenes pueden asignarse despus a los objetos Button de un control Toolbar utilizado por la aplicacin. Almacenar imgenes para las operaciones de arrastrar y colocar, por ejemplo para los iconos de las propiedades MousePointer y DragIcons .

Administracin de los objetos ListImage y las colecciones ListImages

El control ImageList contiene la coleccin ListImages de objetos ListImage, a cada uno de los cuales se puede hacer referencia por el valor de la propiedad Index o de la propiedad Key. Puede agregar o quitar imgenes del control en tiempo de diseo o en tiempo de ejecucin.

Agregar objetos ListImage en tiempo de diseo

Para agregar una imagen en tiempo de diseo, utilice el cuadro de dilogo Pginas de propiedades del control ImageList.

Para agregar objetos ListImage en tiempo de diseo

1 Haga clic con el botn secundario del mouse (ratn) en el control ImageList y seleccione Propiedades . 2 Haga clic en la ficha Imgenes para mostrar las pginas de propiedades del control ImageList, como se ilustra en la figura 2.3.
Figura 2.3 El cuadro de dilogo Pginas de propiedades del control ImageList

3 Haga clic en Insertar imagen para mostrar el cuadro de dilogo Seleccionar imagen. 4 Utilice el cuadro de dilogo para buscar los archivos de mapa de bits o de icono y despus haga clic en Abrir. Nota Puede seleccionar varios archivos de mapa de bits o de icono. 5 Asigne un valor nico a la propiedad Key. Para esto, haga clic en el cuadro Key y escriba una cadena. 6 Opcional. Puede asignar un valor a la propiedad Tag si hace clic en el cuadro Tag y escribe una cadena. No es necesario que el valor de la propiedad Tag sea nico. 7 Repita los pasos 3 a 6 hasta que haya poblado el control con las imgenes deseadas.

Agregar objetos ListImage en tiempo de ejecucin

Para agregar una imagen en tiempo de ejecucin, utilice el mtodo Add de la coleccin ListImages junto con la funcin LoadPicture. El ejemplo siguiente se ha tomado del evento Load de un formulario. En l se carga un control ImageList llamado "imlImages" con un nico mapa de bits:
P r i v a t eS u bF o r m _ L o a d ( ) 'S il ar u t ad ea c c e s oe sc o r r e c t a ,s ea g r e g a r

vbcmc.5u.com/Controles/ctrl_ImageList.html

1/5

16/05/13
'l ai m a g e no p e n . b m pal ac o l e c c i nL i s t I m a g e s . 'T a m b i ns ea s i g n aal ap r o p i e d a dK e ye lv a l o r '" o p e n " i m l I m a g e s . L i s t I m a g e s ._ A d d," o p e n " ,L o a d P i c t u r e ( " c : \ b i t m a p s \ o p e n . b m p " ) E n dS u b

Uso del control ImageList

La asignacin de un valor nico a la propiedad Key del objeto ListImage permite escribir cdigo ms fcil de leer. Al asignar la imagen a una propiedad, puede utilizar el valor de la propiedad Key en lugar del valor de la propiedad Index. De esta forma, la asignacin de una imagen a una propiedad puede hacerse con cdigo como el siguiente:
'A s i g n au n ai m a g e nau no b j e t oN o d ed eu nc o n t r o l 'T r e e V i e w .L ac l a v e n i c ad el ai m a g e ne s" o p e n " . T r e e V i e w 1 . N o d e s . A d d,,, " F o l d e r 1 " , " o p e n "

Definicin del tamao de las imgenes

El control tambin puede contener imgenes .bmp o .ico de cualquier tamao y las imgenes pueden tener tamaos de archivo diferentes, aunque su tamao de presentacin ser el mismo. En general, el tamao de presentacin de la primera imagen insertada en el control determina el tamao de las que se inserten despus. Por ejemplo, si inserta primero un icono de 32 x 32 pxeles, todas las imgenes que inserte despus se mostrarn tambin con ese tamao en otros controles. Nota Una excepcin es el uso de una imagen del control ImageList con el control Image. Si se establece a True la propiedad Stretch del control Image, la imagen cambiar de tamao para ajustarse al control. En tiempo de diseo, puede especificar el alto y el ancho de las imgenes del control en pxeles si elige un tamao en la ficha General del cuadro de dilogo Pginas de propiedades del control ImageList. Puede elegir un tamao predeterminado o hacer clic en Personalizado y establecer el tamao que desee para la imagen en los cuadros Alto y Ancho. Esto slo puede hacerse cuando el control ImageList no contiene ninguna imagen. Si intenta cambiar el tamao cuando el control contiene imgenes, se producir un error.

Mtodos que permiten crear imgenes compuestas

Puede utilizar el control ImageList para crear una imagen compuesta (un objeto de imagen) a partir de dos imgenes mediante el mtodo Overlay junto con la propiedad MaskColor. Por ejemplo, si dispone de una imagen de "no internacional" (un crculo con una barra diagonal inscrita), puede colocarla sobre cualquier otra imagen, de esta forma:

La sintaxis del mtodo Overlay requiere dos argumentos. El primero especifica la imagen inferior y el segundo, la imagen que se coloca sobre la primera. Ambos argumentos pueden ser la propiedad Index o la propiedad Key de un objeto ListImage. Por tanto, el cdigo para conseguir el efecto anterior es el siguiente:
'L ai m a g e nc o m p u e s t aa p a r e c ee nu nc o n t r o l 'P i c t u r e B o xl l a m a d o" p i c O v e r " .E lv a l o rd eI n d e x 'p a r al ai m a g e nd e lc i g a r r i l l oe s2yp a r ae l 's m b o l od e" n o "e s1 . I m a g e L i s t 1 . M a s k C o l o r=v b G r e e n S e tp i c O v e r . P i c t u r e=I m a g e L i s t 1 . O v e r l a y ( 2 ,1 )

Tambin puede utilizar la propiedad Key de las imgenes, como en el cdigo siguiente:
'S es u p o n eq u ee lv a l o rd eK e yd el ap r i m e r ai m a g e n 'e s" f u m a r "ye ld el as e g u n d ae s" n o " . S e tp i c O v e r . P i c t u r e=I m a g e L i s t 1 . O v e r l a y ( " f u m a r " , " n o " )

El ejemplo de cdigo anterior ilustra adems el funcionamiento de la propiedad MaskColor. En pocas palabras, la propiedad MaskColor especifica el color que se convierte en transparente cuando una imagen se coloca sobre la otra. La imagen "no" tiene el fondo verde. Por tanto, cuando en el cdigo se especifica que el valor de MaskColor ser vbGreen (que es una constante intrnseca), el verde de la imagen se vuelve transparente en la imagen compuesta.

Uso de ImageList con otros controles

Puede utilizar el control ImageList como almacn de imgenes para otros controles comunes de Windows y para los controles que tengan una propiedad Picture.

Uso de ImageList con otros controles comunes de Windows

Puede utilizar el control ImageList para suministrar imgenes a los siguientes controles a travs de algunas de sus propiedades, segn se indica en la tabla siguiente.
Objeto del control Control comn de Windows Control ListView Control TreeView Control Toolbar Control TabS trip ListItem Node Button Tab Propiedades que se pueden establecer con imgenes de ImageList Propiedades S mallIcon e Icon Propiedades Image y S electedImage Propiedad Image Propiedad Image

Para obtener ms informacin Si desea ver ejemplos del uso de ImageList con los controles TreeView, ListView, Toolbar y TabStrip, consulte los temas de escenarios referentes a estos controles. (Por ejemplo, consulte "Escenario de TreeView: enlazar el control TreeView a la base de datos Biblio.mdb".)

Para utilizar un control ImageList con estos controles, primero debe asociar el control ImageList con el otro control y luego asignar la propiedad Key o la propiedad Index a una de las propiedades indicadas en la tabla anterior. Esto puede hacerse en tiempo de diseo o en tiempo de ejecucin. Todos los controles comunes de Windows, excepto ListView (tratado en este mismo tema), tienen una propiedad ImageList que puede establecer al nombre del control ImageList que est utilizando. Importante Debe poblar el control ImageList con imgenes antes de asociarlo a otro control. Despus de establecer la asociacin y de asignar una imagen a una propiedad del control, el control ImageList no admitir que agregue ms imgenes.

Para asociar el control ImageList al control TreeView, TabStrip o Toolbar en tiempo de

diseo 1 Haga clic con el botn secundario del mouse en el control que utiliza las imgenes del control ImageList y elija Propiedades para abrir el cuadro de dilogo Pginas de propiedades . 2 En la ficha General, seleccione el nombre del control ImageList en el cuadro Lista de imgenes . Para asociar el control ImageList en tiempo de ejecucin, puede utilizar cdigo como el siguiente:
'A s o c i au nc o n t r o lI m a g e L i s tl l a m a d o" i m l I m a g e s "

vbcmc.5u.com/Controles/ctrl_ImageList.html

2/5

16/05/13
'au nc o n t r o lT r e e V i e wl l a m a d o" t v w D B " . S e tt v w D B . I m a g e L i s t=i m l I m a g e s

Uso del control ImageList

Una vez asociado un control ImageList a otro control, puede establecer las propiedades de diversos objetos con la propiedad Key o con la propiedad Index de una imagen del control ImageList. Por ejemplo, el cdigo siguiente establece la propiedad Image del objeto Node de un control TreeView al valor de la propiedad Key "hoja".
P r i v a t eS u bF o r m _ L o a d ( ) 'E lc o n t r o lT r e e V i e ws el l a m a" t v w D a t a " . 'A g r e g au nn o d oye s t a b l e c es up r o p i e d a dI m a g e . 'E lv a l o rd eK e yd el ai m a g e ne s" h o j a " . t v w D a t a . N o d e s . A d d,, " 1n o d e " , " T o p " , " h o j a " E n dS u b

Uso del control ImageList con el control ListView

El control ListView puede emplear dos controles ImageList simultneamente. En lugar de tener una nica propiedad ImageList, el control ListView tiene una propiedad Icons y otra SmallIcons , cada una de las cuales puede estar asociada a un control ImageList. Esto puede hacerse en tiempo de diseo o en tiempo de ejecucin.

Para asociar dos controles ImageList al control ListView en tiempo de diseo

1 Haga clic con el botn secundario del mouse en el control ListView y elija Propiedades para abrir el cuadro de dilogo Pginas de propiedades . 2 Haga clic en la ficha ImageLists . 3 En el cuadro Normal, seleccione el nombre de un control ImageList. 4 En el cuadro Pequeo, seleccione el nombre de otro control ImageList. Tambin puede asignar los controles ImageList en tiempo de ejecucin con cdigo como el siguiente:
'S es u p o n eq u ee lc o n t r o lL i s t V i e ws el l a m a" l v w D B " , 'e lp r i m e rI m a g e L i s ts el l a m a" i m l S m a l l I m a g e s "ye l 's e g u n d os el l a m a" i m l I m a g e s " . S e tl v w D B . S m a l l I c o n s=i m l S m a l l I m a g e s S e tl v w D B . I c o n s=i m l I m a g e s

El control ImageList utilizado depende de la vista determinada en la propiedad View del control ListView. Cuando el control ListView est en vista de iconos, emplea las imgenes proporcionadas por el control ImageList indicado en la propiedad Icons . En cualquiera de las vistas restantes (lista, informe o icono pequeo), utilizar las imgenes del control ImageList indicado en la propiedad SmallIcons . Para obtener ms informacin Si desea obtener ms informacin acerca del control ListView, consulte "Uso del control ListView", ms adelante en este mismo captulo.

Asignacin de objetos ListImage a travs de la propiedad Index o la propiedad Key

Una vez asociado el control ImageList a uno de los controles comunes de Windows, puede especificar una imagen en particular mediante su propiedad Index o su propiedad Key. Por ejemplo, si utiliza el control ImageList con un control TreeView, el cdigo siguiente asignar el tercer objeto ListImage (cuyo valor de Index es 3) a la propiedad Image de un nuevo objeto Node:
'E lc o n t r o lT r e e V i e ws el l a m a" t v w D B " . 'E lq u i n t oa r g u m e n t od e lm t o d oA d d 'e s p e c i f i c au n ai m a g e nat r a v sd el ap r o p i e d a d 'I n d e xod el ap r o p i e d a dK e yd e lo b j e t oL i s t I m a g e . t v w D B . N o d e s . A d d,,," n o d ox " ,3

Por otra parte, puede utilizar la propiedad Key para conseguir el mismo resultado:
'S es u p o n eq u ee lv a l o rd eK e ye s" a b r i r " . t v w D B . N o d e s . A d d,,," n o d ox " ," a b r i r "

Como la propiedad Key del objeto ListImage debe ser una cadena nica, en tiempo de ejecucin puede utilizar la propiedad Key en lugar de la propiedad Index para hacer referencia a la imagen. De esta forma, el cdigo ser ms legible. Sugerencia Como Key debe ser una cadena nica, el uso de un nombre descriptivo para cada objeto ListImage har que el cdigo sea ms fcil de leer y depurar.

Uso del control ImageList con controles que no son los comunes de Windows
Tambin puede utilizar el control ImageList como almacn de imgenes para los objetos que tengan una propiedad Picture. Entre ellos se encuentran los siguientes: Control CommandButton Control OptionButton Control Image Control PictureBox Control CheckBox Objeto Form Objeto Panel (control StatusBar) La propiedad Picture del objeto ListImage devuelve un objeto Picture, que puede asignar a la propiedad Picture de otro control. Por ejemplo, el cdigo siguiente muestra el tercer objeto ListImage de un control PictureBox llamado "picBox":
S e tp i c B o x . P i c t u r e=I m a g e L i s t 1 . L i s t I m a g e s ( 3 ) . P i c t u r e

Escenario del control ImageList: agregar las imgenes Abrir, Guardar e Imprimir a un control Toolbar
Normalmente, las barras de herramientas contienen una fila de botones que, al hacer clic en ellos, realizan una operacin de uso frecuente. Los botones de la barra de herramientas ahorran a menudo espacio en la pantalla ya que representan la operacin con una imagen. En este escenario, tres funciones comunes (abrir, guardar e imprimir un archivo) se representan con imgenes asignadas a los objetos Button de un control Toolbar. Las imgenes y los botones empleados habitualmente para representar estas funciones son los siguientes:

En este ejemplo se emplean los objetos siguientes:

vbcmc.5u.com/Controles/ctrl_ImageList.html

3/5

16/05/13
Un control ImageList llamado "imlTool". Un control Toolbar llamado "tbrStandard".

Uso del control ImageList

Para agregar imgenes a un control Toolbar

1 Agregue imgenes al control ImageList y asigne un valor nico a la propiedad Key de cada objeto. 2 Asocie el control ImageList al control Toolbar. 3 Asigne imgenes a los objetos Button mediante la ficha Botones .

Agregar imgenes al control ImageList y asignar valores nicos a la propiedad Key

Para agregar objetos ListImage en tiempo de diseo
1 Haga clic con el botn secundario del mouse en el control ImageList y elija Propiedades para abrir el cuadro de dilogo Pginas de propiedades . 2 Haga clic en la ficha Imgenes . 3 Elija Insertar imagen para abrir el cuadro de dilogo Seleccionar imagen. 4 Utilice el cuadro de dilogo para buscar los archivos de mapa de bits indicados en la tabla siguiente. Estos mapas de bits se encuentran en el directorio \Tools\Bitmaps\Tlbr_w95 del CD-ROM de Visual Basic. 5 Despus de buscar cada archivo, haga clic en l y elija Abrir, o bien haga doble clic en el archivo para insertarlo en el control ImageList. 6 En la ficha Imgenes , haga clic en el cuadro Key y escriba el valor de la propiedad Key, tal y como aparece en la tabla. La ficha Imgenes debe quedar como se muestra en la figura 2.4.
Archivo open.bmp save.bmp print.bmp Valor de Key abrir guardar imprimir

Figura 2.4 La ficha Imgenes con tres objetos ListImage

Asociacin del control ImageList al control Toolbar

Para poder asignar las imgenes a los objetos Button, previamente tiene que asociar el control ImageList al control Toolbar.

Para asociar un control ImageList a un control Toolbar

1 Haga clic con el botn secundario del mouse en el control Toolbar y elija Propiedades para abrir el cuadro de dilogo Pginas de propiedades , como se ilustra en la figura 2.5. 2 En la ficha General, seleccione el nombre del control ImageList en el cuadro ImageList.
Figura 2.5 Asociar un control ImageList a un control Toolbar

Asignacin de imgenes a los objetos Button con la ficha Botones

Para asignar una imagen a un objeto Button
1 Haga clic en la ficha Botones (en el cuadro de dilogo Pginas de propiedades del control Toolbar) para mostrar la ficha, ilustrada en la figura 2.6. 2 Elija Insertar botn para insertar un nuevo objeto Button. 3 Haga clic en el cuadro Image y escriba el valor de Key de un objeto ListImage. 4 Haga clic en Aplicar. 5 Repita los pasos 2 a 4 para agregar ms botones y asignarles imgenes.
Figura 2.6 Agregar objetos Button y asignarles imgenes en la ficha Botones

vbcmc.5u.com/Controles/ctrl_ImageList.html

4/5

16/05/13

Uso del control ImageList

vbcmc.5u.com/Controles/ctrl_ImageList.html

5/5