C# TreeView Tutorial

You want to get started using a TreeView control in the .NET Framework and C# programming language. The TreeView control must have nodes added to it through the Nodes instance collection and can be inserted in the Visual Studio designer. It allows you to represent hierarchal text and icon data in a convenient and easy-to-deploy way.

This C# tutorial describes the TreeView control in Windows Forms.

Add nodes

First, in this tutorial we add a TreeView control to the Windows Forms Application project. To do this, open the Toolbox panel by clicking on the View and then Toolbox menu item in Visual Studio. Then, double-click on the TreeView item. You can dock the TreeView to your window so it expands to fill the entire Windows Forms program window. Now, double-click on the Form1 window in the designer so you can create the Form1_Load event. In this event handler, we will insert code to build the nodes in the TreeView control.

Windows Forms program that adds to TreeView [C#]

using System;
using System.Windows.Forms;

namespace WindowsFormsApplication23
{
    public partial class Form1 : Form
    {
	public Form1()
	{
	    InitializeComponent();
	}

	private void Form1_Load(object sender, EventArgs e)
	{
	    //
	    // This is the first node in the view.
	    //
	    TreeNode treeNode = new TreeNode("Windows");
	    treeView1.Nodes.Add(treeNode);
	    //
	    // Another node following the first node.
	    //
	    treeNode = new TreeNode("Linux");
	    treeView1.Nodes.Add(treeNode);
	    //
	    // Create two child nodes and put them in an array.
	    // ... Add the third node, and specify these as its children.
	    //
	    TreeNode node2 = new TreeNode("C#");
	    TreeNode node3 = new TreeNode("VB.NET");
	    TreeNode[] array = new TreeNode[] { node2, node3 };
	    //
	    // Final node.
	    //
	    treeNode = new TreeNode("Dot Net Perls", array);
	    treeView1.Nodes.Add(treeNode);
	}
    }
}

Instantiating new TreeNode instance. This program text shows the Form1 control and it defines the Form1_Load event. To add the Form1_Load event, double-click on the window of the program in the Visual Studio designer. The statement "treeView1.Nodes.Add(treeNode);" adds a node instance with identifier treeNode to the treeView1 instance of the TreeView that was created before we started coding.

Adding to Nodes instance property. The Nodes property on the TreeView collection is an instance property, and it returns a class reference with methods that can mutate the object model of the TreeView. You can call the Add instance method and pass it an argument of type TreeNode to add a node to the TreeView.

Using children nodes in array parameter. This program text also shows how you can create a TreeNode and specify that it has children nodes. The program uses an array creation expression to create a two-element array of TreeNode references. Then, it creates another node and specifies that array reference as the second parameter. This indicates that the nodes in the array are children nodes.

Click event handler

Next in this tutorial, we look at how you can add a double-click event handler to your TreeView program so that when the user double-clicks on an item, you can execute code based on that node. To add the MouseDoubleClick event handler, right-click the TreeView in the designer and select Properties. Then, select "MouseDoubleClick" and click twice on that entry. You are taken to the code view and can then change the method body for treeView1_MouseDoubleClick, which was generated and hooked up for you.

TreeView and double-clicking on nodes [C#]

using System;
using System.Windows.Forms;

namespace WindowsFormsApplication23
{
    public partial class Form1 : Form
    {
	public Form1()
	{
	    InitializeComponent();
	}

	private void Form1_Load(object sender, EventArgs e)
	{
	    // Insert code here. [OMIT]
	}

	private void treeView1_MouseDoubleClick(object sender, MouseEventArgs e)
	{
	    //
	    // Get the selected node.
	    //
	    TreeNode node = treeView1.SelectedNode;
	    //
	    // Render message box.
	    //
	    MessageBox.Show(string.Format("You selected: {0}", node.Text));
	}
    }
}

Using SelectedNode property. In the treeView1_MouseDoubleClick method, you can see that the SelectedNode property is accessed on the treeView1 control. This returns the selected node if a node is selected. After a double-click, a node is selected so this returns a reference to that node in the object model.

Using Text property. The treeView1_MouseDoubleClick event handler also accesses the Text instance property on the treeView1 control. This returns a reference to the string that represents the text in the TreeNode. If you double-click on the node "Linux", a MessageBox is shown with that text, as shown in the screenshot.

Incomplete: Currently, this article does not contain details on how to remove nodes from the TreeView, or how to use event handlers other than ones similar to MouseDoubleClick. However, it contains the basics of a complete tutorial.

Summary

Here we looked at the TreeView control in the Windows Forms system created by Microsoft for the .NET Framework. We used the C# programming language to develop a TreeView control, adding TreeNode references and adding children nodes as well. Next, we added an event handler to the TreeView control, which enables primitive interaction with the TreeView nodes by the user. The TreeView control is a pre-built and convenient way for representing simple hierarchal data sources in the .NET Framework.