Over Reaction To: A Simple WPF Explorer Tree

Sacha Barber recently posted an article to CodeProject titled A Simple WPF Explorer Tree. The article shows how to lazy-load the TreeView control with the directory structure on your machine. It is a nice gentle intro to lazy-loading the WPF TreeView, and I highly recommend checking it out.

In response to Sacha’s article Josh Smith made a few minor enhancements and posted his article Reaction to: A Simple WPF Explorer Tree. 

I had sent a few suggestions to Josh on his article which got me thinking about a XAML only solution.  I tried but couldn’t get one piece working just using XAML so I caved and added a value converter to my solution.

My solution uses the HierarchicalDataTemplate to do the heavy lifting.

XAML Code
XAML Code

Sorry about the compacted code here, just need to do this for the blog entry, the project is not compressed like this.

If you have yet to learn about the HeirachicalDataTemplate, this is going to be your day!  This is a super awesome WPF feature.  After you get an understanding you will find all sorts of practical applications in your “real world projects.”

We will start at the bottom of the code listing with the Grid object since everything is driven from its DataContext. 

The DataContext property has been set to the getDrives resource.  This returns a collection of DriveInfo objects.

The TreeView uses the Grid’s DataContext and starts adding TreeViewItems to itself.  For each DriveInfo object in the DataContext, one TreeViewItem will be created.  When the TreeView adds an item  of type DriveInfo, it will use the HierachicalDataTemplate that has the DataType set to DriveInfo.  The template creates a TreeViewItem with an Image and TextBlock control.  The Image Source is diskdrive.png and the TextBlock Text is the drive name.  Still with me, OK.

The Magic Begins

The HierachicalDataTemplate has its own items collection.  Notice the ItemsSource property that is bound to the results of the call to the GetFileSystemInformationConverter.  That super simple code is below.  When the converter is called, the DriveInfo object from the Grid’s DataContext is passed to it and the converter returns a collection of DirectoryInfo objects.

What the HierarchicalDataTemplate does is recursively call itself, this time it passes the DirectoryInfo object to itself.

When the TreeView goes to create at the new TreeViewItem, it’s being passed the DirectoryInfo object instead of the DriveInfo object which causes a different HierachicalDataTemplate to be used.  That other template displays a folder image instead of a drive image. 

What is really super cool, is that the HierachicalDataTemplate does lazy loading.  Meaning, it only loads directory information when the TreeView calls for it.

Code
Code

Based on the type of object that value is, I select the proper function to call and return information.

Extending 

Since I used DriveInfo and DirectoryInfo objects, you can very easily extend this program to include the files also.  Since you are using these rich objects you have full access to their information and can display it just like Explorer does if you want to.  If you add the ability to view the files, just make sure you update the value converter code to get file information.

Download Project Code Here  After downloading, you MUST changed the extension to .zip.

Hope you like the program.

Just a grain of sand on the worlds beaches.

Comments are closed.

Follow

Get every new post delivered to your Inbox.

Join 248 other followers