Table of Contents
C# Tree View With Multi-Type Binding
I had an interesting problem where I need the leaves of the tree view to be different types, so in my tree view I have the following classes;
- Family
- Parent
- Child
- Pet
however notice that the Pet and Child classes are at the same level i.e. the leaf level.
Classes
Here are my classes
Family
C#
x
24
24
1
public class Family : ViewModelBase2
{3
private ObservableCollection<Parent>? _parents;4
public ObservableCollection<Parent>? Parents5
{6
get { return _parents; }7
set8
{9
_parents = value;10
OnPropertyChanged();11
}12
}13
14
private string _name;15
public string Name16
{17
get { return _name; }18
set19
{20
_name = value;21
OnPropertyChanged();22
}23
}24
}Parent
C#
1
35
35
1
public class Parent : ViewModelBase2
{3
private string _name=string.Empty;4
public string Name5
{6
get { return _name; }7
set8
{9
_name = value;10
OnPropertyChanged();11
}12
}13
14
private ObservableCollection<Child>? _children;15
public ObservableCollection<Child>? Children16
{17
get { return _children; }18
set19
{20
_children = value;21
OnPropertyChanged();22
}23
}24
25
private ObservableCollection<Pet>? _pets;26
public ObservableCollection<Pet>? Pets27
{28
get { return _pets; }29
set30
{31
_pets = value;32
OnPropertyChanged();33
}34
}35
}Child
C#
1
13
13
1
public class Child : ViewModelBase2
{3
private string _name;4
public string Name5
{6
get { return _name; }7
set8
{9
_name = value;10
OnPropertyChanged();11
}12
}13
}Pet
C#
1
4
1
public class Pet : ViewModelBase2
{3
public string Name { get; set; } = string.Empty;4
}View Model Base
C#
1
9
1
public class ViewModelBase:INotifyPropertyChanged2
{3
public event PropertyChangedEventHandler? PropertyChanged;4
5
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = "")6
{7
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));8
}9
}Family View Model
To create the data model we will create a View Model for the family and initialize the families observable collection.
C#
1
84
84
1
using System.Collections.ObjectModel;2
3
namespace Family_Treeview4
{5
public class FamilyViewModel : ViewModelBase6
{7
public ObservableCollection<Family> Families { get; set; }8
9
public FamilyViewModel()10
{11
Families = new ObservableCollection<Family>12
{13
new Family14
{15
Parents = new ObservableCollection<Parent>16
{17
new Parent18
{19
Name = "Parent 1",20
Children = new ObservableCollection<Child>21
{22
new Child { Name = "Child 1" },23
new Child { Name = "Child 2" }24
},25
Pets = new ObservableCollection<Pet>26
{27
new Pet { Name = "Cat" },28
new Pet { Name = "Dog" }29
}30
},31
new Parent32
{33
Name = "Parent 2",34
Children = new ObservableCollection<Child>35
{36
new Child { Name = "Child 3" },37
new Child { Name = "Child 4" }38
},39
Pets = new ObservableCollection<Pet>40
{41
new Pet { Name = "Dog" }42
}43
}44
},45
Name = "Family 1"46
},47
new Family48
{49
Parents = new ObservableCollection<Parent>50
{51
new Parent52
{53
Name = "Parent 1",54
Children = new ObservableCollection<Child>55
{56
new Child { Name = "Child 1" },57
new Child { Name = "Child 2" }58
},59
Pets = new ObservableCollection<Pet>60
{61
new Pet { Name = "Cat" },62
new Pet { Name = "Dog" }63
}64
},65
new Parent66
{67
Name = "Parent 2",68
Children = new ObservableCollection<Child>69
{70
new Child { Name = "Child 3" },71
new Child { Name = "Child 4" }72
},73
Pets = new ObservableCollection<Pet>74
{75
new Pet { Name = "Dog" }76
}77
}78
},79
Name = "Family 2"80
}81
};82
}83
}84
}Children And Pets Converter
To make this work we want to create a multi value converter that can take in an array of all objects below the parent and combine them into a single observable collection, this is what this converter does.
C#
1
34
34
1
using System.Collections.ObjectModel;2
using System.Globalization;3
using System.Windows.Data;4
5
namespace Family_Treeview6
{7
public class ChildrenAndPetsConverter : IMultiValueConverter8
{9
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)10
{11
var children = values[0] as ObservableCollection<Child>;12
var pets = values[1] as ObservableCollection<Pet>;13
14
if (children == null || pets == null)15
return null;16
17
var combinedList = new ObservableCollection<object>();18
foreach (var child in children)19
{20
combinedList.Add(child);21
}22
foreach (var pet in pets)23
{24
combinedList.Add(pet);25
}26
return combinedList;27
}28
29
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)30
{31
throw new NotImplementedException();32
}33
}34
}Tree View Xaml
First thing we need to define a root node in Xaml terms its a header
C#
1
2
1
<TreeView>2
<TreeViewItem Header="Families" FontSize="20">Next we will bind the Tree View to the Families observable collection in the View Model.
C#
1
1
1
<TreeView Name="FamilyTreeView2" ItemsSource="{Binding Families}" BorderThickness="0">The Families observable collection contains a Family Class Which Contains a Parents Class and a Name Attribute for the Family Name.
C#
1
6
1
<TreeView.Resources>2
<!-- DataTemplate for Family -->3
<HierarchicalDataTemplate DataType="{x:Type local:Family}" ItemsSource="{Binding Parents}">4
<TextBlock Text="{Binding Name}" FontSize="20"/><!-- family Name -->5
</HierarchicalDataTemplate>6
in the previous code block we set the item source, in this case we don’t know which item source to bind to since we have children and pets, so in this case we cant.
C#
1
7
1
<!-- DataTemplate for Parent -->2
<HierarchicalDataTemplate DataType="{x:Type local:Parent}">3
<StackPanel Orientation="Horizontal">4
<TextBlock Text="{Binding Name}" FontSize="20"/><!-- parent Name -->5
<TextBlock Text=" (Children)" Margin="5,0,0,0" FontSize="20"/>6
</StackPanel>7
This is where the converter comes in, we pass both collections into the converter as a multi-binding to create a singular collection.
C#
1
7
1
<HierarchicalDataTemplate.ItemsSource>2
<MultiBinding Converter="{StaticResource ChildrenAndPetsConverter}">3
<Binding Path="Children"/>4
<Binding Path="Pets"/>5
</MultiBinding>6
</HierarchicalDataTemplate.ItemsSource>7
</HierarchicalDataTemplate>Lastly we have to define two data templates so that we can bind to the correct attributes
C#
1
9
1
<!-- DataTemplate for Child -->2
<DataTemplate DataType="{x:Type local:Child}">3
<TextBlock Text="{Binding Name}" FontSize="20"/>4
</DataTemplate>5
6
<!-- DataTemplate for Pet -->7
<DataTemplate DataType="{x:Type local:Pet}">8
<TextBlock Text="{Binding Name}" FontSize="20"/>9
</DataTemplate>I Changed the attribute names for the Pet and Child class and as a result we have to change the names in the two data templates as shown below.
C#
1
9
1
<!-- DataTemplate for Child -->2
<DataTemplate DataType="{x:Type local:Child}">3
<TextBlock Text="{Binding ChildName}" FontSize="20"/>4
</DataTemplate>5
6
<!-- DataTemplate for Pet -->7
<DataTemplate DataType="{x:Type local:Pet}">8
<TextBlock Text="{Binding PetName}" FontSize="20"/>9
</DataTemplate>Completed Code.
C#
1
53
53
1
<Window x:Class="Family_Treeview.MainWindow"2
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"3
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"4
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"5
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"6
xmlns:local="clr-namespace:Family_Treeview"7
mc:Ignorable="d"8
Title="MainWindow" 9
Height="450" 10
Width="800">11
12
<Window.Resources>13
<local:ChildrenAndPetsConverter x:Key="ChildrenAndPetsConverter"/>14
</Window.Resources>15
<Grid>16
<TreeView>17
<TreeViewItem Header="Families" FontSize="20">18
<TreeView Name="FamilyTreeView2" ItemsSource="{Binding Families}" BorderThickness="0">19
<TreeView.Resources>20
<!-- DataTemplate for Family -->21
<HierarchicalDataTemplate DataType="{x:Type local:Family}" ItemsSource="{Binding Parents}">22
<TextBlock Text="{Binding Name}" FontSize="20"/>23
</HierarchicalDataTemplate>24
25
<!-- DataTemplate for Parent -->26
<HierarchicalDataTemplate DataType="{x:Type local:Parent}">27
<StackPanel Orientation="Horizontal">28
<TextBlock Text="{Binding Name}" FontSize="20"/>29
<TextBlock Text=" (Children)" Margin="5,0,0,0" FontSize="20"/>30
</StackPanel>31
<HierarchicalDataTemplate.ItemsSource>32
<MultiBinding Converter="{StaticResource ChildrenAndPetsConverter}">33
<Binding Path="Children"/>34
<Binding Path="Pets"/>35
</MultiBinding>36
</HierarchicalDataTemplate.ItemsSource>37
</HierarchicalDataTemplate>38
39
<!-- DataTemplate for Child -->40
<DataTemplate DataType="{x:Type local:Child}">41
<TextBlock Text="{Binding Name}" FontSize="20"/>42
</DataTemplate>43
44
<!-- DataTemplate for Pet -->45
<DataTemplate DataType="{x:Type local:Pet}">46
<TextBlock Text="{Binding Name}" FontSize="20"/>47
</DataTemplate>48
</TreeView.Resources>49
</TreeView>50
</TreeViewItem>51
</TreeView>52
</Grid>53
</Window>