Display treeviewitem as grid rows in wpf
If the only problem with your code is that each treeview item renders with different grid column widths, you can try the "share size scope" feature to align them all. In the TreeView control, set Grid.IsSharedSizeScope
to true:-
Then add a SharedSizeGroup
to the ColumnDefinition
s that should have the same width across all the treeview items (your first column definition has a fixed width anyway, so it's not needed on that):-
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="Auto" SharedSizeGroup="A" />
<ColumnDefinition SharedSizeGroup="B" />
</Grid.ColumnDefinitions>
The values are just strings used to "name" the columns, and can be anything you like.
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