This tutorial is part of a series: Part 1 | Part 2
As a developer I am often faced with the task of creating a tree-style file browser for navigating the file system similar to Windows Explorer. VB6 provides the DirList and FileList controls, but VB.NET does not provide a control with similar functionality, let alone a full fledged file browser control. It does however include a very nice TreeView control, and with a bit of code you can leverage this powerful control to navigate your file system similar to Windows Explorer.
The idea is pretty simple:
- Each TreeNode in the TreeView represents a file or folder in the file system.
- Each TreeNode knows the full path of the file or folder that it represents.
- Recursion is not used; nodes are populated on demand. When a directory node is expanded by the user, a TreeView event is triggered which clears and repopulates the directory node.
In the first part of this tutorial I’ll show you how to create a simple re-usable File Browser Tree Component by letting the TreeView control do most of the work. In the second part of this tutorial, I’ll show you how to add several features (icons, context menus, drag/drop, etc.) that will spice up your TreeView File Browser Component and bring it more up to par with Windows Explorer.
- Open Visual Studio and create a new project – choose the Windows Forms Control Library template.
- Your project should now contain a single class “UserControl1”.
- Add a new TreeView control to UserControl1’s design surface. Set the Dock property to Fill.
That’s pretty much all there is to designing the TreeView File Browser Component interface.
Adding Some Code
When the component is initialized, we want the TreeView to initialize its top level root node so the user has a place to start browsing through the file system. To make this happen, we need to handle UserControl1’s Load event and initialize the TreeView by populating it with a TreeNode that represents the global RootPath property. We’ll also need to define this global RootPath property so we can use it, so let’s do that first:
We need a RootPath property. Add this code to the declarations section of your UserControl1 class:
Private mRootPath As String = "C:\Windows" Property RootPath as String Get Return mRootPath End Get Set(value as String) mRootPath = value End Set End Property
Since we specified “C:\Windows” for the RootPath, this will be the first node added to the TreeView, and the starting point where the user can begin browsing the file system.
Next we’ll handle UserControl1’s Load event, where we will actually add the root node to the TreeView. Add this code to your UserControl1 class:
Private Sub UserControl1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load ' when our component is loaded, we initialize the TreeView by adding the root node Dim mRootNode as New TreeNode mRootNode.Text = RootPath mRootNode.Tag = RootPath mRootNode.Nodes.Add("*DUMMY*") TreeView1.Nodes.Add(mRootNode) End Sub
This code is pretty simple, we instantiate a new TreeNode object (line 3), then set it’s Text and Tag property to the global RootPath property that we created earlier (lines 4-5), add a dummy TreeNode as a chlid of the root TreeNode so the root TreeNode is initially expandable (line 6), and finally add the node to the TreeView (line 7).
Handling the TreeView’s BeforeExpand and BeforeCollapse events
Now for the meat & potatoes. Most of the magic happens when a user expands or collapses a node. Add this code to the UserControl1 class:
Private Sub TreeView1_BeforeCollapse(ByVal sender As Object, ByVal e As System.Windows.Forms.TreeViewCancelEventArgs) Handles TreeView1.BeforeCollapse ' clear the node that is being collapsed e.Node.Nodes.Clear() ' add a dummy TreeNode to the node being collapsed so it is expandable e.Node.Nodes.Add("*DUMMY*") End Sub Private Sub TreeView1_BeforeExpand(ByVal sender As Object, ByVal e As System.Windows.Forms.TreeViewCancelEventArgs) Handles TreeView1.BeforeExpand ' clear the expanding node so we can re-populate it, or else we end up with duplicate nodes e.Node.Nodes.Clear() ' get the directory representing this node Dim mNodeDirectory As IO.DirectoryInfo mNodeDirectory = New IO.DirectoryInfo(e.Node.Tag.ToString) ' add each subdirectory from the file system to the expanding node as a child node For Each mDirectory As IO.DirectoryInfo In mNodeDirectory.GetDirectories ' declare a child TreeNode for the next subdirectory Dim mDirectoryNode As New TreeNode ' store the full path to this directory in the child TreeNode's Tag property mDirectoryNode.Tag = mDirectory.FullName ' set the child TreeNodes's display text mDirectoryNode.Text = mDirectory.Name ' add a dummy TreeNode to this child TreeNode to make it expandable mDirectoryNode.Nodes.Add("*DUMMY*") ' add this child TreeNode to the expanding TreeNode e.Node.Nodes.Add(mDirectoryNode) Next End Sub
This is a tutorial after all and the goal is to learn from it, so you’ll have to figure out what this code does yourself 🙂 The code is well commented so you shouldn’t have a problem.
Go ahead and check out the result. Press F5 to start debugging and you will be presented with a running demo of your component:
You did it! Now all you need to do is include this Visual Studio Project as a reference in another project and your TreeView File Browser Component will appear in the Control Toolbox where you may add it to a Form. You also have the option of compiling the component as a .dll file and referencing it that way instead.
In this tutorial you learned how to create a simple reusable TreeView File Browser Component. Be sure to check out Part 2!