Display treeviewitem as grid lines in wpf

Question

Basically, you need to achieve something similar using the tree-based control in wpf: (random image)

_{(source: msdn.com )}

Where nodes and child nodes have the same headers.

I googled a lot, but my knowledge in wpf is not so good.

Here is my parent node class:

public class Parent : PropertyChangedBase { public string ParentName { get; set; } public BindableCollection<Child> Children { get; set; } } 

And the baby:

 public class Child : PropertyChangedBase { public string ChildName { get; set; } } 

My kind of xaml tree:

  <TreeView Grid.Row="0" Grid.Column="0" ItemsSource="{Binding Nodes}"> <TreeView.Resources> <HierarchicalDataTemplate DataType="{x:Type projectModels:Parent}" ItemsSource="{Binding Children}"> <StackPanel> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="20"></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <CheckBox Grid.Column="2"></CheckBox> <TextBlock Grid.Column="1" Text="{Binding ParentName}"> </TextBlock> </Grid> </StackPanel> </HierarchicalDataTemplate> <DataTemplate DataType="{x:Type projectModels:Child}"> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding ChildName}"></TextBlock> </StackPanel> </DataTemplate> </TreeView.Resources> </TreeView> 

I tried to use the Grid , but it is obvious that it creates different grids, so I can relay across the width of the column.

I tried how to make gridview a child of a tree in a wpf application , but they use ListView . Now this is not an option for me, since the functionality of the tree selection is closely related to my tree and the code behind.

Any ideas how to do this? Thank you

Answer 1

Try this xaml

  <TreeView x:Name="treeviewList" ItemsSource="{Binding ManufacturerList}"> <TreeView.ItemTemplate> <DataTemplate> <TreeViewItem ItemsSource="{Binding Models}"> <TreeViewItem.Header> <Grid Width="350"> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"></ColumnDefinition> <ColumnDefinition Width="Auto" MinWidth="50"></ColumnDefinition> <ColumnDefinition ></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Text="{Binding Task}" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="0"/> <TextBlock Text="{Binding durationTotal}" Margin="10,0,10,0" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1"/> <TextBlock Text="{Binding HeadNote}" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="2"/> </Grid> </TreeViewItem.Header> <TreeViewItem.ItemTemplate> <DataTemplate> <Grid Margin="-20,0,0,0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"></ColumnDefinition> <ColumnDefinition Width="Auto" MinWidth="50"></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Text="{Binding SubTask}" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="0"/> <TextBlock Text="{Binding Duration}" Margin="10,0,10,0" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1"/> <TextBlock Text="{Binding Notes}" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="2"/> </Grid> </DataTemplate> </TreeViewItem.ItemTemplate> </TreeViewItem> </DataTemplate> </TreeView.ItemTemplate> </TreeView> 

c # code

 public class Company { public string Task { get; set; } public string durationTotal { get; set; } public string HeadNote { get; set; } public List<Model> Models { get; set; } } public class Model { public string SubTask { get; set; } public string Duration { get; set; } public string Notes { get; set; } } 

---

  List<Company> ManufacturerList = new List<Company>(); ManufacturerList.Add(new Company() { Task = "Coding", durationTotal = "4", HeadNote = "Coding Task", Models = new List<Model>() {new Model(){SubTask = "Write", Duration = "2", Notes ="It pays the bills" }, new Model(){SubTask = "Compile", Duration = "1", Notes ="c# or go home" }, new Model(){SubTask = "Test", Duration = "1", Notes ="works on my m/c" },} }); ManufacturerList.Add(new Company() { Task = "Communicate", durationTotal = "2", HeadNote = "Communicate Task", Models = new List<Model>() {new Model(){SubTask = "Email", Duration = "0.5", Notes ="so much junk mail" }, new Model(){SubTask = "Blogs", Duration = "0.25", Notes ="blogs.msdn.com/delay" }, new Model(){SubTask = "Twitter", Duration = "0.25", Notes ="RT:nothing to report" },} }); treeviewList.ItemsSource = ManufacturerList; 

Result

Answer 2

If the only problem with your code is that each tree element is displayed with different column widths, you can try using the "share scope scope" function to align them all. In the TreeView control, set Grid.IsSharedSizeScope to true: -

Then add a SharedSizeGroup to the ColumnDefinition , which should have the same width in all elements of the tree (your definition of the first column has a fixed width anyway, so this is not required): -

 <Grid.ColumnDefinitions> <ColumnDefinition Width="20" /> <ColumnDefinition Width="Auto" SharedSizeGroup="A" /> <ColumnDefinition SharedSizeGroup="B" /> </Grid.ColumnDefinitions> 

Values ​​are just strings used to “name” the columns and may be whatever you like.