Combobox con Imagenes

En este post les mostraré una forma de incluir imágenes al lado de cada elemento de un ComboBox , asi:


Para ello necesitaremos un Windows Form en el que incluiremos un control ComboBox y un Componente ImageList.

En el ImageList cargamos las imágenes que queremos mostrar. En lo posible, el tamaño de estas imágenes debe ser de 16x16.



Ahora necesitamos crear una clase muy simple que nos permita almacenar la etiqueta de los elementos del Combo y el índice de la imagen en el ImageList.

class ComboItem

{
   private int _imageIndex;
   private string _etiqueta;

   public string Etiqueta
   {
       get { return _etiqueta; }
       set { _etiqueta = value; }
   }

   public int ImageIndex
   {
       get { return _imageIndex; }
       set { _imageIndex = value; }
   }

   public ComboItem(string etiqueta, int imageIndex)
   {
       this.Etiqueta = etiqueta;
       this.ImageIndex = imageIndex;
   }

   public override string ToString()
   {
       return Etiqueta;
   }
}

Nada más, ahora lo único que tenemos que hacer es añadir instancias de la clase ComboItem en nuestro comboBox, podemos hacerlo en el evento Load asi:

private void Form1_Load(object sender, EventArgs e)
{
   comboBox1.Items.Add(new ComboItem("Aumentar", 0));
   comboBox1.Items.Add(new ComboItem("Disminuir", 1));
   comboBox1.Items.Add(new ComboItem("---------", -1));
   comboBox1.Items.Add(new ComboItem("Editar", 2));
}

Nótese que el tercer item tiene el índice -1. Usaremos -1 para indicar que un elemento no tiene una imagen asociada.

Ahora si, la verdadera acción:

Primero debemos modificar la propiedad DrawMode del ComboBox, y fijarla en OwnerDrawFixed.

Y finalmente añadimos un manejador para el evento DrawItem del ComboBox, asi:

private void comboBox1_DrawItem(object sender, DrawItemEventArgs e)
{
   ComboItem item = comboBox1.Items[e.Index] as ComboItem;
   e.DrawBackground();
   if (item.ImageIndex >= 0 && item.ImageIndex < imageList1.Images.Count)
       e.Graphics.DrawImage(imageList1.Images[item.ImageIndex], new PointF(e.Bounds.Left, e.Bounds.Top));
   e.Graphics.DrawString(item.Etiqueta, e.Font, new SolidBrush(e.ForeColor), new PointF(e.Bounds.Left + imageList1.ImageSize.Width + 1, e.Bounds.Top));
}

Eso es todo, nuestro ComboBox ahora muestra su imagen asociada a su izquierda.

En un siguiente post, mostraré cómo se puede crear un control derivado de ComboBox que incluya todo este procedimiento de modo que sea reutilizable.