Binding observable collection to a TreeView in WPF

Question

Thanks in advance,

I want to bind an observable collection to a TreeView in WPF such that it should display the each TreeView Node as a CountryType. The TreeView is bound to this collection from code behind.

Here's the code :

public partial class MyUserControl: UserControl
{
    public ObservableCollection<Person> myList { get; set; }

    public IEnumerable<PersonViewModel> PersonViewModelList { get; set; }

     public MyUserControl()
     {
       InitializeComponent();
       PopulateCollection();
       DataContext = this;
     }

     private void PopulateCollection()
        {
            myList = new ObservableCollection<Person>()
            {
                new Person{ Name="Name 1", Age=21, CountryType = CountryList.India},
                new Person{ Name="Name 2", Age=21, CountryType = CountryList.US},
                new Person{ Name="Name 3", Age=24, CountryType = CountryList.Israel},
                new Person{ Name="Name 4", Age=24, CountryType = CountryList.Israel},
                new Person{ Name="Name 5", Age=24, CountryType = CountryList.Russia},
                new Person{ Name="Name 6", Age=24, CountryType = CountryList.India},
                new Person{ Name="Name 7", Age=24, CountryType = CountryList.Russia},
                new Person{ Name="Name 8", Age=24, CountryType = CountryList.Russia},
                new Person{ Name="Name 9", Age=24, CountryType = CountryList.Japan},
                new Person{ Name="Name 10", Age=24, CountryType = CountryList.Japan},
                new Person{ Name="Name 11", Age=24, CountryType = CountryList.India},
                new Person{ Name="Name 12", Age=24, CountryType = CountryList.India},
            };

            PersonViewModelList = myList.GroupBy(x => x.CountryType)
            .Select(g => new PersonViewModel()
            {
                CountryType = g.Key,
                Names = g.Select(x => x.Name).OrderBy(n => n).ToList()
            });          
        }
  }

  public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public CountryList CountryType { get; set; }        
    }

    public class PersonViewModel
    {
        public CountryList CountryType { get; set; }
        public List<string> Names { get; set; }
    }

  public enum CountryList
    {
        India,
        Russia,
        US,
        Israel,
        Japan
    }

UserControl (XAML file)

 <TreeView ItemsSource="{Binding PersonViewModelList}">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding Path=Names}" DataType="{x:Type local:PersonViewModel}">
                <HierarchicalDataTemplate.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Path=CountryType}"></TextBlock>
                    </DataTemplate>
                </HierarchicalDataTemplate.ItemTemplate>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>

Expected:

I am pretty not sure what change I should do in TreeView to make it work. Thanks again.

Does this answer your question? [WPF TreeView hierarchical binding.](https://stackoverflow.com/questions/12532435/wpf-treeview-hierarchical-binding). Though your currernt data structure does **not** represent a hierarchy suitable for your screenshot — , Sep 11 '20 at 12:07
@MickyD : No, I tried that but looks like I am doing something wrong. — DotNetSpartan, Sep 11 '20 at 12:16

mm8 · Accepted Answer · 2020-09-11T13:48:52.563

1

Your current Person type is not suited or valid for your requirements. You need to transform your data into an hierarchical view model:

public class PersonViewModel
{
    public CountryList CountryType { get; set; }
    public List<string> Names { get; set; }
}

Just group your current myList by CountryType and bind to the result:

var transformedList = myList
    .GroupBy(x => x.CountryType)
    .Select(g => new PersonViewModel()
    { 
        CountryType = g.Key, 
        Names = g.Select(x => x.Name).OrderBy(n => n).ToList() 
    });

XAML:

<TreeView ItemsSource="{Binding PersonViewModelList}">
    <TreeView.Resources>
        <HierarchicalDataTemplate ItemsSource="{Binding Names}" DataType="{x:Type local:PersonViewModel}">
            <TextBlock Text="{Binding CountryType}" />
        </HierarchicalDataTemplate>
    </TreeView.Resources>
</TreeView>

edited Sep 11 '20 at 13:48

answered Sep 11 '20 at 12:42

mm8

163,881
10
57
88

What change I may have to do in xaml ? Can you be a bit more clear ? Thanks. – DotNetSpartan Sep 11 '20 at 12:59
You need to modify your view model code, not your XAML. – mm8 Sep 11 '20 at 13:00
Yes, I made these changes, But I am not able to see the tree view getting displayed. – DotNetSpartan Sep 11 '20 at 13:01
See my edit. You need to bind to the properties of the new type as well of course. – mm8 Sep 11 '20 at 13:02
Thanks, It's pretty strange that I am not able to see the TreeView Still :( – DotNetSpartan Sep 11 '20 at 13:24
Is `transformedList` returned from a public property`? Did you set the `DataContext` and bind the `ItemsSource` of the `TreeView`? – mm8 Sep 11 '20 at 13:25
Yes, I am returning the transformed list to public IEnumerable PersonViewModelList { get; set; }. I have also set the DataContext = this; in the contructor of UserControl. I have binded the PersonViewModelList to the ItemSource of TreeView – DotNetSpartan Sep 11 '20 at 13:30
@MishraSaurabh: And you don't see anything in the `TreeView`? I don't believe you then :) Please post your code. Did you debug to see if the property actually returns any data? – mm8 Sep 11 '20 at 13:32
Please check the complete code in the post above. I have edited it. Thanks. – DotNetSpartan Sep 11 '20 at 13:41
Sorry for the typo. Updated. – DotNetSpartan Sep 11 '20 at 13:43

score 0 · Answer 2 · answered Sep 11 '20 at 12:43

You need to invert your data structure, something like this ...

var countyPeople = MyList.GroupBy(p => p.CountryType)
    .Select(g => new {Country = g.Key, People = g.ToList()})
    .OrderBy(c => c.Country)
    .ToList();

which you can then set as the ItemsSource of your TreeView.

The ItemsSource in your HierarchicalDataTemplate would then bind to the People property of this anonymous type.

Binding observable collection to a TreeView in WPF

2 Answers2