Un ComboBox con imgenes

Update: Actualizado en www.MiCodigo.info En este post les mostrar una forma de incluir imgenes 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 imgenes que queremos mostrar. En lo posible, el tamao de estas imgenes 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 ms, ahora lo nico que tenemos que hacer es aadir 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)); } Ntese que el tercer item tiene el ndice -1. Usaremos -1 para indicar que un elemento no tiene una imagen asociada.

Ahora si, la verdadera accin:

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

Y finalmente aadimos 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 cmo se puede crear un control derivado de ComboBox que incluya todo este procedimiento de modo que sea reutilizable.
Posted by J. Marcos Troncoso a las 8:40 a. m. Labels: .NET Framework, C#, WinForms

10 comentarios:

Annimo dijo...

Excelente. He aprendido un par de cosillas que me van a ser muy utiles. Gracias 8:13 a. m.

Annimo dijo...

hola, est genial pero slo un detalle No se puede hacer que la imagen aparezca en el combobox una vez se haya seleccionado la opcin deseada? Es decir, que la imagen aparezca cuando no est el combobox desplegado para seleccionar.

Muchas gracias 5:25 p. m.

Annimo dijo...

Pues si me enseas, me hars un gran favor. Soy novato y autodidacta, as que me cuesta un poquito. Mil gracias por anticipado. 5:49 p. m.

Annimo dijo...

Excelente!!!! probado con un listBox y funciona exactamente igual.

Enhorabuena y gracias. 10:42 a. m.

Annimo dijo...

para que la imagen aparezca en la opcin seleccionada hay que configurar la opcion DropDownStyle como DropDownList 11:05 a. m.

Pedro dijo...

Este ejemplo como se hara con un enlace a un dataview?. 5:49 a. m.

Annimo dijo...

Alguien me podria a ayudar a pasar este ejemplo a vb.net?

Creo que tengo la clase creada correctamente.

Public Class listItem

Private _imageIndex As Integer Private _etiqueta As String

Public Property ImageIndex As Integer Get Return _imageIndex End Get Set(ByVal value As Integer) _imageIndex = value End Set End Property

Public Property Etiqueta As String Get Return _etiqueta End Get Set(ByVal value As String) _etiqueta = value End Set End Property

Public Sub listItem(etiqueta As String, imageIndex As Integer) Me.Etiqueta = etiqueta Me.ImageIndex = imageIndex End Sub

Public Overrides Function ToString() As String Return Etiqueta End Function

End Class 11:39 a. m.

Rodrigo Trujillo dijo...

que tal, me podran decir como asignar un valor a la propiedad de "value" y/o "text" del item del comboBox, ya que de la forma en la que lo realizas solo puedo obtener la etiqueta en la propiedad ComboBox.SelectedItem y requiero asignar un valor numerico a cada elemento distinto al index, gracias

saludos 10:35 p. m.

Annimo dijo...

No me funcion en VB.net 2010

salen miles de errores 2:51 a. m.

Annimo dijo...

Pro favor una ayudita. Si esto se quiere hacer con webforms, no con winform, cmo se hace? Muchas gracias !!!! 5:40 p. m.