How to set DataTemplate for WPF TreeView to display all list items?

Question

I would like to visualize the following data structure using TreeViews in WPF:

class MyDataContext { ICollectionView Outers {get;set;} //... } class Outer { string Name {get;set;} IEnumberable<Inner> Actions {get;set;} } class Inner { string Description {get;set;} Command OnClick {get;set;} } 

This is my attempt:

 <!-- DataContext is MyDataContext at this point --> <TreeView ItemsSource="{Binding Path=Outers}"> <TreeView.Resources> <DataTemplate DataType="{x:Type myns:Outer}"> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Path=Name}"/> <TreeView ItemsSource="{Binding Path=Actions}" > <DataTemplate DataType="{x:Type myns:Inner}"> <Button Command={Binding Path=OnClick}> <TextBlock Text="{Binding Path=Description}"/> </Button> </DataTemplate> </TreeView> </StackPanel> </DataTemplate> </TreeView.Resources> </TreeView> 

This seems like something is wrong with this access, since I get the following InvalidOperationException :

 Operation is not valid while ItemsSource is in use. Access and modify elements with ItemsControl.ItemsSource instead. 

If I drop the internal TreeView, there is no exception (but also no buttons, of course).

Answer 1

I used the Mateusz ( HierarchicalDataTemplate ) page and after reading the answer to this question: Bind Collection to StackPanel I found a solution that did what I wanted:

Here the players (level 3) are on the same line as the team (level 2):

 <TreeView ItemsSource="{Binding League}"> <!-- Conference template --> <TreeView.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding Teams}"> <TextBlock Foreground="Red" Text="{Binding Name}" /> <!-- Team template --> <HierarchicalDataTemplate.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Name}"/> <ItemsControl ItemsSource="{Binding Players}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"> </StackPanel> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Button Content="{Binding }"/> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </StackPanel> </DataTemplate> </HierarchicalDataTemplate.ItemTemplate> </HierarchicalDataTemplate> </TreeView.ItemTemplate> </TreeView> 

Answer 2

Try using the HierarchicalDataTemplate with TreeView.

HierarchicalDataTemplate

Answer 3

Maybe this will help you a bit;)

xaml:

  <TreeView ItemsSource="{Binding Outers}"> <TreeView.ItemTemplate> <DataTemplate> <TreeViewItem ItemsSource="{Binding Actions}" Header="{Binding Name}"> <TreeViewItem.ItemTemplate> <DataTemplate> <Button Command="{Binding Click}" Content="{Binding Name}" /> </DataTemplate> </TreeViewItem.ItemTemplate> </TreeViewItem> </DataTemplate> </TreeView.ItemTemplate> </TreeView> 

Data:

 public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); DataContext = new MyDataContext(); } } class MyDataContext { public ObservableCollection<Outer> Outers { get; set; } public MyDataContext() { Outers = new ObservableCollection<Outer>(); Outers.Add(new Outer() { Name = "Herp" }); Outers.Add(new Outer() { Name = "Derp" }); } } class Outer { public string Name { get; set; } public ObservableCollection<Inner> Actions { get; set; } public Outer() { Actions = new ObservableCollection<Inner>(); Actions.Add(new Inner { Name = "Test1" }); Actions.Add(new Inner { Name = "Test2" }); Actions.Add(new Inner { Name = "Test3" }); Actions.Add(new Inner { Name = "Test4" }); Actions.Add(new Inner { Name = "Test5" }); Actions.Add(new Inner { Name = "Test6" }); Actions.Add(new Inner { Name = "Test7" }); } } class Inner { public string Name { get; set; } public ICommand OnClick { get; set; } } 

And if you use the commands ... Try this example: ICommand