Adding Nodes to a TreeView in C# .NET

 

To add Nodes to the TreeView, click the TreeView to select it. Then locate the Nodes property in the properties area:

Click the button with the three dots in it, just to the right of Collection. You'll then see the TreeNode Editor dialogue box appear:

There are two types of Nodes you can Add - a Root Node and a Child Node. Click the Add Root button:

Now locate the Name property on the right and change it to root1. Locate the Text property and change it from Node0 to Technical. This will serve as a heading for our first Root Node. Your TreeNode Editor will then look like this:

With the Technical Node selected, click the Add Child button. This will place a Node under Technical, which is a Root Node.

What we're trying to do here is to set up a list of Tree Items. Each item will be associated with a web page. When you click a Child Node on the left, its web page will appear in the browser on the right.

So with the new Child Node selected, notice that the Name property has a default of Node1. You can leave it like this. Locate the Text property and change it to Home and Learn. Locate the Tag property, and type the following web address:

http://homeandlearn.co.uk

Your Editor will then look like this:

Click back on Technical. Now click the Add Child button again. You'll see a new Node appear under Home and Learn. Set the following properties for it (you can use web sites of your own, if you prefer):

With a second web site added, click back on Technical again. Click the Add Child button to add a New Node under Technical. Set the following properties:

Your Editor should look like this, when you're done:

We can add a second Root Node as well. So click the Add Root button. Change the Text property of the new Root Node to Search Engines. Change the Name property to root2. Your Editor will look like this:

Using the same techniques as above, add a few Child Nodes under Search Engines. Set the following properties:

Your Editor should then look like this:

Click OK on the Editor and you'll be returned to your Form. Run your Form and see what it looks like. It should be something like this:

Click the plus/minus symbols to expand and collapse your Tree. Close the form and return to your C# software.

The Nodes on the Tree don't actually do anything, at the moment. We'll fix that soon. First, it's time to add the Web Browser.

 

<-- TreeView | Adding a WebBrowser to a Windows Form in C# -->

<--Back to the C# .NET Contents Page

View all our Home Study Computer Courses