El Demo del Día: ComboBox con Imágen y Múltiples Columnas en WinForms

ComboBox con Imágen y Múltiples Columnas en WinForms

Ayer en el seminario vimos como crear Librerías de Controles para WinForms y no pude completar el último Demo de un Control ComboBox enlazado a Datos que soporte Imagen de Base de Datos y permita visualizar Múltiples Columnas.

Requerimiento

Se desea mostrar la información de los registros en varias columnas en una lista desplegable (ComboBox) y ademas poder incluir al inicio una Imagen también desde un origen de datos.

Solución

Debemos sobre escribir la clase ComboBox de WinForms y crear un par de propiedades llamada "ImageMember" para el campo de imagen y "DataColumns" para la lista de columnas a visualizarse la cual contiene el nombre del campo, el ancho de la columna y la alineación.

El control ComboBox tiene 2 formas de presentación: la Normal y la Dibujada, lo cual se logra cambiar configurando la propiedad "DrawMode". En nuestro caso, modificaremos la propiedad "DrawMode" a "OwnerDrawFixed" y programaremos en el evento "DrawItem" el dibujo con las columnas a presentar y la imagen.

Crear el Procedimiento Almacenado en la Base de Datos Northwind de SQL Server

Para listar los datos del empleado incluyendo su foto escribir el siguiente código:

Create procedure [dbo].[uspEmployeesListar]
As
Select EmployeeId,LastName,FirstName,IsNull(BirthDate,'1/1/1900') as Birthdate,Photo
From Employees

Actualizar los registros del campo Photo reemplazandolo desde archivo de disco

El campo Foto (Photo) de la tabla Empleados (Employees) de Northwind tiene registros de tipo bmp que no se verán en la aplicación, hay que actualizarlos por archivos jpg desde el disco.

Para eso entrar como Administrador al SQL Managment Studio y ejecutar la siguiente instrucción:

Update Employees Set Photo=(Select img.* from Openrowset(Bulk 'C:\Data\NET\Practicas\WinForms\ComboBox_Imagen_MultiColumna\Empleados\1.jpg', Single_Blob) img) where EmployeeId = 1

Nota: Realizar lo mismo para modificar las imágenes tantos registros tengas en la tabla empleados, para lo cual cambiar el archivo y el Id del Empleado (EmployeeId).

Crear una Aplicación Windows Forms en C#

En Visual Studio crear un proyecto Windows Forms en C# con el nombre de "ComboBox_Imagen_MultiColumna", luego cambiar el nombre del formulario a "frmConsultaEmpleado".

Crear la Clase Entidad del Negocio

Crear la clase beEmpleado escribiendo el siguiente código:

using System;
namespace ComboBox_Imagen_MultiColumna
{
    public class beEmpleado
    {
        public int IdEmpleado { get; set; }
        public string Apellido { get; set; }
        public string Nombre { get; set; }
        public DateTime FechaNacimiento { get; set; }
        public byte[] Foto { get; set; }
    }
}

Crear la Clase de Acceso a Datos

Crear la clase daEmpleado escribiendo el siguiente código:

using System;
using System.Collections.Generic; //List
using System.Data; //CommandType, CommandBehavior
using System.Data.SqlClient; //SqlConnection, SqlCommand, SqlDataReader
namespace ComboBox_Imagen_MultiColumna
{
    public class daEmpleado
    {
        public List<beEmpleado> listar(SqlConnection con)
        {
            List<beEmpleado> lbeEmpleado = null;

            SqlCommand cmd = new SqlCommand("uspEmployeesListar", con);
            cmd.CommandType = CommandType.StoredProcedure;
            SqlDataReader drd = cmd.ExecuteReader(CommandBehavior.SingleResult);
            if (drd != null)
            {
                lbeEmpleado = new List<beEmpleado>();
                int posIdEmpleado = drd.GetOrdinal("EmployeeID");
                int posApellido = drd.GetOrdinal("LastName");
                int posNombre = drd.GetOrdinal("FirstName");
                int posFechaNacimiento = drd.GetOrdinal("BirthDate");
                int posFoto = drd.GetOrdinal("Photo");
                beEmpleado obeEmpleado;
                while (drd.Read())
                {
                    obeEmpleado = new beEmpleado();
                    obeEmpleado.IdEmpleado = drd.GetInt32(posIdEmpleado);
                    obeEmpleado.Apellido = drd.GetString(posApellido);
                    obeEmpleado.Nombre = drd.GetString(posNombre);
                    obeEmpleado.FechaNacimiento = drd.GetDateTime(posFechaNacimiento);
                    if (!drd.IsDBNull(posFoto)) obeEmpleado.Foto = (byte[])drd.GetValue(posFoto);
                    lbeEmpleado.Add(obeEmpleado);
                }
                drd.Close();
            }

            return (lbeEmpleado);
        }
    }
}

Nota: Tiene que haberse creado el Procedimiento Almacenado "uspEmployeesListar" en la BD Northwind.

Crear la Clase de Reglas del Negocio

Crear la clase brEmpleado escribiendo el siguiente código:

using System;
using System.Configuration; //ConfigurationManager
using System.Data.SqlClient; //SqlConnection
using System.Collections.Generic; //List
namespace ComboBox_Imagen_MultiColumna
{
    public class brEmpleado
    {
        public List<beEmpleado> listar()
        {
            List<beEmpleado> lbeEmpleado = null;
            string conexion = ConfigurationManager.ConnectionStrings["conNW"].ConnectionString;
            using (SqlConnection con = new SqlConnection(conexion))
            {
                try
                {
                    con.Open();
                    daEmpleado odaEmpleado = new daEmpleado();
                    lbeEmpleado = odaEmpleado.listar(con);
                }
                catch (SqlException ex)
                {
                    //grabarLog(ex);
                }
                catch (Exception ex)
                {
                    //grabarLog(ex);
                }
            } //con.Close(); con.Dispose();
            return (lbeEmpleado);
        }
    }
}

Nota: Hay que hacer referencia a la librería "System.Configuration.dll" para usar la clase ConfigurationManager para leer el archivo de configuración.

Crear una Clase Entidad para configurar las Columnas del Combo

Crear la clase "DataColumn" escribiendo el siguiente código:

using System.Windows.Forms;

namespace ComboBox_Imagen_MultiColumna

{

    public class DataColumn

    {

        public string ColumnName { get; set; }

        public string HeaderText { get; set; }

        public int ColumnWidth { get; set; }

        public HorizontalAlignment Alignment { get; set; }

    }

}

Crear una Clase para el ComboBox con Imagen y Múltiples Columnas

Crear la clase "ComboImage" que herede del ComboBox escribiendo el siguiente código:

using System;
using System.Text;
using System.IO;
using System.Drawing;
using System.Collections.Generic;
using System.Windows.Forms;

namespace ComboBox_Imagen_MultiColumna
{
    public class ComboImage:ComboBox
    {
        private dynamic dataSource;
        public string ImageMember { get; set; }
        public List<DataColumn> DataColumns { get; set; }

        public ComboImage()
        {
            this.ItemHeight = 25;
            this.DrawMode = DrawMode.OwnerDrawFixed;
            this.DrawItem += new DrawItemEventHandler(dibujarElemento);
            this.MeasureItem += new MeasureItemEventHandler(configurarTamaño);
        }

        private void dibujarElemento(object sender, DrawItemEventArgs e)
        {
            int x = e.Bounds.X;
            int y = e.Bounds.Y;
            int indice = e.Index;
            dataSource = DataSource;
            string item="";          
            if (DataColumns != null && DataColumns.Count > 0)
            {
                StringBuilder sb = new StringBuilder("");
                DataColumn columna;
                string valor = "";
                for (int i = 0; i < DataColumns.Count; i++)
                {
                    columna = DataColumns[i];
                    valor = dataSource[indice].GetType().GetProperty(columna.ColumnName).
                                GetValue(dataSource[indice], null).ToString();
                    if (columna.Alignment.Equals(HorizontalAlignment.Right))
                        sb.Append(String.Format("{0} │ ", valor.PadLeft(columna.ColumnWidth, ' ')));
                    else sb.Append(String.Format("{0} │ ", valor.PadRight(columna.ColumnWidth, ' ')));
                }
                item = sb.ToString();
            }
            else
            {
                if (!String.IsNullOrEmpty(DisplayMember))
                {
                    item = dataSource[indice].GetType().GetProperty(DisplayMember).
                               GetValue(dataSource[indice], null).ToString();
                }
            }
            if (!String.IsNullOrEmpty(ImageMember))
            {
                byte[] buffer = dataSource[indice].GetType().GetProperty(ImageMember).
                                         GetValue(dataSource[indice], null);
                if (buffer != null && buffer.Length > 0)
                {
                    MemoryStream ms = new MemoryStream(buffer);
                    Image img = null;
                    try{
                        img = Image.FromStream(ms);
                        e.Graphics.DrawImage(img, x, y, 25, 25);
                    }
                    catch(Exception ex)
                    {
                        //Grabar Log
                    }                                    
                }
                x = x + 20;
            }
            e.Graphics.DrawString(item, new Font("Courier New", 8), Brushes.Black, x, y+5);
            e.DrawFocusRectangle();
        }

        private void configurarTamaño(object sender, MeasureItemEventArgs e)
        {
            e.ItemWidth = this.Width;
            e.ItemHeight = 200;
        }
    }
}

Nota: Esta clase creada hereda las propiedades DataSource, DisplayMember y ValueMember del ComboBox pero adicionalmente se crean las propiedades DatColumns y ImageMember y se sobre escribe los eventos DrawItem y MeasureItem para dibujar las columnas y la imágen.

Diseñar y Programar el Formulario con el ComboImage creado

Abrir el formulario "frmConsultaEmpleado" y realizar el siguiente diseño:

Escribir el siguiente código en el formulario:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Drawing;
using System.Windows.Forms;

namespace ComboBox_Imagen_MultiColumna
{
    public partial class frmConsultaEmpleado : Form
    {
        private List<beEmpleado> lbeEmpleado;

        public frmConsultaEmpleado()
        {
            InitializeComponent();
        }

        private void listarEmpleados(object sender, EventArgs e)
        {
            brEmpleado obrEmpleado = new brEmpleado();
            lbeEmpleado = obrEmpleado.listar();
            cboEmpleado.DataSource = lbeEmpleado;
            cboEmpleado.DisplayMember = "Apellido";
            cboEmpleado.ValueMember = "IdEmpleado";
            cboEmpleado.ImageMember = "Foto";
            List<DataColumn> columnas = new List<DataColumn>();
            columnas.Add(new DataColumn { ColumnName="IdEmpleado",
                ColumnWidth=3, Alignment=HorizontalAlignment.Right});
            columnas.Add(new DataColumn { ColumnName = "Apellido",
                ColumnWidth = 20, Alignment = HorizontalAlignment.Left });
            columnas.Add(new DataColumn { ColumnName = "Nombre",
                ColumnWidth = 10, Alignment = HorizontalAlignment.Left });
            cboEmpleado.DataColumns = columnas;
            cboEmpleado.SelectedIndex = -1;
        }

        private void mostrarEmpleadoSeleccionado(object sender, EventArgs e)
        {
            int n = cboEmpleado.SelectedIndex;
            if (n > -1)
            {
                txtCodigo.Text = lbeEmpleado[n].IdEmpleado.ToString();
                txtApellido.Text = lbeEmpleado[n].Apellido;
                txtNombre.Text = lbeEmpleado[n].Nombre;
                txtFechaNacimiento.Text = lbeEmpleado[n].FechaNacimiento.ToShortDateString();
                byte[] foto = lbeEmpleado[n].Foto;
                MemoryStream ms = new MemoryStream(foto);
                try
                {
                    picFoto.Image = Image.FromStream(ms);
                }
                catch (Exception ex)
                {
                    picFoto.Image = null;
                }
            }
            else
            {
                txtCodigo.Clear();
                txtApellido.Clear();
                txtNombre.Clear();
                txtFechaNacimiento.Clear();
                picFoto.Image = null;
            }
        }
    }
}

Nota: Asociar al evento "load" del formulario la función "listarEmpleados" y al evento "SelectedIndexChanged" del ComboImage llamado "cboEmpleado" la función "mostrarEmpleadoSeleccionado".

Modificar el archivo App.Config para incluir la Cadena de Conexión

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <connectionStrings>
    <add name="conNW" providerName="System.Data.SqlClient" connectionString="uid=UsuarioNW;pwd=123456;data source=DSOFT\Sqlexpress;initial catalog=NW"/>
  </connectionStrings>
    <startup>
        <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.5" />
    </startup>
</configuration>

Probar la Aplicación Windows Forms

Grabar la aplicación y ejecutarla con F5. Desplegar el ComboBox y se mostrará la siguiente ventana:

Seleccionar un registro y se mostrará los datos del empleado, tal como se muestra a continuación:

Nota: La consulta es desconectada ya que los datos del empleado se obtienen de la Lista de Objetos.

Comentario Final

En este post vimos como mostrar en un ComboBox de WinForms múltiples columnas y también imágenes, para lo cual creamos un control personalizado configurando la propiedad "DrawMode" y agregamos propiedades "ImageMember" y "DataColumns", luego dibujamos en el evento "DrawItem".

Como ven no es tan díficil crear tus propios controles personalizados, como siempre nos ayudamos con un poco de Reflection para obtener propiedades (nombres y valores).

Espero les sirva.

Descarga
Demo_ComboBox_Imagen_MultiColumna