Important alert: (current site time 8/29/2014 1:45:39 PM EDT)
 

article

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

Email
Submitted on: 11/23/2002 2:53:26 PM
By: Jon Barker  
Level: Beginner
User Rating: By 34 Users
Compatibility: VB.NET
Views: 184895
(About the author)
 
     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

 
 
Terms of Agreement:   
By using this article, you agree to the following terms...   
  1. You may use this article in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
  2. You MAY NOT redistribute this article (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.   
  3. You may link to this article from another website, but ONLY if it is not wrapped in a frame. 
  4. You will abide by any additional copyright restrictions which the author may have placed in the article or article's description.
				






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

 
Terms of Agreement:   
By using this article, you agree to the following terms...   
  1. You may use this article in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
  2. You MAY NOT redistribute this article (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.   
  3. You may link to this article from another website, but ONLY if it is not wrapped in a frame. 
  4. You will abide by any additional copyright restrictions which the author may have placed in the article or article's description.


Other 14 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

2/20/2003 12:42:39 AMVBGOD

Clean tutorial
(If this comment was disrespectful, please report it.)

 
8/5/2003 2:55:49 AM

I'm not sure this is the author's fault; it may be with the planet source code software; but this page is way wider than a huge explorer window, and the text doesn't wrap at all.
(If this comment was disrespectful, please report it.)

 
9/17/2003 1:36:04 PMsdmcnitt

says BEGINNER TREEVIEW TUTORIAL
but is BEGINNER *LISTVIEW* TUTORIAL
(If this comment was disrespectful, please report it.)

 
10/22/2003 12:43:11 PMChris Pietschmann, MCSD, MCAD

Short, Clean, and Great. This answered my question about adding columns to the treeview in one minute. Thanks
(If this comment was disrespectful, please report it.)

 
1/25/2004 3:33:58 PM

Certainly helped me get to grips with the listview in C#.

Thanks
(If this comment was disrespectful, please report it.)

 
2/29/2004 12:25:09 AMJayStacey

very well presented and quite informative on the changes on Dim lSingleItem As ListViewItem from 6 to .NET, very nice
(If this comment was disrespectful, please report it.)

 
4/6/2004 1:33:23 AMl

sorry men your turtorial (this and the string manipultion) are good, but it wont work to show the icons in the listviews (i downloaded your sources too and they wont work there too). i searchted the problem but i didnt found the problem yet :( i use the ListView.Details style. maybe u have a idea ?
(If this comment was disrespectful, please report it.)

 
8/25/2004 6:59:39 AMChristian V

This is really helpful code! I am used to VB6, and I have just started .NET! And this has helped me alot! Thanks for sharing! Cya!
(If this comment was disrespectful, please report it.)

 
4/11/2005 5:24:54 PM

Something Not Right In Vs 2003, if you attempt to add the second subitem it will throw the following,
'System.Reflection.AmbiguousMatchException' occurred in microsoft.visualbasic.dll

Additional information: No accessible overloaded 'ListViewSubItemCollection.Add' is most specific for these arguments:
Public Function Add ( ByVal item As System.Windows.Forms.ListViewItem+ListViewSubItem ) As System.Windows.Forms.ListViewItem+ListViewSubItem
Public Function Add ( ByVal text As String ) As System.Windows.Forms.ListViewItem+ListViewSubItem
any ideas?

(If this comment was disrespectful, please report it.)

 
6/13/2006 7:01:40 AMWeedkid

Very good! Helped me a lot... but.. how can i sort them by columns, when i click one of them ?
(If this comment was disrespectful, please report it.)

 
6/16/2006 5:59:47 AMbinh filth

good job!! it help me a lot... thanks so much
(If this comment was disrespectful, please report it.)

 
9/1/2006 6:59:24 AMue

it's a good job, thanks!!!
(If this comment was disrespectful, please report it.)

 
9/1/2006 11:37:00 PMmajaz khab

This is Very good tutorial but can you help this tutor with C#.Net
(If this comment was disrespectful, please report it.)

 
2/28/2007 12:34:45 AMamit

it was good
(If this comment was disrespectful, please report it.)

 
7/5/2007 1:41:55 AMShree

Well done

(If this comment was disrespectful, please report it.)

 
12/19/2007 12:50:36 AMalik6117

Very good tutorial, it helped me a lot now that I migrated to .Net. Also, it is true that this browser window is way wide, i have 1280 resolution and still have to scroll horizontally to keep reading the articles! mmm...
(If this comment was disrespectful, please report it.)

 
6/30/2008 2:50:01 AMarnab

Thanks! It's a nice Concept,it helps me a lot for my own project.
(If this comment was disrespectful, please report it.)

 
1/2/2009 2:05:46 AMsumit

sumit
(If this comment was disrespectful, please report it.)

 
5/11/2009 10:50:19 AMSunil Kumar N

Hi All,
Really this website helps you all :).
(If this comment was disrespectful, please report it.)

 
12/1/2009 4:42:21 PMMarijan Ivicevic - Bakulic

Really refreshing !
(If this comment was disrespectful, please report it.)

 
12/15/2010 9:19:53 AMAbdul mannan

Check this useful link for ListView Control

http://www.mindstick.com/Articles/5924b883-0b28-4812-aee0-c097c3dc9832/?L istView
Control in VB.Net
(If this comment was disrespectful, please report it.)

 

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.