WPF TreeView with multiple DataTypes and possibly leafs on each node - wpf

Question

I face a problem using WPF.
Let's take those examples classes which reproduce what I'm trying to do :
public class Element
{
public string Name { get; set; }
public IList<Element> SubElements { get; set; } = new List<Element>();
public IList<Value> Values { get; set; } = new List<Value>();
}
public class Value
{
public string Name { get; set; }
}
Each Element instance can have (or not) its own list of Values.
For example i'd like to display the following root on my TreeView :
Element root = new Element() { Name = "Root" };
Element subElement1 = new Element() { Name = "SubElement1" };
Element subElement1_1 = new Element() { Name = "SubElement1_1" };
Value valueSubElement1_1 = new Value() { Name = "SubElement1_1_Value" };
subElement1_1.Values.Add(valueSubElement1_1);
subElement1.SubElements.Add(subElement1_1);
root.SubElements.Add(subElement1);
Element subElement2 = new Element() { Name = "SubElement2" };
Value valueSubElement2 = new Value() { Name = "SubElement2_Value" };
subElement2.Values.Add(valueSubElement2);
root.SubElements.Add(subElement2);
How could I do that ? I struggle to find a correct answer to this.
Here is the xaml i started with :
<TreeView x:Name="TreeView" Grid.Row="0" ItemsSource="{Binding TreeViewElements, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MainWindow}}}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:Element}" ItemsSource="{Binding SubElements}">
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type local:Value}">
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</TreeView.Resources>
</TreeView>
With TreeViewElements :
public IList<Element> TreeViewElements { get; set; } = new List<Element>();
to which I added my root object.
With that I can perfectly display all of my Element objects, but not the Values.
And I get why ; when I specified the ItemsSource I gave an item of type Element, so it'll never see the values inside.
So how could I do that ?
Thanks in advance for your answers and have a good day.

Answer 1

You can define as many templates as you like based on type but there can only be the one itemssource to a treeviewitem.
You could alter your Element or create a new ElementViewModel which had a list
public class Element
{
public string Name { get; set; }
public IList<object> Children { get; set; } = new List<object>();
}
You could then add an Element or Value to children.
Having said that.
Element has Name and SubElements, Value just has Name. It looks like you could just use an Element with an empty collection of SubElements instead of Value.
Just have
public class Element
{
public string Name { get; set; }
public IList<Element> SubElements { get; set; } = new List<Element>();
}

Answer 2

You would have to add another ItemsControl to the template to displays an additional collection on the same tree level.
Alternatively, if you want to display multiple types in the same tree then you would have to change your data structure with the goal to add all child items to the same source collection.
Solution 1
In order to be able hide the nested ToggleButton (that is used as the node's expander in this example) using a Trigger (in case the Element.Values source collection is empty) you could introduce a HasValues property:
Element.cs
public class Element
{
public string Name { get; set; }
public IList<Element> SubElements { get; set; } = new List<Element>();
public IList<Value> Values { get; set; } = new List<Value>();
public bool HasValues => this.Values.Count > 0;
}
The following modified TreeView example uses ToggleButton to toggle the Visibility of the nested ItemsControl.
Optionally, to match the look of the expander with the expander of the TreeView, you can extract the TreeView style using Visual Studio you will also get the ToggleButton style that the TreeView uses to style the tree node's expander. You can then set this Style to the below ToggleButton that toggles the visibility of the nested ItemsControl. In this case you would have to remove the ToggleButton.Content value that is currently set.
<TreeView>
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:Element}"
ItemsSource="{Binding SubElements}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<ToggleButton x:Name="Expander"
Grid.Row="0"
Grid.Column="0"
Content=">"
Margin="-24,0,0,0"
Visibility="Collapsed"
HorizontalAlignment="Left" />
<TextBlock x:Name="Header"
Grid.Row="0"
Grid.Column="1"
Text="{Binding Name}" />
<ItemsControl x:Name="ValueHost"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Visibility="Collapsed"
ItemsSource="{Binding Values}" />
</Grid>
<HierarchicalDataTemplate.Triggers>
<DataTrigger Binding="{Binding HasValues}"
Value="True">
<Setter TargetName="Expander"
Property="Visibility"
Value="Visible" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=Expander, Path=IsChecked}"
Value="True">
<Setter TargetName="ValueHost"
Property="Visibility"
Value="Visible" />
</DataTrigger>
</HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type local:Value}">
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</TreeView.Resources>
</TreeView>
Solution 2
In your case you could introduce a common interface that declares the Name property. You can use this interface or the least common type (object) as the type of the container collection:
INode.cs
interface INode : INotifyPropertyChanged
{
string Name { get; set; }
}
Element.cs
// TODO::Implement INotifyPropertyChnaged
class Element : INode
{
public IList<INode> ChildNodes { get; set; }
public string Name { get; set; }
}
Value.cs
// TODO::Implement INotifyPropertyChnaged
class Element : INode
{
public string Name { get; set; }
}
Example
Element root = new Element() { Name = "Root" };
Element subElement1 = new Element() { Name = "SubElement1" };
Element subElement1_1 = new Element() { Name = "SubElement1_1" };
Value valueSubElement1_1 = new Value() { Name = "SubElement1_1_Value" };
subElement1_1.ChildNodes.Add(valueSubElement1_1); subElement1.ChildNodes.Add(subElement1_1);
root.ChildNodes.Add(subElement1);
Element subElement2 = new Element() { Name = "SubElement2" };
Value valueSubElement2 = new Value() { Name = "SubElement2_Value" };
subElement2.ChildNodes.Add(valueSubElement2);
root.ChildNodes.Add(subElement2);
<TreeView>
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:Element}"
ItemsSource="{Binding ChildNodes}">
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type local:Value}">
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</TreeView.Resources>
</TreeView>