TreeView using HierarchicalDataTemplate

Question

I've been wrapping myself around the axle for days now.

What I'm trying to do is create a UserControl that has a TreeView in it. The TreeView is supposed to display information about a Show, and a Show has a list of Instructions in it, and so on and so forth...

I've tried to do this in various ways, but I can't get the data to show up. Here's some of my code snippets that I've tried:

<TreeView ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Window}}, Path=DataContext.Show}">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Path=Instructions}">
                    <TextBlock Text="{Binding Path=ShowName}"/>
                    <HierarchicalDataTemplate.ItemTemplate>
                        <HierarchicalDataTemplate ItemsSource="{Binding Path=Sounds}">
                            <TextBlock Text="{Binding Path=Name}"/>
                            <HierarchicalDataTemplate.ItemTemplate>
                                <HierarchicalDataTemplate ItemsSource="{Binding Path=Nodes}">
                                    <TextBlock Text="{Binding Path=Name}"/>
                                    <HierarchicalDataTemplate.ItemTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding Name}"/>
                                        </DataTemplate>
                                    </HierarchicalDataTemplate.ItemTemplate>
                                </HierarchicalDataTemplate>
                            </HierarchicalDataTemplate.ItemTemplate>
                        </HierarchicalDataTemplate>
                    </HierarchicalDataTemplate.ItemTemplate>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>

And I've also tried...

<DockPanel>
        <DockPanel.Resources>
            <HierarchicalDataTemplate DataType="{x:Type show:Show}" ItemsSource="{Binding Path=Instructions}">
                <TextBlock Text="{Binding Path=ShowName}"/>
            </HierarchicalDataTemplate>
            <HierarchicalDataTemplate DataType="{x:Type show:Instruction}" ItemsSource="{Binding Path=Sounds}">
                <TextBlock Text="{Binding Path=Name}"/>
            </HierarchicalDataTemplate>
            <HierarchicalDataTemplate DataType="{x:Type show:SoundInstruction}" ItemsSource="{Binding Path=Nodes}">
                <TextBlock Text="{Binding Path=Name}"/>
            </HierarchicalDataTemplate>
            <DataTemplate DataType="{x:Type show:NodeInstruction}">
                <TextBlock Text="{Binding Path=Name}"/>
            </DataTemplate>
        </DockPanel.Resources>
        <TreeView ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Window}}, Path=DataContext.Show}">
        </TreeView>
    </DockPanel>

But nothing seems to work. In my MainWindow, I have this code which initializes the data context:

            Show s = new Show("Hamlet");
            s.AddInstruction(new Instruction("Inst1"));
            s.AddInstruction(new Instruction("Inst2"));
            ShowViewModel vm = new ShowViewModel(s);
            DataContext = vm;

Any help in the matter will be greatly appreciated.

Jake

From System.Data? Like not being able to find the property Show in the DataContext? No — Jake Varness
– Jake Varness, Commented May 29, 2014 at 0:40

vesan · Accepted Answer · 2014-05-29 05:19:16Z

1

Your ItemsSource has to bind to something that is IEnumerable. From your code, it looks like your ShowViewModel.Show is a property that is of type Show, a single object. That will not work, you have to turn it into a collection (ObservableCollection, preferably).

The second way you used to define templates (side-by-side, not nested), is definitely nicer.

Also, assuming you don't set DataContext to anything else between your Window and DockPanel, you can change this:

<TreeView ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Window}}, Path=DataContext.Show}">

to this:

<TreeView ItemsSource="{Binding Show}">

Your data context is automatically inherited down the visual tree.

answered May 29, 2014 at 5:19

vesan

3,36926 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jake Varness Over a year ago

Ok that made much more sense. So in order for the template to be applied, the item in question has to be a collection, it can't just be an object... That makes much more sense. The Show already had an ObservableCollection of Instructions, so I can use that. Thanks a lot.

Collectives™ on Stack Overflow

TreeView using HierarchicalDataTemplate

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related