El objetivo del control ImageList consiste en permitir, de un modo sencillo, la creación y mantenimiento de una colección de imágenes dentro del diseñador de formularios Windows, de manera que las mismas puedan ser asociadas, fundamentalmente en tiempo de diseño, al resto de controles del formulario que dispongan de la capacidad de visualizar una imagen.


A continuación vemos la configuración de este control en tiempo de diseño, donde podemos establecer, entre otras propiedades, el tamaño a usar para mostrar las imágenes, y el cuadro de diálogo para el mantenimiento de la lista.



Una vez creada la lista, resulta una tarea muy simple asignar las imágenes en tiempo de diseño a un control que disponga de la propiedad ImageList. Únicamente tenemos que indicar el nombre de la lista de imágenes en dicha propiedad, mientras que para seleccionar una de ellas, utilizaremos el índice numérico que ocupa en la lista a través de la propiedad ImageIndex, o bien su nombre, mediante la propiedad ImageKey.



Sin embargo, en el caso de querer realizar la misma operación al crear una barra de herramientas con un componente ToolStrip que contenga, por ejemplo, controles ToolStripButton y ToolStripLabel, descubriremos que, curiosamente, las anteriormente mencionadas propiedades no se muestran en la ventana de propiedades del diseñador de formularios.


¿Quiere esto decir que no podemos emplear un ImageList para guardar las imágenes de una barra de herramientas?. No, por supuesto, estas propiedades siguen estando disponibles, lo que ocurre es que debemos manipularlas por código en lugar de utilizando el diseñador.


Como podemos ver en el siguiente código fuente, al cargar el formulario nos ocupamos de dicha tarea, mostrando las diversas formas de asignación de una imagen a los controles.

private void Form1_Load(object sender, EventArgs e)
{   
  // asignar lista de imágenes a barra de herramientas   
  this.toolStrip1.ImageList = this.imageList1;         

  // asignar imágenes de lista a controles   
  // de la barra de herramientas   
  this.toolStripButton1.ImageIndex = 0;   
  this.toolStripButton2.ImageKey = «ExploradorWeb.jpg»;    

  // no ajustar el tamaño de imagen para este control
  this.toolStripButton2.ImageScaling = ToolStripItemImageScaling.None;

  // asignar una imagen a un control   
  // de la barra de herramientas sin usar ImageList   
  this.toolStripLabel1.Image = new Bitmap(@»C:ImagenesCarpetaCerrada.gif»);
}

En primer lugar tomamos el objeto ImageList que hemos creado en tiempo de diseño y lo asignamos a la propiedad ToolStrip.ImageList. Seguidamente, pasamos a los controles de esta barra de herramientas, estableciendo las imágenes a mostrar con las propiedades ImageIndex e ImageKey respectivamente.


Por defecto, el tamaño de las imágenes visualizadas por los controles de la barra de herramientas se ajustan al tamaño de la misma, pero si no deseamos tal comportamiento, y queremos que el tamaño de la imagen sea el que hemos establecido en el ImageList, asignaremos el valor None a la propiedad ImageScaling del control perteneciente a la barra.


Finalmente utilizamos el modo más directo: instanciar un objeto derivado de la clase Image, y asignarlo a la propiedad del mismo nombre del control.


El resultado final lo observamos en la siguiente imagen, donde podemos ver los controles añadidos al ToolStrip. En el caso de la etiqueta o ToolStripLabel, se muestra de forma combinada, tanto la imagen asignada en tiempo de ejecución como el literal de la etiqueta.



Así que no se asuste nadie cuando vaya a utilizar un ImageList junto a un ToolStrip, sigue siendo posible, simplemente cambia un poco el lugar desde donde trabajar con las propiedades.


Un saludo.