article

_ Beginners Listview LVW tutorial: Various difernt views, add items WITH ICONS, spreadsheet style! _

Email
Submitted on: 1/1/2015 12:20:00 PM
By: Jon Barker (from psc cd)  
Level: Beginner
User Rating: By 34 Users
Compatibility: VB.NET
Views: 412
 
     BEGINNER TREEVIEW TUTORIAL how to use the treeview and add items with icons to the treeview. + Spreadsheet view etc. First release, update with properties, events etc coming soon. Source code examples included

This article has accompanying files

 
				






ListView Tutorial





Using the VB.NET ListView Control

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)

winzip iconDownload article

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. Afterdownloading it, you will need a program like Winzip to decompress it.Virus note:All files are scanned once-a-day by Planet Source Code for viruses, but new viruses come out every day, so no prevention program can catch 100% of them. For your own safety, please:
  1. Re-scan downloaded files using your personal virus checker before using it.
  2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

If you don't have a virus scanner, you can get one at many places on the net including:McAfee.com


Other 12 submission(s) by this author

 


Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this article (in the Beginner category)?
(The article with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)
 

Other User Comments


 There are no comments on this submission.
 

Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular article, please click here instead.)
 

To post feedback, first please login.