Share via

Providing Your Own Explorer: Working with TreeView Controls

  • Article

You can design an application interface so that it functions like Windows Explorer by using a TreeView control. The left side of the interface can display a hierarchy of nodes (similar to a Windows directory that branches from parent folders to child folders), and the right side can display the items associated with the nodes. For example, you can add a TreeView control that displays a node for each Visual Basic Forum Web page. When the user selects a node, you can display the corresponding Web page in a WebBrowser control.

There are three types of nodes: parent nodes, child nodes, and the root node. The node at the top of the hierarchy is known as the root node. Any node that has one or more nodes directly below it in the hierarchy is considered a parent node. The nodes that appear directly below another node in the hierarchy are considered child nodes. When you add a child node, the parent node automatically becomes collapsible and expandable.

Try It!

To create an Explorer

  1. On the File menu, click New Project.

    The New Project dialog box appears.

  2. Click Windows Forms Application and then click OK.

  3. Click the form and change the following properties in the Properties window.

    Property

    Value

    Text

    Forum Explorer

    Size

    764, 564

  4. Add a TreeView control to the form, and then change the following properties in the Properties window.

    Property

    Value

    Dock

    Left

    Size

    190, 530

  5. Click the Nodes property and then click the ellipsis button (...) next to it to open the Tree Node Editor.

  6. Click Add Root in the Tree Node Editor, and then change the Text property of the root node to Visual Basic Forums.

  7. Click Add Child three times to add three child nodes to the root note, and then change the Text property for each node as shown in the following table.

    Node

    Value

    Node1

    Visual Basic Express Edition

    Node2

    Visual Basic IDE

    Node3

    Visual Basic Language

  8. Click OK.

  9. Add a WebBrowser control to the form.

    By default, the WebBrowser control fills the remaining space on the form.

  10. Double-click the TreeView control to enter the default event handler in the Code Editor.

  11. Add the following code to the TreeView1_AfterSelect event handler. This code determines the text of the selected node and then displays the corresponding Web page in the WebBrowser control.

    Note

    This example uses a forward link, a link that uses a URL redirection system that Microsoft uses to prevent outdated links, but you can also use the URL of the Web page that you want to display.

    Select Case e.Node.Text
    Case "Visual Basic Forums"
        WebBrowser1.Navigate("https://go.microsoft.com/" &
             "fwlink/?LinkID=82999")
    Case "Visual Basic Express Edition"
        WebBrowser1.Navigate("https://go.microsoft.com/" &
             "fwlink/?LinkID=82994")
    Case "Visual Basic IDE"
        WebBrowser1.Navigate("https://go.microsoft.com/" &
             "fwlink/?LinkID=82996")
    Case "Visual Basic Language"
        WebBrowser1.Navigate("https://go.microsoft.com/" &
             "fwlink/?LinkID=82997")
End Select

  12. Press F5 to run the program.

    When the form appears, the main forum Web page for Visual Basic is displayed.

  13. Click the plus sign (+) next to the root node and then click the child nodes to view the corresponding Web pages.

Next Steps

In this lesson, you learned how to use a TreeView control to create an application that functions like Windows Explorer.

In the next section, you will optionally learn another way to create the visual look of a Windows-based application by using Windows Presentation Foundation (WPF). If you want to skip that section, you can go to the lesson What Went Wrong? Finding and Fixing Errors Through Debugging and learn how to use the Visual Basic tools to find and fix errors (typically called bugs) in a program.

Next Lesson: Creating the Visual Look of Your Program: Introduction to Windows Presentation Foundation

See Also

Reference

TreeView Control Overview (Windows Forms)

Other Resources

Creating the Visual Look of Your Program: Introduction to Windows Forms