Right from the time I started making WPF UI HierarchicalDataTemplate are always mistery to me until I came across this article in Code Project
Though this article is excellent but it is focused on how to show checkbox with TreeView. In this blog I will explain the basic of the HierarchicalDataTemplate with the example shared in CodeProject article.
First thing you need to understand about HierarchicalDataTemplate (or HDT) is they are mean to show your hierarchical data, it can nested structures like
Class Foo
{
String Name;
List<Foo> Childs;
}
In above case your HDT should look like:
<HierarchicalDataTemplate DataType="{x:Type base:Foo}" ItemsSource="{Binding Childs}">
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
As HDT is a data template you have to target a datatype in our case we have Foo class. Now ItemSource should be binded to the items which want to show. Please remember in this case as , all the Childs are again of type Foo so same HDT will be applied by the WPF parser to render it. Now as each Foo contains Name property you can bind it to any control defined in the template (in this case TextBlock).
You can show hierarchies of different classes using multiple classes using more than one HDT (do remember if your structure contains more list of more than one datatype you have to use more than one HDT). Like
Class Dummy
{
List<string> names;
}
Class Foo
{
String FooName;
List< Dummy > Childs;
}
HDT will look like
<HierarchicalDataTemplate DataType="{x:Type Foo}" ItemsSource="{Binding Childs}">
<TextBlock Text="{Binding FooName}"/>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type Dummy}" >
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
Note that here we had used another DataTemplate to further show each Dummy inside Foo.Childs.
You can also use more than one HDT when dealing with more complex data structure.
In the code (below link) there are 2 HDT used to show list of below class
public class Test
{
public string Name { get; set; }
public List<FooViewModel> TestList { get; set; }
}
Here FooViewModel is self-referential structure which contains both Parent & List of Childs of type FooViewModel.
<HierarchicalDataTemplate
DataType="{x:Type local:FooViewModel}"
ItemsSource="{Binding Children}">
<StackPanel x:Name="SP" Background="{Binding BackgroundBrush}" Orientation="Horizontal">
<!-- These elements are bound to a FooViewModel object. -->
<CheckBox
Focusable="False"
IsChecked="{Binding IsChecked}"
VerticalAlignment="Center"/>
<ContentPresenter
Content="{Binding Name}"
Margin="2,0"/>
</StackPanel>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate
DataType="{x:Type local:Test}"
ItemsSource="{Binding TestList}">
<StackPanel Orientation="Horizontal">
<!-- These elements are bound to a FooViewModel object. -->
<ContentPresenter
Content="{Binding Name}"
Margin="2,0"/>
</StackPanel>
</HierarchicalDataTemplate>
Also I had modified the example to show how to databing to change background colors (you check the checkbox ).
In most of the real life project you have to handle different behaviors of TreeView from ViewModel , like if you use search in treeview you have to hide/show items or you have to change the view based itemSelected in the treeview.
Please find the code at
I thing this article will be helpful to you. Please provide any feedback or post any questions.
