TreeView Control in C#

ListViewControl

ListViewControl

The folder list pane that you see in a Windows Explorer is called TreeViewControl. In C#, its really easy to use these controls. There are loads of facilities provided by this control. Some of them are really great. In this post, I will try to explain some of the basics of this control.

Adding a TreeViewControl

To add a TreeView control, just double click on the TreeView control from the Tools window or add the snippet,

TreeView myTreeView = new TreeView();
this.Controls.Add(myTreeView);  //adding the control to the presentation form

Adding a Node

Nodes are the items that you can find in a tree view control. This is the tricky part. You can have a node, that has another node, that has one more node, and so on. Just like the files and folders inside another folder. To add a node, the control has got, Nodes.Add() method. This is a overloaded method and it has loads of overloaded parameters. For example, you can have a string as a parameter to this method to add a node.

myTreeView.Nodes.Add("foo");  //will add a new node with the text foo in it

There is one more overload for Nodes.Add() (my favourite). You can add a node and also assign some kina key to it.

myTreeView.Nodes.Add("foo", "This is the foo node");  //will add a new node whoes key is foo and whoes display value is "This is the foo node"

The above mentioned way of adding a node is really handy as you can refer to the node at any time using the key. So at any time, when  you query myTreeView.Nodes["foo"], you will get the above node. Awesome isn’t it ??

Adding child nodes

Ok. Now that we have added a parent node (rather a single node). How do we add a child node for it ?? Its really simple. Get the parent node (the node under which you wanna add the child node) and then add the new the using the Node.Add() method.

TreeNode aFooNode = myTreeView.Nodes["foo"];  //gets the node whoes key is "foo"
aFooNode.Nodes.Add("bar", "This is the bar node");  //now the key of this child node is "bar"

Or in a simple way, 

myTreeView.Nodes["foo"].Nodes.Add("bar", "This is the bar node");  //same as the previous one

You wanna add a child node to bar ??

myTreeView.Nodes["foo"].Nodes["bar"].Nodes.Add("baz", "This is the baz node");  //child for baz

Deleting a node

Removal of nodes can be done in two ways.

Using keys

myTreeView.Nodes.RemoveByKey("baz");  //removes a node whoes key is "baz"

Using nodes

TreeNode aNodeToBeRemoved = myTreeView.Nodes["baz"];  //get the node to be removed
myTreeView.Nodes.Remove(aNodeToBeRemoved);  //removed the "baz" node

Removing Collapse / Expand icons

You can even control the visibility of the collapse and expand icons. Try changing the ShowPlusMinus property to false. You will not see the Plus Minus (Collapse Expand) icons.

myTreeView.ShowPlusMinus = false;  //hides the icon

Toggling node lines

You can even control the visibillity of the node lines. If you set the property ShowLines to false, you will not see any lines (dotted lines that connect the nodes).

myTreeView.ShowLines = false;  //hides the dotted node lines

Changing the node line color

You can change the node line color using the LineColor property.

myTreeView.LineColor = Color.Blue;  //the line color will be blue from now

Changing the indent spaces

You can change the indent space of the child nodes using the Indent property.

myTreeView.Indent = 59;  //increases the indent space to 59

Adding images to nodes

This is similar to adding images to the ContextMenuStrip items. Add a ImageList control and associate the ImageList control with the TreeView control through the ImageList property. Then to put an image next to a node, while adding the node using the Nodes.Add() method, use appropriate overload to mention the image index of the image in the ImageList.

myTreeView.ImageList = myImageList;  //associating the imagelist control. Here myImageList is considered to have some images in it
myTreeView.Nodes.Add("foo", "This is the foo node", 0);  //will put the first image in the image list as the icon to the node item "foo"

Play around with the properties to discover even more interesting things and if you find something really interesting, comment it over here.

Tags: , ,

Leave a comment