WPF - I'm stumped on the TreeView control

Question

Pun intended.

I want to create a simple TreeView using the HierarchicalDataTemplate class.

Here's my problem XAML:

<Window.Resources>
    <ObjectDataProvider 
        x:Key="myDataProvider"
        ObjectType="vm:ContractViewModel" />
</Window.Resources>

<Window.DataContext>
    <Binding Source="{StaticResource myDataProvider}" Path="Contract" />
</Window.DataContext>

<StackPanel
    Orientation="Vertical"
    VerticalAlignment="Top">
    <ListBox MinWidth="400" Margin="10"
        ItemsSource="{Binding Commissions}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding Id}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <TreeView>
        <HierarchicalDataTemplate DataType="{x:Type m:Contract}"
                                    ItemsSource="{Binding Commissions}">
            <TextBlock Text="{Binding Id}" />
        </HierarchicalDataTemplate>
    </TreeView>
</StackPanel>

I'm using the MVVM pattern. The StaticResource "myDataProvider" returns an instance of a Contract (custom) class. Here's my model:

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

internal class Commission
{
    public string Id { get; set; }
}

FYI - my model is actually more complex; my classes contain more members than shown, they have constructors, and they implement INotifyPropertyChanged.

In my test, I load two Commission objects into a Contract object. The listbox works as expected: I can see the Id of each Commission object w/in Contract. The TreeView doesn't work: it returns a "System.Windows.HierarchicalDataTemplate" string in the TreeView control where I'd expect each Commission Id to be listed.

I've referred to other posts and MSDN to no avail. I'd be appreciative of your help!

Answer 1

From what I can tell is that you're not using the TreeView correctly in XAML. You need to put your HierarchicalDataTemplate at the TreeView.Resources level and assign a ItemsSource

As shown here you want to set the Template of the item.

Try to do something like this instead:

<TreeView ItemsSource="{Binding Contracts}">
    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type m:Contract}"
                                  ItemsSource="{Binding Commissions}">
            <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate DataType="{x:Type m:Commission}"
                                  ItemsSource="{Binding Children}">
            <TextBlock Text="{Binding Id}" />
        </HierarchicalDataTemplate>
    </TreeView.Resources>
</TreeView>

I personally do it like this--using RadTreeView:

<telerik:RadTreeView.ItemTemplate>
    <HierarchicalDataTemplate DataType="{x:Type vm:BaseType}"
                              ItemsSource="{Binding Children}">
        <TextBlock Text="{Binding Title}" />
    </HierarchicalDataTemplate>
</telerik:RadTreeView.ItemTemplate>