Stage 1 - Adding items to the ListView, and the  various different views available.

The ListView control can be used to display a list of icons in your program, similar to the explorer file view, or a list of data in the form of a table, with icons at the side.

Abbreviation: When naming controls, you name them xxxYyyy, where x is the abbreviated control type, and y is a one word description of what the control is for.  For the ListView, 'lvw' is the abbreviation. Therefore, in the examples below I will be referring to the ListView as lvwTest. (Naming controls is a good practice to get into, since when looking through your code the lvwTest_Click event is far easier to find than Listview23_Click between all the other similar named controls!)

The code for each example can be downloaded near the bottom of the page, at the normal Planet-Source-Code download-code link

Example 1: Filling the ListView control with 3 different items, in view1: LargeIcon

• Add a ListView control to the form you are working on
• Call it lvwTest

Picture of finished item:

This was achieved with the following code in the Form_Load event.

Private Sub frmLVWTest_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        lvwTest.View = View.LargeIcon         'Set the display type of the ListView.  In this example, we want the LargeIcon display (1)
        lvwTest.Items.Add("Item 1")           'Add each item to the ListView. Look at the picture above to see how each item turns out
        lvwTest.Items.Add("Item 22")
        lvwTest.Items.Add("Item 333")
    End Sub
    

You can see here that I'm adding 3 items to the ListView, with the captions 'Item 1', 'Item 22' and 'Item 333'.  These are the values that are displayed and can be clicked on when the program is executed. You could also try adding more items to the ListView, by copying the line, and changing the item caption.

Certainly not very impressive, but this was just with 4 lines of code!

Example 2: Adding 32x32 icons to the ListView in view1

• Add a ListView control to the form you are working on
• Call it lvwTest
• Add an ImageList to the form
• Call it 'imgIcons'
• Set the 'Width' and 'Height' properties to 32
• Add any 3 icons to the ImageList by clicking on it and hitting the '...' button on the 'Images' property of the control. Now press the 'Add' button to find an icon

Picture of finished item:

We can spruce the previous ListView example up by attaching icons to the items in the ListView, by changing the code in the Form_Load event

Private Sub frmLVWTest_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        lvwTest.View = View.LargeIcon         'Set the display type of the ListView.  In this example, we want the LargeIcon display (1)
        lvwTest.LargeImageList = imgIcons     'Tell the ListView which ImageList to obtain its icons from
        lvwTest.Items.Add("Item 1", 0)         'Add each item to the ListView. The number determines the icon to use by its index.
        lvwTest.Items.Add("Item 22", 1)
        lvwTest.Items.Add("Item 333", 2)
    End Sub
    

Here, we are instructing each ListItem to pull an icon from the ImageList by its index.  We have 3 icons in the ImageList, so they are numbered 0, 1 and 2.  Note that I've added the extra line 2nd from the top to tell the ListView which ImageList to look in for its icons.

Another thing to try is using 16x16 icons.  For this, make sure you set the ImageList, imgIcons 'Height' and 'Width' properties to 16. You will have to delete and re-add the icons to the ImageList when changing the size. Now you have to tell the ListView where to get the small icons, and to switch to small icon view.

Simply use this code in place of the first two lines of the previous code:

    lvwTest.View = View.List		'Sets the display type to List them in a straight line downwards
        lvwTest.SmallImageList = imgIcons
    

OR

    lvwTest.View = View.SmallIcons	'Tells the ListView to list items across itself
        lvwTest.SmallImageList = imgIcons
    

When you now run the program, you should see the following:

   OR  

Example 3: The ListView in style2: Details

• Add a ListView control to the form you are working on
• Call it lvwTest
• Add an ImageList to the form
• Call it 'imgIcons'
• Set the 'Width' and 'Height' properties to 16
• Add any 3 icons to the ImageList by clicking on it and hitting the '...' button on the 'Images' property of the control. Now press the 'Add' button to find an icon

In my opinion, this is the most useful mode of the ListView.  It is similar to a spreadsheet layout with its multiple columns and lines

Picture of finished result:

The code here is slightly more complex, mainly because there is more of it.  If you examine it closely, it is the same thing repeated 3 times, for each of the columns or items.

Private Sub frmLVWTest_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    lvwTest.View = View.Details		'Sets the ListView to display items with columns, as seen in the picture above
    lvwTest.SmallImageList = imgIcons	'Sets the ImageList that will be used to get the small icons on the first column
     
     'The following three lines of code create the columns in the picture (A, B and C). 
     'You can also change the width of the columns by changing the '100' to a different value. 
     'The alignment can also be changed, to be right or centre aligned.
    lvwTest.Columns.Add("Column A", 100, HorizontalAlignment.Left)
    lvwTest.Columns.Add("Column B", 100, HorizontalAlignment.Left)
    lvwTest.Columns.Add("Column C", 100, HorizontalAlignment.Left)
     
    Dim lSingleItem As ListViewItem 	'The variable will hold the ListItem information so that you can add values to the column you want to change
     
    lSingleItem = lvwTest.Items.Add("Item 1", 0)		'Create a new line, and assign the ListItem into the variable so we can add sub items
    lSingleItem.SubItems.Add("Subitem XXY")		'The first sub item for the first line
    lSingleItem.SubItems.Add("Subitem ZZY")		'The second sub item for the first line
     
    lSingleItem = lvwTest.Items.Add("Item 22", 1)		'Create another line. Same as previous new line code, but with different icon number and caption
    lSingleItem.SubItems.Add("Subitem CCA")		'The first sub item for the second line
    lSingleItem.SubItems.Add("Subitem DDA")
     
    lSingleItem = lvwTest.Items.Add("Item 333", 2)
    lSingleItem.SubItems.Add("Subitem TTG")
    lSingleItem.SubItems.Add("Subitem HHG")		'The second sub item for the third line
    End Sub
    

Thanks for reading... hope it helped! :-D

I realize this doesn't cover the events of the ListView, such as Click, DoubleClick, MouseOver etc or the properties of an item (lvwTest.SelectedItem.Caption) etc.  These will be addressed when the tutorial is updated!

Don't forget to check out my string manipulation tutorial and VOTE IF YOU THINK I DID A GOOD JOB!

TreeView Tutorial coming as soon as I can be bothered!

(thanks to VBnet4Apps for the CSS)