Displaying mixed types using HierarchicalDataTemplate - wpf

Question

I am trying to display a tree view with mixed types using HierarchicalDataTemplate but so far all my attempts failed..
I have a tree-like class that can have two different types of children. (Location and Device). To make things understandable here is the illustration of what I am trying to display:
->Location 1
|
|--->Device 1.1
|--->Device 1.2
|--->Location 1.2
|
|---->Device 1.2.1
|---->Location 1.2.1
.....etc.....
I have tried a lot of solutions I found but none worked. In the most cases I just get the class name in the tree view.
Is what I am trying to do even possible using HierarchicalDataTemplate? If it is please let me know how.

Answer 1

After several hours of trial and error I went back to the beginning and found the solution. I can't believe it is actually so simple.
The template looks like this:
<HierarchicalDataTemplate x:Key="NavigatorDataTemplate" DataType="{x:Type local:Location}" ItemsSource="{Binding Locations}">
<StackPanel>
<TextBlock Text="{Binding Description}"/>
<ListBox ItemsSource="{Binding Devices}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Description}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</HierarchicalDataTemplate>
The TreeView is just this:
<TreeView Name="treeNav" ItemTemplate="{StaticResource NavigatorDataTemplate}"/>
And since the collection that needs to be displayed is in the code already i just set it to the ItemsSource:
treeNav.ItemsSource = locations;

Answer 2

The HierarchicalDataTemplate should help to solve your problem. Take a look on latest sample on MSDN Data Templating Overview

Answer 3

For this hierarchy to work Location object should have composite collection of Locations and Devices and you simply need to set that collection as ItemsSource of your HierarchicalDataTemplate. This sample should work then -
<HierarchicalDataTemplate DataType="{x:Type local:Location}"
ItemsSource="{Binding CompositeCollection}">
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type local:Device}">
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
I am assuming you have Name property in each object Location and Device which you need to show on UI. Add these data templates to resources of your ItemsControl which may be ListBox, TreeView or any other ItemsControl.

Answer 4

Being new to WPF, I recently solved this same problem. The approach I used was to create a new class that would be used to display the data in the tree.
TreeDisplayItem Class has contractor per class type that will be displayed.
In each constructor, the _display property will be set for the class passed.
itemDef = Category Name
ItemPrice = Price + Quantity + Store location
public class TreeDisplayItem
{
readonly string _display;
readonly string _id;
readonly List<TreeDisplayItem> _items;
public LegoPriceDisplay(ItemDef itemDef, List<TreeDisplayItem> items)
{
...//Root node class type ItemDef
}
public LegoPriceDisplay(ItemPrice price)
{
....//child node type = ItemPrice
}
public List<TreeDisplayItem> Items{ get; private set; }
public string DisplayId
{
get { return _id; }
}
public string Display
{
get { return _display; }
}
}
In the WPF Page XAML, define a treeview with nested HierarchicalDataTemplates.
Of course this works for only use cases where you have fixed / Known tree item depth.
In my case, treeview will drill down to two layers (counting the root)
<TreeView Margin="0" Name="TvStorePrices" ItemsSource="{Binding TreeDisplayItemList}">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate DataType="local:TreeDisplayItem" ItemsSource="{Binding Items}">
<TextBlock Text="{Binding Display}" />
<HierarchicalDataTemplate.ItemTemplate>
<HierarchicalDataTemplate DataType="local:TreeDisplayItem" ItemsSource="{Binding Items}">
<TextBlock Text="{Binding Display}" />
</HierarchicalDataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>