TreeView with a nested list

Question

I want to display some objects in a tree structure, but, unfortunately, without success.

I have an ObservableCollection <ICustom> objects: Settings.ListOfCustomers

The interface of the ICustom object:

 int Id { get; } int age { get; } CustomerType CustomerType { get; } ObservableCollection<IValue> ListOfValues { get; } 

ObservableCollection<IValue> ListOfValues also has some properties, such as:

 String Name { get; } 

My view:

 <TreeView ItemsSource="{Binding ListOfCustomers, UpdateSourceTrigger=PropertyChanged}"> <TreeView.Resources> <HierarchicalDataTemplate DataType="{x:Type customerConfig:ICustomer}"> <TextBlock Text="{Binding Id}"/> </HierarchicalDataTemplate> <HierarchicalDataTemplate DataType="{x:Type valueConfig:IValue}" ItemsSource="{Binding ListOfValues}"> <StackPanel> <TextBlock Text="{Binding Name}"/> </StackPanel> </HierarchicalDataTemplate> </TreeView.Resources> </TreeView> 

Question: How to display these objects in TreeView? My approach (see "My Look") does not work.

Answer 1

To Question 1: ObservableCollections has the advantage that all notifications for presentation are automatically executed. Therefore, you do not need to worry about NotifyPropertyChanged events to add / remove objects from the collection.

To Question 2: Is your ViewModel your DataContext ? I don’t see where the ObservableCollection<ICustomer> property is? Can you provide more information about relationships in these classes?

EDIT:

Based on mm8's answer, the x: Type attribute must have a specific type. Therefore, the code should look something like this:

I suggest you have an ObservableCollection<ICustomer> ListOfCustomers in your ViewModel , then you can bind it in the view:

  <TreeView ItemsSource="{Binding ListOfCustomers}"> <TreeView.Resources> <HierarchicalDataTemplate DataType="{x:Type Customer}"> <TextBlock Text="{Binding Id}"/> </HierarchicalDataTemplate> <HierarchicalDataTemplate DataType="{x:Type modSettings:Value}" ItemsSource="{Binding ListOfValues}"> <TextBlock Text="{Binding Name}"/> </HierarchicalDataTemplate> </TreeView.Resources> </TreeView> 

I think this thread provides a more detailed solution to your problem: Implement the WPF tree with different parent nodes in the same way as other child nodes?

EDIT2:

I modified my code a bit to fit your requirements. This should display all nodes:

 <TreeView ItemsSource="{Binding ListOfCustomers}" > <TreeView.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding Path=ListOfValues}" DataType="{x:Type Customer}"> <HierarchicalDataTemplate.ItemTemplate> <HierarchicalDataTemplate DataType="{x:Type modSettings:Value}"> <TextBlock Text="{Binding Path=Name}"/> </HierarchicalDataTemplate> </HierarchicalDataTemplate.ItemTemplate> <TextBlock Text="{Binding Path=Id}"/> </HierarchicalDataTemplate> </TreeView.ItemTemplate> </TreeView> 

Answer 2

I converted all lists to an ObservableCollection , as well as nested lists. Is it necessary and right?

This is not necessary if you do not intend to add items to the collection dynamically at run time. Then you need to use ObservableCollection<T> so that they automatically appear in the TreeView . Otherwise, you can use List<T> .

How to display these objects in TreeView ?

An error message appears because you are adding templates to the Items TreeView property. They must be added to the Resources property, i.e. You need to add the <TreeView.Resources> element.

You should also read the following:

Why bind a DataTemplate to an interface when this DataTemplate explicitly returned from a DataTemplateSelector?

Templates with the DataType property set for the interface type are not applied. Therefore, you must either define a HierarchicalDataTemplate for a particular type, or use a DataTemplateSelector .