It has really proven a difficult task to find a simple (and understandable) example on how to perform XAML-databinding to a Hierarchical treeview as seen below. So - as a simple example and as a point of reference, here is how.
public interface IFolder
{
string FullPath { get; }
string FolderLabel { get; }
List<IFolder> Folders { get; }
}
This is what we have to work with; a folder list as you would expect to see in the left-hand pane in Windows Explorer. The data is presented to the View using the ViewModel seen below. This ViewModel exposes a list of IFolders (List<IFolder>) as a property; a property to which the View can bind.
ViewModel
class ViewModel : INotifyPropertyChanged
{
public ViewModel()
{
TEST = "jubba";
m_folders = new List<IFolder>();
//add Root items
Folders.Add(new Folder { FolderLabel = "Dummy1", FullPath = @"C:\dummy1" });
Folders.Add(new Folder { FolderLabel = "Dummy2", FullPath = @"C:\dummy2" });
Folders.Add(new Folder { FolderLabel = "Dummy3", FullPath = @"C:\dummy3" });
Folders.Add(new Folder { FolderLabel = "Dummy4", FullPath = @"C:\dummy4" });
//add sub items
Folders[0].Folders.Add(new Folder { FolderLabel = "Dummy11", FullPath = @"C:\dummy11" });
Folders[0].Folders.Add(new Folder { FolderLabel = "Dummy12", FullPath = @"C:\dummy12" });
Folders[0].Folders.Add(new Folder { FolderLabel = "Dummy13", FullPath = @"C:\dummy13" });
Folders[0].Folders.Add(new Folder { FolderLabel = "Dummy14", FullPath = @"C:\dummy14" });
}
public string TEST { get; set; }
private List<IFolder> m_folders;
public List<IFolder> Folders
{
get { return m_folders; }
set
{
m_folders = value;
NotifiyPropertyChanged("Folders");
}
}
void NotifiyPropertyChanged(string property)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
public event PropertyChangedEventHandler PropertyChanged;
}
View
The interesting part in this context is the View which details the XAML-syntax. It is seen below.
Simple Binding (flat structure):
As seen, a simple root-level binding is achieved by using a standard <TreeView.ItemTemplate><DataTemplate>… syntax.
<!-- simple root level binding-->
<TextBlock Text="Simple root binding}" Foreground="Red" Margin="10,10,0,0" />
<TreeView ItemsSource="{Binding Folders}" Margin="10">
<TreeView.ItemTemplate>
<DataTemplate>
<TreeViewItem Header="{Binding FolderLabel}"/>
</DataTemplate>
</TreeView.ItemTemplate>
</TreeView>
Non-simple Binding (hierarchical structure):
The Hierarchical view is achieved using the <TreeView.ItemTemplate><HierarchicalDataTemplate>… syntax. Do note that you need to inform the HierarchicalDataTemplate of the datatype to display. This is done using the DataType attribute on the HierarchicalDataTemplate XAML-element. Do note also that the ItemsSource need to be an IEnumerable<T> implementation (List<T> in this case).
<!-- hieracical binding -->
<TextBlock Text="Hierarchical root binding}" Foreground="Red" Margin="10,20,0,0"/>
<TreeView ItemsSource="{Binding Folders}" Margin="10" Height="200">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Folders}" DataType="{x:Type local:IFolder}">
<TreeViewItem Header="{Binding FolderLabel}"/>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
Update: Download the project here:
http://www.clauskonrad.net/download.ashx?id=16
