C# TreeView Tutorial

TreeView displays text and icon data.

It must have nodes added to it through the Nodes instance collection. It can be inserted in the Visual Studio designer. It represents hierarchical text and icon data in a convenient way.

Info: A TreeView control is also available in WPF (Windows Presentation Foundation).

TreeView

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. Double-click on the TreeView item.

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 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.

Note: The statement "treeView1.Nodes.Add(treeNode)" adds a node instance to the treeView1 instance of the TreeView that exists.

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.

Tip: You can call the Add instance method and pass it an argument of type TreeNode to add a node to the TreeView.

Also, this program shows how to create a TreeNode and specify that it has children nodes. It 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. The nodes in the array are children nodes.

Arrays

Click. Next in this tutorial, we look at how you can add a double-click event handler to your TreeView program. This means that when the user double-clicks on an item, you can execute code based on that node.

Tip: 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 automatically hooked up.

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.

And: 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.

Tip: If you double-click on the node "Linux", a MessageBox is shown with that text.

MessageBox.Show

Summary. We used the TreeView control in Windows Forms. We added TreeNode references and children nodes. Next, we added an event handler to the TreeView control, which enables primitive interaction with the TreeView nodes by the user.

Overview: The TreeView control is a prebuilt and convenient way for representing simple hierarchical data sources in the .NET Framework.

Related Links