Visual Basic 6 Black Book
(Publisher: The Coriolis Group)
Author(s): Steven Holzner
ISBN: 1576102831
Publication Date: 08/01/98

Finally, we add a fourth node, Node4 , which is the child of Node3 :

Private Sub Form_Load()
    Dim Node1, Node2, Node3, Node4 As Node

    Set Node1 = TreeView1.Nodes.Add
    TreeView1.Nodes(1).Text = "Node 1"
    TreeView1.Nodes(1).Key = "Node 1"

    Set Node2 = TreeView1.Nodes.Add("Node 1", tvwChild, "Node 2")
    TreeView1.Nodes(2).Text = "Node 2"
    TreeView1.Nodes(2).Key = "Node 2"

    Set Node3 = TreeView1.Nodes.Add("Node 1", tvwChild, "Node 3")
    TreeView1.Nodes(3).Text = "Node 3"
    TreeView1.Nodes(3).Key = "Node 3"

    Set Node4 = TreeView1.Nodes.Add("Node 3", tvwChild, "Node 4")
    TreeView1.Nodes(4).Text = "Node 4"
    TreeView1.Nodes(4).Key = "Node 4"

End Sub

And that’s it—the result appears in Figure 16.10. Now we’re adding nodes and subnodes to a tree view control.

Figure 16.10  Nodes and subnodes in a tree view.

Adding Images To A Tree View

The Aesthetic Design Department is on the phone. About that tree view control in your program—can’t you give each node an image? All the other Windows programs seem to do that. You look around, note that the tree view Node objects have an Image property, and say, no problem.

To add an image to a node in a tree view, you just have to set its Image property to an index or key in the tree view’s associated image list control. Let’s see an example. Here, we’ll use an image list control, ImageList1 , with two images taken from the Visual Basic common\graphics\bitmaps\outline directory: closed.bmp and leaf.bmp, which we add to the image list control with the Key properties “closed” and “leaf”, respectively, as shown in Figure 16.11.

Figure 16.11  Adding images to an image list control.

Now we can add those images to the nodes in a tree view control, TreeView1 , by using the Node object’s Image property, setting that property to the Key values for the various images:

Private Sub Form_Load()
    Dim Node1, Node2, Node3, Node4 As Node

    Set Node1 = TreeView1.Nodes.Add
    TreeView1.Nodes(1).Text = "Node 1"
    TreeView1.Nodes(1).Key = "Node 1"
    TreeView1.Nodes(1).Image = "closed"

    Set Node2 = TreeView1.Nodes.Add("Node 1", tvwChild, "Node 2")
    TreeView1.Nodes(2).Text = "Node 2"
    TreeView1.Nodes(2).Key = "Node 2"
    TreeView1.Nodes(2).Image = "leaf"

    Set Node3 = TreeView1.Nodes.Add("Node 1", tvwChild, "Node 3")
    TreeView1.Nodes(3).Text = "Node 3"
    TreeView1.Nodes(3).Key = "Node 3"
    TreeView1.Nodes(3).Image = "closed"

    Set Node4 = TreeView1.Nodes.Add("Node 3", tvwChild, "Node 4")
    TreeView1.Nodes(4).Text = "Node 4"
    TreeView1.Nodes(4).Key = "Node 4"
    TreeView1.Nodes(4).Image = "leaf"

End Sub

The result appears in Figure 16.12—now we’re adding images to tree view nodes in Visual Basic.

Figure 16.12  Using images in a tree view.

However, if you take a close look at Figure 16.12, you’ll see that the folders there are closed, even when the node they represent is open. How can we change those images to an open folder when the user expands a node? For the details, see the next topic.

Expanding And Collapsing Nodes (And Setting Node Images To Match)

When the user clicks a plus or minus sign in a tree view to expand or contract a node, how can we make the node’s image match? For example, when the node is closed, we can display a closed folder image, and when expanded, an open folder image. We’ll take those images from the Visual Basic common\graphics\ bitmaps\outline directory: open.bmp and closed.bmp. Add those images to an image list, ImageList1 , now, giving them the Key properties “open” and “closed”. Next, connect the image list control to a tree view control, TreeView1 , by setting that control’s ImageList property to ImageList1.

When the user closes a node, the tree view control generates a Collapse event:

Private Sub TreeView1_Collapse(ByVal Node As ComctlLib.Node)

End Sub

In that event’s handler, we can set the node’s image to the closed folder by referring to that image by its key:

Private Sub TreeView1_Collapse(ByVal Node As ComctlLib.Node)
    Node.Image = "closed"
End Sub

Similarly, when the user expands a node, the tree view control generates an Expand event:

Private Sub TreeView1_Expand(ByVal Node As ComctlLib.Node)

End Sub

In that event’s handler, we set the node’s image to the open folder:

Private Sub TreeView1_Expand(ByVal Node As ComctlLib.Node)
    Node.Image = "open"
End Sub

That’s all it takes—now the nodes in this program display open and closed folders when they are expanded and collapsed, as shown in Figure 16.13.

Figure 16.13  Expanded and collapsed node images in a tree view.

---

TIP:  You can tell if a node is expanded or collapsed with its Expanded property.

---

Handling Tree View Node Clicks

How do you know which node in a tree view the user clicked? You can use the NodeClick event:

Private Sub TreeView1_NodeClick(ByVal Node As ComctlLib.Node)

End Sub

For example, we can display the text in the node that the user has clicked in a text box, Text1, this way:

Private Sub TreeView1_NodeClick(ByVal Node As ComctlLib.Node)
    Text1.Text = "You clicked " & Node.Text
End Sub

The result of this code appears in Figure 16.14—when the user clicks a node, the program indicates which node was clicked in the text box at the bottom. Now we’re handling tree view node clicks in Visual Basic.

Figure 16.14  Handling node clicks in a tree view.

Adding A List View To A Form

The Testing Department is calling again. When you list all files on disk in a text box in your SuperDuperTextPro program, doesn’t that text box seem pretty full? Of course, you say, there are hundreds of filenames to display. Try a list view control, they say.

To add a list view control to a form, follow these steps:

1.  Select the Project|Components menu item.

2.  Click the Controls tab in the Components dialog box that opens.

3.  Select the Windows Common Controls item.

4.  Click on OK to close the Components dialog box.

5.  The preceding steps add the List View Control tool to the toolbox. Draw a list view in the form as you want it.

6.  Set the list view’s properties, and add the code you want.