How to design a Treeview with following Scheme - wpf

Question

Treeview should look like following:
Treeview Scheme
My Code looks like this:
<TreeView ItemsSource="{Binding Design.AllSystems}">
<HierarchicalDataTemplate DataType="{x:Type core:System}" ItemsSource="{Binding Windings}">
<StackPanel>
<TextBlock Text="{Binding SystemType.Detail1}"/>
<TextBlock Text="{Binding SystemType.Detail2}"/>
<TextBlock Text="{Binding SystemType.Windings}"/>
</StackPanel>
</HierarchicalDataTemplate>
</TreeView>
I try to achieve following:
There is a list of systems which contains some Details without Child elements and a Collection with Windings. I want to display those Details if the User jumps into a System. Additional there is a static Windings Entry which should display all Windings in the Windings-Collection.
I can't figure out how to do this. I am very thankful for any approach.

Answer 1

I think the easiest way to do this is to represent your information in some common type and build the structure in view models. You could use different types for the different levels if it helps you represent them or encapsulate their functionality, but this ultimately depends on what you will do with it.
For example, define a tree view entity:
public class TreeViewItemViewModel : ViewModelBase
{
#region Properties
public string Name { get; set; }
public ObservableCollection<TreeViewItemViewModel> Children { get; set; }
#endregion
}
You could extend this for specific roles if desired, and encapsulate the complexity of assembling the various child structures from multiple collections via these entries:
public class SystemTreeViewItemViewModel : TreeViewItemViewModel
{
// Other Properties
}
public class WindingTreeViewItemViewModel : TreeViewItemViewModel
{
// Other Properties
}
Then assemble a larger hierarchy of nodes:
public ObservableCollection<TreeViewItemViewModel> Systems { get; } = new ObservableCollection<TreeViewItemViewModel>
{
new SystemTreeViewItemViewModel
{
Name= "System 1",
Children = new ObservableCollection<TreeViewItemViewModel>
{
new TreeViewItemViewModel { Name = "SystemDetail1" },
new TreeViewItemViewModel { Name = "SystemDetail1" },
new TreeViewItemViewModel
{
Name = "Windings",
Children = new ObservableCollection<TreeViewItemViewModel>
{
new WindingTreeViewItemViewModel
{
Name = "Winding A",
Children = new ObservableCollection<TreeViewItemViewModel>
{
new TreeViewItemViewModel { Name = "Detail1" },
new TreeViewItemViewModel { Name = "Detail2" },
}
},
new WindingTreeViewItemViewModel
{
Name = "Winding A",
Children = new ObservableCollection<TreeViewItemViewModel>
{
new TreeViewItemViewModel { Name = "Detail1" },
new TreeViewItemViewModel { Name = "Detail2" },
}
}
}
}
}
},
new SystemTreeViewItemViewModel
{
Name= "System 2"
}
};
Then define HierarchialDataTemplate entries for each node type:
<TreeView ItemsSource="{Binding Systems}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type viewModels:SystemTreeViewItemViewModel}" ItemsSource="{Binding Children}">
<Border Background="Red">
<TextBlock Text="{Binding Name}" />
</Border>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type viewModels:WindingTreeViewItemViewModel}" ItemsSource="{Binding Children}">
<Border Background="LimeGreen">
<TextBlock Text="{Binding Name}" />
</Border>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type viewModels:TreeViewItemViewModel}" ItemsSource="{Binding Children}">
<Border Background="Yellow">
<TextBlock Text="{Binding Name}" />
</Border>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
Example on GitHub