WPF TreeView databinding follow up

Question

As a follow up to my first TreeView question on SO, I'm unable to bind a TreeView control to the Id property of my Commission object and its Products collection in the same TreeView control. Here's my simplified model:

internal class Contract
{
    public string Name { get; set; }
    public ObservableCollection<Commission> Commissions { get; set; }
}

internal class Commission
{
    public string Id { get; set; }
    public ObservableCollection<Product> Products { get; set; }
}

internal class Product
{
   public string Code { get; set; }
}

Here's my problem XAML. Contract returns a collection of Commission objects (Commissions). I've commented out the HierarchicalDataTemplate for returning Products. Either HierarchicalDataTemplate will work individually, but not if both are uncommented:

<TreeView ItemsSource="{Binding Contract.Commissions}">
                    <TreeView.Resources>
                        <HierarchicalDataTemplate DataType="{x:Type m:Commission}">
                            <TextBlock Text="{Binding Id}" />
                        </HierarchicalDataTemplate> 
                    <!--<HierarchicalDataTemplate DataType="{x:Type m:Commission}" ItemsSource="{Binding Products}">
                            <TextBlock Text="{Binding Code}" />
                        </HierarchicalDataTemplate>-->
                    </TreeView.Resources>
                </TreeView>

If both HierarchicalDataTemplates are uncommented, an error is thrown because I'm using a unique (Commission Type) twice, but I don't know how to make either HierarchicalDataTemplate work without using Commission Type as the template's DataType.

Rohit Vats Rohit Vats · Accepted Answer · 2014-02-12T17:57:13

You are jumbling up things here. I assume you want to show Commission's Id and beneath each Commission node, child Product's code value.

Only one HierarchicalDataTemplate of Commission is required and one DataTemplate for Product:

<TreeView.Resources>
  <HierarchicalDataTemplate DataType="{x:Type m:Commission}"
                            ItemsSource="{Binding Products}">
      <TextBlock Text="{Binding Id}" />
   </HierarchicalDataTemplate>
   <DataTemplate DataType="{x:Type m:Product}">
      <TextBlock Text="{Binding Code}" />
   </DataTemplate> 
</TreeView.Resources>

Explanation:

Declare HierarchicalDataTemplate for nodes which needs to contain child nodes. In your case Commission.
Set ItemsSource to child collection which you need to shown beneath those nodes. In your case Products.
Lastly, declare DataTemplate for node which won't contain any child nodes. In your case Product.

WPF TreeView databinding follow up

1 Answers