Share via


Avalon Simple Tree View, Part 3

In case you haven't heard, we've just released the Avalon and Indigo Beta1 Release Candidate. To inspire you all to upgrade from the March CTP (or maybe to install for the first time) I've updated my TreeView sample.

So what's new? Well, I've styled the plus/minus button and added some simple linear gradients that make the control look pretty cool. I'll let ya'll dig through the XAML to figure those out.

My favorite feature: hierarchical data binding. Forget binding to a flat list, now you can bind to a hierarchy of data. The most obvious place to start: a simple file browser.

First, how does one wire up hierarchical data? It's pretty simple. If you've played around with data binding much, you know about DataTemplates. A DataTemplate lets one specify the UI (Visual Tree) for a DataType. HierarchialDataTemplate subclasses DataTemplate and adds the ability to define a nested ItemsSource. From there, recursion takes over.

As the data-savvy among you know, Avalon data binding works against properties, but System.IO.DirectoryInfo only exposes methods to access nested directories and files. I created a couple of simple classes to wrap DirectoryInfo and FileInfo, MyDirectory and MyFile respectively. MyDirectory.Items exposes a combined list of directories and files. You'll notice that I don't populate Items until it's accessed. This is important, unless you want your data structure doing a depth-first search of your C-drive before the app loads.

Project details:

  • Data.cs -- wrappers for DirectoryInfo and FileInfo
  • Treeview.cs -- Object model for TreeView and TreeViewItem
  • MyApp.xaml -- Styles for TreeView, TreeViewItem, and the little plus/minus toggle button.
  • Window1.xaml -- The actual "application". Also contains the definitons for the ObjectDataSource and the data templates for MyDirectory and MyFile.

 

What about selection? Stay tuned.