Eliminar los bordes de separación de celdas en el control DataGridView
Entre las características predeterminadas del control DataGridView de Windows Forms, se encuentra la visualización de las líneas de separación que delimitan las celdas que componen la cuadrícula de datos.
Si por alguna circunstancia no deseamos que dichas líneas se muestren al usuario, podemos utilizar la propiedad CellBorderStyle, asignándole el valor None de la enumeración DataGridViewCellBorderStyle, la cual nos permite también aplicar diversos efectos de resaltado de estas líneas.
this.dataGridView1.CellBorderStyle = DataGridViewCellBorderStyle.None;
La siguiente imagen muestra el control después de haber ocultado sus líneas.
Pero siendo un poco más rebuscados, supongamos que queremos eliminar estas líneas de una forma selectiva, por ejemplo, la línea vertical que separa las dos primeras columnas. En este caso, la propiedad CellBorderStyle no resulta de ayuda, por lo que tendremos que recurrir a una técnica un poco más compleja, basada en realizar el dibujo de todos los elementos de la celda manualmente mediante el evento CellPainting del DataGridView.
Como podemos adivinar por su nombre, CellPainting es un evento que se desencadenará cada vez que el control necesite pintar una celda, por lo que resulta el punto idóneo para personalizar el modo en cómo queremos que se muestre el dato contenido en la celda al usuario.
El procedimiento a seguir para realizar el dibujo personalizado de una celda consiste en comprobar en primer lugar si estamos ante la fila y columna que necesitamos. A continuación también observaremos si la celda está seleccionada, ya que en ese caso tendremos que utilizar una combinación de colores distinta para resaltar el contenido.
Seguidamente dibujamos el rectángulo correspondiente a la celda, cuyas dimensiones obtenemos de la propiedad CellBounds, perteneciente al parámetro DataGridViewCellPaintingEventArgs que recibe este evento, rellenándolo con el color de fondo que corresponda: seleccionado o normal. Para que la combinación de colores se ajuste a la utilizada por los controles estándar, emplearemos los colores obtenidos a partir de las propiedades públicas pertenecientes a la clase SystemColors.
En el siguiente paso dibujaremos únicamente la línea vertical de separación para las filas de la celda. En el caso de que la celda tenga un valor que mostrar, lo dibujaremos mediante el método estático DrawText de la clase TextRenderer, pasando, entre otros valores, el tipo de letra que obtenemos del estilo correspondiente a la celda, el rectángulo sobre el que se dibujará el texto que nos proporciona el parámetro DataGridViewCellPaintingEventArgs. CellBounds, y el color que hemos establecido anteriormente tras comprobar si la celda estaba o no seleccionada.
Dado que estamos pintando de modo personalizado la celda, terminaremos el código del manipulador de este evento indicando dicha circunstancia -asignando el valor true a la propiedad DataGridViewCellPaintingEventArgs.Handled-, para así evitar que el control intente realizar alguna acción de dibujo sobre la celda por su cuenta. El código fuente necesario podemos verlo a continuación.
private void dataGridView1_CellPainting(object sender, DataGridViewCellPaintingEventArgs e)
{
// comprobar que la fila y columna son las adecuadas
if (e.RowIndex >= 0 && (e.ColumnIndex == 0))
{
Color clrFondoCelda;
Color clrTextoCelda;
// en función de si la celda está o no seleccionada
// establecer los colores
if ((e.State & DataGridViewElementStates.Selected) == DataGridViewElementStates.Selected)
{
clrFondoCelda = SystemColors.Highlight;
clrTextoCelda = SystemColors.Window;
}
else
{
clrFondoCelda = SystemColors.Window;
clrTextoCelda = SystemColors.WindowText;
}
// rellenar el rectángulo de la celda con el color correspondiente
e.Graphics.FillRectangle(new SolidBrush(clrFondoCelda), e.CellBounds);
// dibujar solamente la línea vertical de la celda
e.Graphics.DrawLine(new Pen(SystemColors.ActiveBorder),
new Point(e.CellBounds.X, e.CellBounds.Y + e.CellBounds.Height - 1),
new Point(e.CellBounds.X + e.CellBounds.Width, e.CellBounds.Y + e.CellBounds.Height - 1));
// si la celda tiene valor
if (e.Value != null)
{
// dibujar el texto
TextRenderer.DrawText(e.Graphics,
e.FormattedValue.ToString(),
e.CellStyle.Font,
e.CellBounds,
clrTextoCelda);
}
e.Handled = true;
}
}
El efecto de la eliminación de esta línea en las celdas podemos apreciarlo en la siguiente imagen.
Observemos un efecto curioso: el texto de la celda que hemos dibujado mediante CellPainting ha quedado alineado en el centro, cuando por defecto queda a la izquierda. Si queremos que dicha alineación permanezca en el lugar original, hemos de añadir un parámetro adicional al método TextRenderer.DrawText. Dicho parámetro es un valor de la enumeración TextFormatFlags, que nos permite aplicar este y otro tipo de efectos al texto que dibujemos manualmente.
TextRenderer.DrawText(e.Graphics,
e.FormattedValue.ToString(),
e.CellStyle.Font,
e.CellBounds,
clrTextoCelda,
TextFormatFlags.Left);
Ahora las celdas de esta columna ya se mostrarán con la alineación correcta.
El código fuente de este ejemplo puede descargarse en estos enlaces para C# y VB.
Un saludo.