Export (0) Print
Expand All

Providing Your Own Explorer: Working with TreeView Controls

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.

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.




    Forum Explorer


    764, 564

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






    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.




    Visual Basic Express Edition


    Visual Basic IDE


    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.


    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("http://go.microsoft.com/" &
        Case "Visual Basic Express Edition"
            WebBrowser1.Navigate("http://go.microsoft.com/" &
        Case "Visual Basic IDE"
            WebBrowser1.Navigate("http://go.microsoft.com/" &
        Case "Visual Basic Language"
            WebBrowser1.Navigate("http://go.microsoft.com/" &
    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.

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

© 2014 Microsoft