Hierarchical-DataBinding in TreeView

Question

I have a class called ClassWithPupils which looks like:

public class ClassWithPupils : ViewModelBase { public ClassWithPupils(IClass @class) { Class = @class; Pupils = new ObservableCollection<IPupil>(); } public IClass Class { get { return Get<IClass>(); } set { Set(value); } } public ObservableCollection<IPupil> Pupils { get { return Get<ObservableCollection<IPupil>>(); } set { Set(value); } } }

And I have a ViewModel which contains an ObservableCollection<ClassWithPupils>.

private ObservableCollection<ClassWithPupils> classesWithPupils; public ObservableCollection<ClassWithPupils> ClassesWithPupils { get { return classesWithPupils ?? (classesWithPupils = new ObservableCollection<ClassWithPupils>()); } }

This collection is filled correct with items from a Database.

Now I want to display all items from ClassesWithPupils hierarchical in a TreeView.

My View so far looks like:

<TreeView ItemsSource="{Binding ClassesWithPupils, UpdateSourceTrigger=PropertyChanged}"> <TreeView.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding}"> <Label Content="{Binding Class.Name}"/> </HierarchicalDataTemplate> </TreeView.ItemTemplate> </TreeView>

So the Class-Names are displayed correct.

Unfortunately I have no clue how to bind the Pupils-Collection of each ClassWithPupils-Entry to the correct item in the TreeView as children.

I tried something like:

<TreeView ItemsSource="{Binding ClassesWithPupils, UpdateSourceTrigger=PropertyChanged}"> <TreeView.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding}"> <Label Content="{Binding Class.Name}"/> <HierarchicalDataTemplate.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding Pupils}"> <Label Content="{Binding Name}"/> </HierarchicalDataTemplate> </HierarchicalDataTemplate.ItemTemplate> </HierarchicalDataTemplate> </TreeView.ItemTemplate> </TreeView>

With no success...

So my question is: How can I display the Name of the Pupils as children of the classes in the TreeView?

VidasV · Accepted Answer · 2015-06-26 07:10:21Z

1

After looking at your code I have spotted only one error in binding, that could cause the described problem, you should bind to Pupils inside the hierarchical template like this:

<TreeView ItemsSource="{Binding ClassesWithPupils, UpdateSourceTrigger=PropertyChanged}"> <TreeView.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding Pupils}"> <Label Content="{Binding Class.Name}"/> </HierarchicalDataTemplate> </TreeView.ItemTemplate> </TreeView>

answered Jun 26, 2015 at 7:10

VidasV

4,9352 gold badges33 silver badges52 bronze badges

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

4 Comments

Tomtom Over a year ago

Looks good. And how can I display the class-name at the parent-element?

VidasV Over a year ago

Maybe you could printscreen how your treeview looks now, and maybe you could specify more details where do you want the name of class to appear?

Tomtom Over a year ago

Unfortunately I can't printscreen. My tree now has 2 root nodes with 2 children each. The Name of the Children is displayed correct, but the root-nodes are empty

Tomtom Over a year ago

Ok. I solved it. Inside the HierarchicalDataTemplate I've added HierarchicalDataTemplate.ItemTemplate and inside there is a Label which is bound to the Name of the Pupil

Collectives™ on Stack Overflow

Hierarchical-DataBinding in TreeView

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related