TreeView with Images for beginner

Visual Basic offers a simple way to use TreeView and are compose of nodes. TreeView control is very popular to organize file or folders.

Take a look at the example image:

If you placed the TreeView1  with Visual Basic or Visual Studio 2010 the form designer, tThe example code is nothing more than this:

Me.TreeView1.Nodes.Add("all programs")         Me.TreeView1.Nodes.Item(0).Nodes.Add("Accessories")         Me.TreeView1.Nodes.Item(0).Nodes.Add("Android SDK Tools")         Me.TreeView1.Nodes.Item(0).Nodes.Add("Autodesk")         Me.TreeView1.Nodes.Item(0).Nodes.Item(0).Nodes.Add("AutoCAD 2011 English")         Me.TreeView1.Nodes.Item(0).Nodes.Add("Bently")         Me.TreeView1.Nodes.Item(0).Nodes.Add("Microsoft Office")

See how simple is the code. Each TreeView are composed of a single Node, but Node is plural (read as Nodes). But is not the Node you must be interested, is the items because it acts like a collection. That way, you will never mess up between the Nodes levels.

Try to use the indexes to help you navigate in the treeview. You don’t need “set” a new object node each time you need to manipulate a item in the treeview. That is because Visual Basic has overridden all the methods of that collection so you could easily deal with any items in your Treeview.

Adding an image in your TreeView

I want to present the TreeView with the simplest way. So I will present it the simplest way possible. If you like my post, wait until I write something a little more interesting. Again, always the simplest way.

You have to create an ImageList. Is not important where you create the ImageList as long you could put it in your TreeView1.

Dim ImageList1 As ImageList         ImageList1 = New ImageList         ImageList1.Images.Add("Explorer", _                               System.Drawing.Icon.ExtractAssociatedIcon("c:\Windows\explorer.exe"))         ImageList1.Images.Add("Regedit", _                               System.Drawing.Icon.ExtractAssociatedIcon("c:\Windows\regedit.exe"))         Me.TreeView1.ImageList = ImageList1

Ok, first line, declare ImageList1 as an ImageList

Second Line, call the constructor.

Third line, OK. Listen to me. I extracted the icon from a file and put it in the ImageList1 with a Key String. I did it twice. One from the file explorer and one from the regedit. OK?

Finally, I put the ImageList1 in the TreeView1.

Here is what your code might look like:

Private Sub Fill_TreeView()         'Throw New NotImplementedException         Dim ImageList1 As ImageList         ImageList1 = New ImageList         ImageList1.Images.Add("Explorer", _                               System.Drawing.Icon.ExtractAssociatedIcon("c:\Windows\explorer.exe"))         ImageList1.Images.Add("Regedit", _                               System.Drawing.Icon.ExtractAssociatedIcon("c:\Windows\regedit.exe"))         Me.TreeView1.ImageList = ImageList1         Me.TreeView1.Nodes.Add("all programs", "all programs", "Explorer")         Me.TreeView1.Nodes.Item(0).Nodes.Add("Accessories")         Me.TreeView1.Nodes.Item(0).Nodes.Add("Android SDK Tools")         Me.TreeView1.Nodes.Item(0).Nodes.Add("Autodesk")         Me.TreeView1.Nodes.Item(0).Nodes.Item(0).Nodes.Add("AutoCAD 2011 English")         Me.TreeView1.Nodes.Item(0).Nodes.Add("Bently")         Me.TreeView1.Nodes.Item(0).Nodes.Add("Microsoft Office", "Microsoft Office", "Regedit")         Me.TreeView1.Nodes.Item(0).Nodes.Add("Explorer")         'select the Node to change icon         Me.TreeView1.Nodes.Item(0).Nodes.Add("Animate icon", "Animate icone", "Regedit", "Explorer")     End Sub

I know we could improve the code. But I am sure you see what is going on.

Unfortunately, to use the image from the imageList1, there is one problem. You don’t have a lot of methods available for the Add Node. You only have 5 add with very basic arguments.

To be able to associate an image to a Node Item, you need to put a Key String for the Node Item even if you don’t need it. So yes, is kind of stupid. Even worst, it crash when you tries to put the same Nodes.Item Key in the same TreeView. (well it was dam true in VB6 and I bet Microsoft never improve the TreeView).

That is the reason why I put 2 times Microsoft Office for the first 2 arguments to be able to put “RegEdit” in the 3^rd one. That 3^rd argument is the Key String in the ImageList1.

Also note if you haven’t associated any icon to a Node item, then it will simply pick the first image from the ImageList1.

Take a look at the Example:

Other topics good to read: Extract icon from file

Windows 8 Search Box with UserControl

Customize you TreeView with Images for beginner

References:

my web site: Check Technologies official website

The program I love to use, buy it: Visual Studio 2010 Professional (Old Version)

Posted by bandrux

Tweet