Actualmente estoy trabajando en un proyecto que incluye un punto de venta.
Como la mayoria de los programadores que conosco, lo primero que pense fue un grid, pero al presentar la propuesta, me la regresaron.
Me pidieron algo mas simple y que funcionara como un log, algo así como un ListBox, pero querian que en la descripción del artículo, mostrara la imágen del mismo.
La verdad no sabia como hacerlo, aunque buscando en internet me di cuenta de que es algo demasiado sencillo, así que aquí pongo los pasos:
- En una Forma agrega el listBox y un ImageList.
- Crea una clase llamada listItem, que contendrá lo siguiente:
class listItem
{
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 listItem(string etiqueta, int imageIndex)
{
this.Etiqueta = etiqueta;
this.ImageIndex = imageIndex;
}
public override string ToString()
{
return Etiqueta;
}
}
Para agregar los Items con sus respectivos iconos al ListBox, usamos la siguiente función:
listBox1.Items.Add(new listItem("Item Uno", 0));
Ahora, para que se dibuje el ícono al insertar el Item, nos vamos al evento “DrawItem” del ListBox y escribimos lo siguiente:
listItem item = listBox1.Items[e.Index] as listItem;
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));
Y con eso tendremos nuestro ListBox con sus Íconos, aunque con algunos cambios funciona para ComboBox y probablemente para algunos otros componentes similares.
Ahora sólo me falta descifrar como mostrar fotografías de artículos en un tamaño de 16 x 16 pixeles, pero eso, amigos, es otra historia.
16×16? no es muy poco para una imagen?
Si, de hecho. Pero así me lo pidieron y yo no soy mas que un simple esclavo
jejejeje
Pues tengo otras alternativas, obviamente tenia que mostrar esa opción para que vieran que no era muy viable esa alternativa y poder enseñar mis propuestas.
Aunque corro el riesgo que me pidan modificar el componente para que se vean las imágenes mas grandes, y en texto alineado a ellas, al fin y al cabo: Todo se puede
A lo mejor estaría bien si tienes un cuadro con un imagebox, cuando menos de unos 100×100 y que éste mostrara la imagen acualizandola mientras te mueves por los items del listbox ¿no?
muuuchas gracias jsoto era lo que andaba buscando, claro que tuve que modificar el componente para mostrar las imagenes pero despues esta todo bien, salvo que… la imagen pierde nitidez cuando se la muestra
Excelente artículo… corto, conciso, explicado y útil…
tx Man…
Saludos…
omar_chavez arroba hotmail.com
Seguiré intentando!
Saludos! (solo aplique los pasos que aqui se detallan, si encuentro algo, trataré de postearlo!)
WALA!!! :d
No veo que lo comenten…. pero, el detalle es que la propiedad DrawMode del ListBox (o del combo en el caso del link original) debe estar distinta a “Normal” …. yo la fije en “OwnerDrawVariable” y en otra prueba la fije en “OwnerDrawFixed” dandome en ambos casos el resultado esperado.
Al regresar a Modo Normal otra vez dejo de tener las imagenes en la lista…
Así que si alguien como yo le batalla, seguramente es por ese pequeño detalle y por que no se tomó la molestia de leer hasta este punto jajajaja
Saludos… y una vez mas, gracias!
omar_chavez arroba hotmail.com
Hola… muy útil to post. Sabes? tengo un detalle, al compilar me reclama por “new PointF” en el evento DrawItem del listbox
e.Graphics.DrawImage(imageList1.Images[item.ImageIndex],
new PointF(e.Bounds.Left, e.Bounds.Top));
y también en:
e.Graphics.DrawString(item.Etiqueta, e.Font, new SolidBrush(e.ForeColor),
new PointF(e.Bounds.Left + imageList1.ImageSize.Width + 1,
e.Bounds.Top));
dentro del mismo evento.
Por favor… ayuda!!
Gracias!.