Aplicando Estilos a un DataGridView.

Una de los principales inconvenientes al desarrollo de aplicaciones clientes, es cuando queremos darle un estilo propio a nuestro famoso datagridview, al tener este inconveniente tenemos varias formas de darle solución. Al desarrollar un programa para un cliente lleno de estos objetos tuvimos que mejorar el diseño y la forma de trabajarlo para minimizar tiempos es su diseño en donde mostrabamos este objeto.

Lo que les presento es una alternativa de salir de este inconveniente mediandte algunas

En este oportunidad lo que les mostrare primero es un repaso de las principales caracteristicas que este control
proporciona con la finalidad de conseguir una presentación adecuada y que sea sugestivo para los usuarios.

La Clase Estilos del DatagrifdView.

Un estilo de un datagridview es un objeto derivado de la clase DataGridViewCellStyle,
que contiene todas las propiedades relacionadas con la forma de presentacion de los datos tales
como colores, alineación, tipo de letra, formatos actuando este como una plantilla de
presentacion de los datos. Aqui las principales propiedades:

Para definiir los estilos de undatagriview, hay que tener en cuenta que el datagridview se
divide en regiones para la aplicación de estilos, en la siguiente imagen se puede ver las
regiuones con sus respectivos nombre para ser asignados.

La aplicación de estilos es por prioridad de asignación, estas propiedas reciben la instancia de un estilo
ya configurado mediante la clase, DataGridViewCellStyle, veamos la definicion de las regiones:

Region DefaultCellStyle: Sirve para definir un estilo para todas las celdas del datagridview.

Region ColumnHeadersDefaultCellStyle: Sirve para definir un estilo a la cabecera del datagridview.

Region DataGridView.Columns("Namel").DefaultCellStyle :
De esta forma establecemos el estilo para una determina columna de un datagriview, al cual hay que asignarle
el numero de posicvion de la columna o el nombre del campo.

Region.AlternatingRowsDefaultCellStyle: Con esto definimos el estilo para las filas alternas.

Hasta aqui quizas no sea nada nuevo, o tal vez se vera tan sencillo que solo nos hacemos idea de seleccionar
el cuadro de propiedades del datagridview seleccionar la region a la que queremos aplicar algun estilo y listo,
no con el siguiente articulo queremos ir un poco mas en optimizar las cosas en como hacerlo mejor.

La idea que queremos dar, es la de crear una clase con la aplicacion de un estilo a un datagridview
para que uds puedan expandir a otros estilos ocn solo una linea y ser mas interactivo con la aplicación.

Veamos y desarrollemos el siguiente ejemplo:

1.- Primero debemos crear el siguiente formulario con un control panel y al lado derecho colocamos un datagriview
con el nombre dg, como muestra la siguiente figura:

2.- En el load del formulario colocamos el siguiente codigo para realizar la carga de datos en el datagridview.

'Mostramos la información de Pedidos:
Try
xCon = New SqlConnection(strCon)
xCon.Open()

'Agregue los comandos necesarios:
Dim sql As String = "Select c.CustomerID 'Codigo', c.CompanyName 'Compañia', " + _
"c.Address 'Dirección', c.Phone 'Telefono', " + _
"max(o.OrderDate) as 'F. Pedido', sum(o.Freight) as 'Costo', " + _
"sum(o.ShipVia)as 'Pedidos'from customers c " + _
"inner join orders o on c.CustomerID=o.CustomerID " + _
"group by c.CustomerID, c.CompanyName, c.Address, c.Phone "

Dim ds As New DataSet("Lista")
Dim ad As New SqlDataAdapter(sql, xCon)
ad.Fill(ds, "Pedidos")

'Agregando una nueva columna para el total:
Dim dc As New DataColumn("Total")
dc.DataType = GetType(Decimal)
dc.Expression = "Costo*Pedidos"
ds.Tables("Pedidos").Columns.Add(dc)
Me.dg1.DataSource = ds.Tables("Pedidos")
'Ocultamos la muestra de los codigos:
dg1.Columns(0).Visible = False
xCon.Close()
Catch ex As Exception
MsgBox("Sucedio un error...")
End Try

Dim dgEstilo As New EstiloDataGrid(dg1)

3.- Para continuar crearemos una clase con el nombre EstiloDataGrid, el cual se muestra paso a paso que es lo que estamos haciendo para entendimiento de todos veamos y analizemos paso por paso que hacemos en cada linea:

Public Class EstiloDataGrid

'Creamos un constructor por defecto:
Public Sub New()
End Sub
'Creamos un constructo para ejecutar la funcion EstiloSimple:
Public Sub New(ByVal dg As DataGridView)
EstiloSimple(dg)
End Sub

'Creamos una función para generar un estilo del DataGrifView
Public Function EstiloSimple(ByVal dg As DataGridView)

'1.- Configuraciones basicas, para el datagriview:
' Establecemos que se seleccione por fila
dg.SelectionMode = DataGridViewSelectionMode.FullRowSelect
' Con esta propiedad se maneja como se muestran las celdas en tamaño con respecto al contenido
dg.AutoSizeRowsMode = DataGridViewAutoSizeRowsMode.AllCellsExceptHeaders
' Desahabilitamos que se seleccione varias filas, solo una a la vez
dg.MultiSelect = False

'2.- Creación de Estilo general para todas las celdas:
' Definimos la clase DataGridViewCellStyle, para la aplicación del primer estilo a crear
Dim styEstilo As New DataGridViewCellStyle
With styEstilo
' Establecemos el color del fondo de todas las celdas
.BackColor = Color.LightYellow
' Establecemos el color del texto de la celdas
.ForeColor = Color.DimGray
' Establecemos el tipo de fuente.
.Font = New Font("Verdana", 7, FontStyle.Regular)
' Indicamos la alineación general o por default de todas las celdas.
.Alignment = DataGridViewContentAlignment.MiddleLeft
' Para valores nulos, no se mostra la palabra "NULL", sino la que indiquemos aca
.NullValue = "--"
' Color de fondo cuando esta celda este seleccionada
.SelectionBackColor = Color.Khaki
' Color del texto cuando esta celda este seleccionada
.SelectionForeColor = Color.Black
' Para dividir el texto a mostrar
.WrapMode = DataGridViewTriState.False
End With
'Aplicamos el estilo creado:
dg.DefaultCellStyle = styEstilo


'3.- Estilo a la cabecera
Dim styEstiloHeader As New DataGridViewCellStyle
With styEstiloHeader
.BackColor = Color.DarkGoldenrod
.ForeColor = Color.Black
.Font = New Font("Bradley Hand ITC", 8, FontStyle.Bold)
.Alignment = DataGridViewContentAlignment.BottomRight
End With
' Aplicamos el estilo creado a la cabecera:
dg.ColumnHeadersDefaultCellStyle = styEstiloHeader

'---- Aca crearemos varios estilos pero por tipo de datos, para ser identificado en el Datagridview y su aplicacion:
'4.- Definiendo formato por tipo de datos:
' Para tipo Texto:
Dim styleTexto As New DataGridViewCellStyle
With styleTexto
.Alignment = DataGridViewContentAlignment.MiddleLeft
.WrapMode = DataGridViewTriState.False
End With

' Para el tipo Fecha:
Dim styleFEcha As New DataGridViewCellStyle
With styleFEcha
.Format = "dd/MM/yyyy"
.NullValue = "Sin Fecha"
.Alignment = DataGridViewContentAlignment.MiddleRight
End With

'Para tipo Numericos:
Dim styleInt As New DataGridViewCellStyle
With styleInt
.NullValue = "0"
.Alignment = DataGridViewContentAlignment.MiddleRight
End With

'Para tipo Decimales:
Dim styleDec As New DataGridViewCellStyle
With styleDec
.Format = "#,#.#0"
.Alignment = DataGridViewContentAlignment.MiddleRight
End With


' Comenzaremos recorriendo todas las columnas
For Each dgColumn As DataGridViewColumn In dg.Columns

' Por cada columna preguntamos si es del tipo string
If dgColumn.ValueType Is GetType(String) Then
' Aplicamos a esta columna el estilo texto
dgColumn.DefaultCellStyle = styleTexto
End If

' Preguntamos si es del tipo Fecha
If dgColumn.ValueType Is GetType(DateTime) Then
' Aplicamos a esta columna el estilo Fecha
dgColumn.DefaultCellStyle = styleFEcha
dgColumn.AutoSizeMode = DataGridViewAutoSizeColumnMode.DisplayedCells
End If

' Preguntamos si es del tipo numerico
If dgColumn.ValueType Is GetType(Integer) Then
' Aplicamos a esta columna el estilo numerico
dgColumn.DefaultCellStyle = styleInt
End If

' Preguntamos si es del tipo decimal
If dgColumn.ValueType Is GetType(Decimal) Then
' Aplicamos a esta columna el estilo decimal
dgColumn.DefaultCellStyle = styleDec
End If

Next

'5.- Estilo a una Columna:
' Para visualizar los totalizados:
Dim styColaAlt As New DataGridViewCellStyle
With styColaAlt
.BackColor = Color.LightSeaGreen
.ForeColor = Color.FloralWhite
.Format = "#,#.#0"
.Font = New Font("Tahoma", 8, FontStyle.Bold)
.Alignment = DataGridViewContentAlignment.MiddleRight
End With

' Aplicamos el estilo creado:
dg.Columns("Total").DefaultCellStyle = styColaAlt

' Retornamo el datagridview con el estilo aplicado:
Return dg

End Function

End Class

4.- En la siguiente imagen se muestrea como quedo el datagriview con el estilo aplicado, ahora si poddemos ir creando estilos dentro de esta clase para cada caso particular y se lo podemos asignar tan solo colocando la siguiente linea:

Dim dgEstilo As New EstiloDataGrid(dg) .

Espero que les haya servido ...Saludos!!!!