TreeView Controls in VB.NET

Introduction

This is an article addressing some of the basics of working with a TreeView control; the article will address dynamically adding TreeNodes to a TreeView control, searching the nodes to find and highlight a single node or a collection of nodes matching a search term against the TreeNode's tag, text, or name properties, and manually or programmatically selecting nodes. 



Figure 1:  Searching a TreeView Control by the Text Property.



Figure 2:  Searching a TreeView Control by the Name Property.



Figure 3:  Searching a TreeView Control by the Name Property.



Figure 4:  Creating a Node with Specific Properties. 

The Solution

The application solution contains a single Windows Application project comprised; all code supplied in support of this project is contained in two form classes; one is the main form containing the TreeView and a few controls used to display node information (Figures 1, 2, and 3) and to execute searches for a specific node or group of nodes based upon a user supplied search term. The other form class (Figure 4) is used to create new nodes; within the application, this form is displayed by selecting a node from the TreeView and then selecting the "Add Node" option from the context menu.

There is nothing custom or fancy done with any of the TreeView related components in this application; it is merely a demonstration of how to work with a TreeView within the context of a Windows Forms application. 

The Code:  Form 1 - The Main Form

The main form class is a standard window form with a few controls added; the form contains a split container control; on the left hand side of the control is a TreeView controls, on the right hand side of the splitter are four group boxes; the first group box contains a set of labels and text boxes used to display information about a selected node, the remaining group boxes contain labels, text boxes, and buttons used to conduct different searches of the TreeView's node collection based on the node's text, name, or tag values.

The functionality contained in the class is broken up into several regions; the class begins with the default class declaration:

Public Class Form1

 

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As

    System.EventArgs) Handles MyBase.Load

 

        ' start off by adding a base treeview node

        Dim mainNode As New TreeNode()

        mainNode.Name = "mainNode"

        mainNode.Text = "Main"

        Me.treeView1.Nodes.Add(mainNode)

 

End Sub 

 

The form class constructor creates a main node in the TreeView control; at runtime, the user may select this node (or any child node originating form this node) to add additional nodes to the TreeView. The form class also contains a context menu; this context menu contains two options; one to add a new node, and one to delete an existing node. When a new node is requested, the application opens an instance of the New Node dialog; this dialog forces the user to set the name, text, and tag values for the new node. The tag value can be any object but in this example, the tag is limited to holding an additional string value. Once the values have been collected from the dialog, the new node is populated with the information and added to the selected node of the TreeView.

 

When a node is deleted, the selected node and all of its children are removed from the TreeView; one thing to note here is, if you are associating an object with a node through its tag; you will want to write the handler to destroy that object prior to deleting the selected node. 

 

#Region "Add and Remove Nodes"

 

Private Sub cmnuAddNode_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cmnuAddNode.Click

 

    Dim n As New Form2()

    n.ShowDialog()

    Dim nod As New TreeNode()

    nod.Name = n.NewNodeName.ToString()

    nod.Text = n.NewNodeText.ToString()

    nod.Tag = n.NewNodeTag.ToString()

    n.Close()

 

    treeView1.SelectedNode.Nodes.Add(nod)

    treeView1.SelectedNode.ExpandAll()

 

End Sub 

 

Private Sub cmnuRemoveNode_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cmnuRemoveNode.Click

 

    treeView1.SelectedNode.Remove()

 

End Sub 

 

#End Region 

 

The next region of code is used to handle TreeView events; there are only two events handled in this section; the TreeView's After Select event and the TreeView's click event. The After Select event handler is used to populate the text boxes used to display information from the selected node (its Name, Text, Tag, and Parent text properties. The find functions described later highlight all found nodes in response to a search by setting the background color of each matching node to Yellow; the click event handler for the TreeView is used to remove all such highlighting.      

 

#Region "Treeview Event Handlers"

 

Private Sub treeView1_AfterSelect(ByVal sender As System.Object, ByVal e As System.Windows.Forms.TreeViewEventArgs) Handles treeView1.AfterSelect

 

    Try

        txtName.Text = ""

        txtParentName.Text = ""

        txtText.Text = ""

        txtTag.Text = ""

 

        txtName.Text = treeView1.SelectedNode.Name.ToString()

        txtText.Text = treeView1.SelectedNode.Text.ToString()

        txtTag.Text = treeView1.SelectedNode.Tag.ToString()

        txtParentName.Text = treeView1.SelectedNode.Parent.Text.ToString()

    Catch

        'do nothing

    End Try

 

End Sub 

 

Private Sub treeView1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles treeView1.Click

 

    ClearBackColor()

 

End Sub

 

 

#End Region 

 

The next region in the class is used to find a node by its name property. The method of finding a node by its name is the only find function directly supported by the TreeView; if you want to find a node by something other than its name, you will have to write your own methods to do so. This click event handler populates an array of nodes with an array of nodes with matching names. The find method accepts to arguments; the first argument is the search term and the second is a Boolean value used to determine whether or not child nodes should also be included in the search; in this case the search term is collected from a text box on the form and the option of searching child nodes is enabled by setting the second argument to true. 

 

Once the collection of nodes is created; each matching node has its back color set to yellow so as to highlight the node in the TreeView. Prior to setting the back color of the matching nodes, all of the other nodes in the TreeView are set back to having white backgrounds by calling the Clear Back Color method.       

 

#Region "Find Node By Name"

 

Private Sub btnFindNode_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnFindNode.Click

 

    ClearBackColor()

 

    Try

        Dim tn() As TreeNode = treeView1.Nodes(0).Nodes.Find(txtNodeSearch.Text, True)

 

        Dim i As Integer = 0

 

        For i = 0 To tn.Length

            treeView1.SelectedNode = tn(i)

            treeView1.SelectedNode.BackColor = Color.Yellow

        Next i

 

    Catch

        'do nothing

    End Try

 

End Sub 

 

#End Region 

 

The next region of code is used to remove the back color from any nodes highlighting in an earlier search. This process relies on two separate methods. The first method creates an instance of a tree node collection containing all of the nodes in the form's TreeView control. Each of the nodes in the collection is passed to a second method (Clear Recursive); this second method is passed the current node. The Clear Recursive method loops through all of the nodes contained within the passed in nodes node collection and sets the back color of each of those nodes to the color white. Each node is then passed recursively back to the same Clear Recursive method where each node's node collection is processed until there are not more nodes remaining to process. In this way, each node and child node in the entire tree is processed.

 

While this process is used merely to set each node's back color to white, the same approach may be used whenever the entire tree must be processed; in fact, the remaining search methods will do just that.       

 

#Region "Remove BackColor"

 

'recursively move through the treeview nodes

'and reset backcolors to white

Private Sub ClearBackColor()

 

    Dim nodes As TreeNodeCollection

    nodes = treeView1.Nodes

    Dim n As TreeNode

 

    For Each n In nodes

        ClearRecursive(n)

    Next

 

End Sub 

 

'called by ClearBackColor function

Private Sub ClearRecursive(ByVal treeNode As TreeNode)

 

    Dim tn As TreeNode

 

    For Each tn In treeNode.Nodes

        tn.BackColor = Color.White

        ClearRecursive(tn)

    Next

 

End Sub 

 

#End Region

 

The next region of code is used to find a node or nodes with text properties matching a search expression. The form contains a group box used to set a text search term and envoke the method from a button click event handler. The button click first clears all highlighted nodes by calling the Clear Back Color method; after the nodes are all restored to white backgrounds, the handler calls the Find by Text method; this method works much like the method described for clearing the back color. The method assembles a collection of the tree view nodes and then passes each node to the recursive method. The find recursive method looks for nodes with text properties matching the search expression and, when a match is found, sets the back color to yellow.  Each processed node is passed back to the find recursive method which will continue to examine each node until all of the nodes in the tree have been evaluated. 

 

#Region "Find By Text"

 

Private Sub btnNodeTextSearch_Click(ByVal sender As System.Object, ByVal

e As System.EventArgs) Handles btnNodeTextSearch.Click

 

    ClearBackColor()

    FindByText()

 

End Sub 

 

Private Sub FindByText()

    Dim nodes As TreeNodeCollection = treeView1.Nodes

    Dim n As TreeNode

    For Each n In nodes

        FindRecursive(n)

    Next

End Sub 

 

Private Sub FindRecursive(ByVal tNode As TreeNode)

 

    Dim tn As TreeNode

    For Each tn In tNode.Nodes

 

        ' if the text properties match, color the item

        If tn.Text = Me.txtNodeTextSearch.Text Then

            tn.BackColor = Color.Yellow

        End If

 

        FindRecursive(tn)

    Next

 

End Sub

 

#End Region 

 

The next region is used to contain the methods used to find nodes by their tag value (which in this case is a string); and to highlight in yellow any matching nodes. These methods work much like the last method with the exception that the matches are determined by their tag values rather than their text values. 

 

#Region "Find By Tag"

 

Private Sub btnNodeTagSearch_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnNodeTagSearch.Click

 

    ClearBackColor()

    FindByTag()

 

End Sub 

 

Private Sub FindByTag()

    Dim nodes As TreeNodeCollection = treeView1.Nodes

    Dim n As TreeNode

    For Each n In nodes

        FindRecursiveTag(n)

    Next

End Sub 

 

Private Sub FindRecursiveTag(ByVal tNode As TreeNode)

 

    Dim tn As TreeNode

    For Each tn In tNode.Nodes

        ' if the text properties match, color the item

        If tn.Tag.ToString() = Me.txtTagSearch.Text Then

            tn.BackColor = Color.Yellow

        End If

 

        FindRecursiveTag(tn)

    Next

 

End Sub

 

#End Region 

 

End Class

 

That wraps up all of the code necessary to add and remove nodes, and to search for specific nodes based upon their name, text, or tag values. 

The Code:  Form 2 - New Node Form

The code supplied in the New Node form is used merely to capture the user supplied values used to populate a newly created node's name, text, and tag properties. The form is displayed as a dialog and appears in response to the user requesting the addition of a new node from the main form of the application. The class declaration is in the default configuration for a form class:

Public Class Form2

       

Following the class declaration, three local member variables are defined; each of which is used to store the user supplied name, text, and tag properties: 

 

Private mNewNodeName As String

Private mNewNodeText As String

Private mNewNodeTag As String

 

The next region of code is used to define three public properties used to hold the new node name, text, and tag values.  Once the user has set these values on this form, the main form collects these properties and assigns them to the new node's name, text, and tag properties.

 

#Region "Class Properties"

 

Public Property NewNodeName() As String

    Get

        Return mNewNodeName

    End Get

    Set(ByVal value As String)

        mNewNodeName = value

    End Set

End Property 

 

Public Property NewNodeText() As String

    Get

        Return mNewNodeText

    End Get

    Set(ByVal value As String)

        mNewNodeText = value

    End Set

End Property 

 

Public Property NewNodeTag() As String

    Get

        Return mNewNodeTag

    End Get

    Set(ByVal value As String)

        mNewNodeTag = value

    End Set

End Property

 

#End Region

 

This button click event handler is intended to force the user to set all three values; once each is set, the related properties are passed the correct values and the form is closed. 

 

Private Sub btnSubmit_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSubmit.Click

 

    If txtNewNodeName.Text <> String.Empty Then

        NewNodeName = txtNewNodeName.Text

    Else

        MessageBox.Show("Name the node.")

        Return

    End If

 

    If txtNewNodeText.Text <> String.Empty Then

        NewNodeText = txtNewNodeText.Text

    Else

        MessageBox.Show("Provide the new node's text")

        Return

    End If

 

    If txtTag.Text <> String.Empty Then

        NewNodeTag = txtTag.Text

    Else

        MessageBox.Show("Provide the new node's text")

        Return

    End If

 

    Me.Close()

 

End Sub

 

 

End Class 

That is all there is to it. Once this code is executed, may right click on the main node and add as many nodes and child nodes as they see fit. The user may enter in valid search expression into any of the search optons and highlight matching nodes, or the user may select nodes from the tree and read the associated name, text, tag and parent values from the selected node. 

Summary.

Naturally there are countless ways to use the TreeView control and this simple demonstration does not begin to explore the variety of options available. The sole intent of the demonstration was to provide a description of how one might add and remove nodes, obtain information from selected nodes, and search for specific nodes on the basis of the node's name, text, and tag values.