While working on one of my projects, I had to implement a control for displaying file system. I found pretty good articles over the web (“A Simple WPF Explorer Tree” by Sacha Barber and some replies to it), but they were all about displaying folders.
- Wpf Treeview Binding Dictionary
- Wpf Treeview Itemssource
- Wpf Treeview Binding Example
- Wpf Treeview Binding Isexpanded
Bind RadTreeView ImageSource Properties RadTreeView API gives you the ability to define images for each item state (default, expanded and selected). For more information, take. The TreeView binds to XML data that represents the employees in a company. Each Employee element can contain other Employee elements to indicate who reports to whom. Because the data is recursive, the HierarchicalDataTemplate can be applied to each level.
It was pretty easy to track currently selected folder, but there were some issues with its dynamic changes. So I decided to build my own control from scratch that will have some property like SelectedPath that will allow you to use TwoWay bindings to get and set selected folder at the tree.
When user selects a node from the TreeView, text in the address bar is updated. When user enters address and clicks Update, TreeView selection gets updated. I have started with a simple CustomControl and inherited it from WPF TreeView:
We will use some lazy-loading techniques to fill our TreeView with data. When control is loaded, it will display only drives on the user machine. Let’s write a method for creating initial drive nodes:
GenerateDriveNode method takes DriveInfo argument and builds TreeViewItem for it. Note that we are adding a dummy child node (the one with ‘the star’ header text). If we don’t do this, then the user will not see a small button for expanding/collapsing for generated tree view item (it may look like ‘+’ character that is replaced with ‘-‘ when the node is expanded or like an arrow that changes it direction).
InitExplorer method is pretty straight-forward. It just enumerates all the drives and populates Items collection with corresponding TreeViewItems.
Now we just have to handle TreeViewItem.ExpandedEvent to react to user interaction. When node is expanded, it will display all the sub-folders of the selected folder.
Put this line to control constructor:
AddHandler(TreeViewItem.ExpandedEvent, new RoutedEventHandler(OnItemExpanded));
Then create OnItemExpanded handler
*GenerateDirectoryNode *method will look like
Wpf Treeview Binding Dictionary
Everything was rather simple so far. Now lets move towards the more complex stuff. We have to synchronize our tree view selection state and SelectedPath value. I created 2 helper methods for accessing and changing current tree view item selection (GetSelectedPath and SetSelectedPath).
I have to make some remarks here:
- GetSelectedPath just returns information from selected DriveInfo or DirectoryInfo.
- SetSelectedPath splits target path to array of folders and uses recursive lambda-function to traverse down the tree and expand all the nodes on the way to the target folder. I had to put InitExplorer() call at the first line of this method. There were some issues with tree view selection system and SelectionPath dependency property value changes handling that didn’t allow to select a correct item, so the only work-around that I found was to rebuild the tree. Since we use lazy-loading and setting SelectedPath by code is not a common task, it works well.
Don’t forget to add handler for SelectedItemChanged event:
SelectedItemChanged += (s, e) => SelectedPath = GetSelectedPath();
![Binding Binding](/uploads/1/1/9/5/119511752/874249702.png)
Wpf Treeview Itemssource
We’re almost done – we have just to handle SelectedPath changes to update the UI:
IsSelectionUpdateRequired method is used to prevent infinite loops (user selects a node => SelectedPath changes –> TreeView.SelectedItem changes –> SelectedPath changes –> …..) and unnecessary calculations – it compares current SelectedPath value with new one:
Wpf Treeview Binding Example
The source code of the sample app is rather trivial and is not listed here, but you can find it in the archives.
Download sources and sample app
Download sources and sample app
Wpf Treeview Binding Isexpanded
Note: attached project contains improved version that supports error reporting via custom event and UnloadItemsOnCollapse property that lets you specify whether node content will be unloaded when it is collapsed, or not, and images for disks and folder (implemented with custom value converter).