Personalizar el DataGridView

Introducción

Algunas veces, en un datagrid, queremos visualizar diferentes informaciones en una celda y no simplemente un valor por celda.

Por ejemplo, un ejemplo, sería un grid donde con una cierta frecuencia, el contenido numérico va a variar, pero, ¿qué sucede si para el usuario es importante no solamente la nueva cifra sino el incremento?

Suponiendo que tenemos una aplicación donde lleva el saldo de los Pitufos. Para el usuario de la aplicación, lo mismo sería interesante, no solamente ver el nuevo saldo, sino el tanto por ciento que ha variado.

Con los controles que nos ofrece .Net, una de las formas, sería añadir una nueva columna "% Balance", donde refleje la variación. Pero otra forma, sería, que en la misma celda, en letra más pequeña y con una flecha (hacía arriba para incrementos positivos y hacía abajo para incrementos negativos) para mostrar esta información.

Quedaría como:

Personalizar la celda del data Grid

Paso 1:

Crear una clase que derive de alguna de las siguientes clases, 

      System.Windows.Forms.DataGridViewButtonCell

      System.Windows.Forms.DataGridViewCheckBoxCell

      System.Windows.Forms.DataGridViewComboBoxCell

      System.Windows.Forms.DataGridViewHeaderCell

      System.Windows.Forms.DataGridViewImageCell

      System.Windows.Forms.DataGridViewLinkCell

      System.Windows.Forms.DataGridViewTextBoxCell

En este ejemplo, se eligio derivar de DataGridViewTextBoxCell, ya que era la clase que más acercaba a lo que queríamos representar. Dependiendo de lo que contendrá la celda, asi será la clase elegida para derivar.

class DataGridViewCellDoubleIncrement : System.Windows.Forms.DataGridViewTextBoxCell

Paso 2:

Sobreescribimos el método Paint. Este método será llamado siempre que la celda vaya a ser pintada. Aquí estará el código donde dibujaremos la información del incremento del %.

protected override void Paint(System.Drawing.Graphics graphics, System.Drawing.Rectangle clipBounds, System.Drawing.Rectangle cellBounds, int rowIndex, System.Windows.Forms.DataGridViewElementStates cellState, object value, object formattedValue, string errorText, 

            System.Windows.Forms.DataGridViewCellStyle cellStyle, System.Windows.Forms.DataGridViewAdvancedBorderStyle advancedBorderStyle, System.Windows.Forms.DataGridViewPaintParts paintParts)

        

Paso 3:

Sobre escribimos el método:

protected override System.Drawing.Size GetPreferredSize(System.Drawing.Graphics graphics, System.Windows.Forms.DataGridViewCellStyle cellStyle, int rowIndex, System.Drawing.Size constraintSize)

Este método será llamada para cuando se necesite saber el tamaño que tendrá la celda. Como vamos a añadir más información a la celda, necesitará más espacio. Entonces, aquí es donde se añada ese espacio extra para mostrar la información del %.

Paso 4:

Crear una clase que derive de .DataGridViewColumn, y está clase representará la columna que contendrá nuestro nuevo tipo de celda para visualizar el incremento del %.

 public class DataGridViewColumnDoubleIncrement : System.Windows.Forms.DataGridViewColumn

Paso 5:

Para que la columna sepa DataGridViewColumnDoubleIncrement  que tipo de celdas debe de crear, en el constructor se añade la línea:

this.CellTemplate = new DataGridViewCellDoubleIncrement();

Con lo anterior, ya tendríamos lo básico para personalizar la forma en que queremos visualizar los datos en cada celda.

Como ver el código, es más explicativo que párrafos y párrafos, en este link está el código fuente.

Conclusión

Como se ha visto, con un poco de trabajo, puede resultar de gran efecto visual en el interface de usuario y además, que el usuario, vea la información más cercana a su modelo mental, creando una mejor experiencia de usuario.

Félix Romo

felix.romo.sanchezseco@gmail.com