Crear Grupos en un ListView (ListViewGroup)

Como ya les dije varias veces, el listview es uno de los controles que más uso a la hora de desarrollar una aplicación en visual basic .net.

Hoy quiero mostrarles una forma de sacarle más provecho a este control y ademas dejarlo mucho más vistoso mediante la creación de grupos y la utilización de una imagen para el fondo.

para el ejemplo necesitamos: un formulario y un listview. Deberá verse como en la siguiente imagen:

Para mostrar los resultados necesitamos datos, y para ello creé un DataTable en memoria y lo llené con cuatro registros. Los campos son Nombre, Apellido, Teléfono y Localidad.

Quiero mostrar en este ejemplo un listado de personas con sus nombres, apellidos y teléfonos agrupados por localidad. Primero analiza el siguiente código, si quieres pruebalo para ver como funciona y luego te explico un par de cosas.

Dim dt As New DataTable
dt.Columns.Add("Nombre")
dt.Columns.Add("Apellido")
dt.Columns.Add("Telefono")
dt.Columns.Add("Localidad")

Dim dr As DataRow = dt.NewRow

dr("Nombre") = "Juan"
dr("Apellido") = "Perez"
dr("Telefono") = "4587-9546"
dr("Localidad") = "Morón"
dt.Rows.Add(dr)

dr = dt.NewRow
dr("Nombre") = "Marcelo"
dr("Apellido") = "Roldán"
dr("Telefono") = "7415-8945"
dr("Localidad") = "Morón"
dt.Rows.Add(dr)

dr = dt.NewRow

dr("Nombre") = "Javier"
dr("Apellido") = "Martinez"
dr("Telefono") = "4567-9654"
dr("Localidad") = "Castelar"
dt.Rows.Add(dr)

dr = dt.NewRow

dr("Nombre") = "Estevan"
dr("Apellido") = "Vazquez"
dr("Telefono") = "9452-4515"
dr("Localidad") = "Castelar"
dt.Rows.Add(dr)

ListView1.FullRowSelect = True
ListView1.MultiSelect = False

Dim grupoActual As String = String.Empty

Dim g As New ListViewGroup

For Each r As DataRow In dt.Rows

If r("Localidad").ToString <> grupoActual Then
g = New ListViewGroup(r("Localidad").ToString)
grupoActual = r("Localidad").ToString
ListView1.Groups.Add(g)
End If

Dim item As New ListViewItem("")
item.SubItems.Add(r("Nombre").ToString)
item.SubItems.Add(r("Apellido").ToString)
item.SubItems.Add(r("Telefono").ToString)
item.Group = g

ListView1.Items.Add(item)
Next

Bueno, las primeras lineas se refieren a la creación del DataTable y el llenado de datos y sobre eso no haré comentarios. Concentrémonos en la forma de llenar el listview.

Primero creo un For each para recorrer todos los registros de la tabla que tengo en memoria. Luego creo una variable de texto (grupoActual) para guardar el nombre del grupo (el ultimo que agregué al listview) y también creo un objeto ListViewGroup (g). Lo primero que hago al comenzar a recorrer los registros es asignar la localidad (que es el campo que quiero que funcione como grupo) al listview1 y guardo ese dato en la variable grupoActual para futuras comparaciones. A continuación cargo un ListViewItem como siempre a diferencia que le indico que este item pertenece al grupo “g”, agrego el item al ListView1 y listo. Al pasar por los demás registros realizará la comparación y solo creará un nuevo grupo cuando la localidad cambie.

El resultado se verá así:

Ahora para que todo se vea más lindo, recomiendo crear una imagen para el fondo. Creo que ya comenté que prefiero PhotoShop, pero puedes usar cualquier editor de imagenes para crear un JPG para usar de fondo. Ten en cuenta que no debe tener colores muy fuertes porque sino se difilcultará la lectura de los datos.

Acá te dejo una la imagen que uso en el ejemplo:

Para usarla simplemente desde las propiedades del listview, busca la propiedad BackgroundImage y agrega ahí la imagen tal como se muestra a continuación:

y también tienes que cambiar la propiedad BackgroundImageTiled a True y listo. Les muestro el resultado final:

Eso es todo, espero que les sirva.