Posted on June 3, 2010 by Perry under Blog, Programming Tutorials, Software Development
Windows Explorer's familiar tree navigation.
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:
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:
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:
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 !