Create Groups in a ListView (ListViewGroup)

As I said several times, the listview control is one of the most use when developing an application in visual basic. Net.

Today I want to show a way to get more out of this control and also leave a lot more attractive by creating groups and the use of a background image.

for example we need: a form and a listview. Should look like the following image:

To display the results we need data, and for that I created a DataTable in memory and filled it with four records. The fields are Name, Last Name, Phone and Location.

I want to show in this example a list of people with their names and telephone numbers grouped by location. First analyze the following code if you want to try it to see how it works and then I'll explain a few things.

 Dim dt As New DataTable
 dt.Columns.Add ("Name")
 dt.Columns.Add ("Name")
 dt.Columns.Add ("Phone")
 dt.Columns.Add ("City")

 Dim dr As DataRow = dt.NewRow

 dr ("Name") = "John"
 dr ("Name") = "Smith"
 dr ("Phone") = "4587-9546"
 dr ("Location") = "Moron"
 dt.Rows.Add (dr)

 dr = dt.NewRow
 dr ("Name") = "Marcelo"
 dr ("Name") = "Roland"
 dr ("Phone") = "7415-8945"
 dr ("Location") = "Moron"
 dt.Rows.Add (dr)

 dr = dt.NewRow

 dr ("Name") = "Javier"
 dr ("Name") = "Martinez"
 dr ("Phone") = "4567-9654"
 dr ("Location") = "Castelar"
 dt.Rows.Add (dr)

 dr = dt.NewRow

 dr ("Name") = "Estevan"
 dr ("Name") = "Vazquez"
 dr ("Phone") = "9452-4515"
 dr ("Location") = "Castelar"
 dt.Rows.Add (dr)

 ListView1.FullRowSelect = True
 ListView1.MultiSelect = False

 Dim As String = String.Empty grupoActual

 Dim g As New ListViewGroup

 For Each r As DataRow In dt.Rows

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

 Dim item As New ListViewItem ("")
 item.SubItems.Add (r ("Name"). ToString)
 item.SubItems.Add (r ("Last Name"). ToString)
 item.SubItems.Add (r ("Phone"). ToString)
 item.Group = g

 ListView1.Items.Add (item)
 Next

Well, the first lines refer to the creation of the DataTable and filling of data and it will not comment. Concentrate on how to fill the listview.

First I create a For Each loop through all the records in the table I have in memory. Then I create a text variable (grupoActual) to save the group name (the last I added the listview) and I also think an object ListViewGroup (g). The first thing I do to start down the records is to assign the site (which is the field I want to work as a group) to ListView1 and keep that data in the variable grupoActual for future comparisons. Then charge a ListViewItem as always unlike that indicated that this item belongs to the group "g", added the item to ListView1 and ready. Passing through the other records and perform the comparison only create a new group when the town changes.

The result will look like:

Now for everything look nicer, I recommend creating an image for the background. I think I mentioned that I prefer Photoshop, but you can use any image editor to create a JPG for use in the background. Note that colors should not be very strong because it is difilcultará reading the data.

Here I leave an image that I use in this example:

To use it simply from the properties of the listview, find the BackgroundImage and then add the image as shown below:

and you also have to change the property to True and ready BackgroundImageTiled. I show the final result:

That's it, I hope they serve.