WPF C#, Datagrid with multi level header
Good day.
Please I need to create a datagrid that looks like this screenshot
I found some code that gives direction on how to do similar, but I'm a bit lost in the implementation.
Here is the code which I'm trying to edit
<DataGrid ItemsSource="{Binding }" Name="dataGrid1" AutoGenerateColumns="False"
ColumnHeaderHeight="50" >
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Header="Main1" Width="60"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Width="60"/>
<DataGridColumnHeader Content="Nested1" Width="60"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Nested2" Width="60"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontWeight="Bold" Text="Main1"/>
<DataGridColumnHeader Content="Nested2" Width="60" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Width="60"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Nested3" Width="60"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
I edited the code to this
<DataGrid Grid.Column="2"
Grid.Row="1" Grid.RowSpan="2"
Height="100"
x:Name="assetListGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="10 10 20 20"
Background="{StaticResource ForegroundLightBrush}"
LoadingRow="AddIndexNumberWhenLoadingRow"
BorderThickness="1"
VerticalScrollBarVisibility="Auto"
AutoGenerateColumns="False"
ItemsSource="{Binding AssetList, Mode=TwoWay}"
>
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="{StaticResource WordBlueBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Background="{StaticResource WordBlueBrush}">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
/>
<DataGridColumnHeader Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}" Text="Asset"/>
<DataGridColumnHeader Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Comment" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Creation TimeStamp" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid.Columns>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Location" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Value" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid>
And here is the result
I don't know how to add the next top column ( Manufacturer and its sub columns)
The sub columns of "Asset" looks like a gig-zaw and I can't figure out how to even them out. I have tried to add thesame heights to all column headers to no avail.
Moreover, I'm also finding it hard to modify the cell template and bind it to a particular property in my viewmodel. This is because some of the cells will contain both a textbox and a button.
Can anyone be kind enough to direct me on how to
- Even out the heights of the subcolumn headers
- Add the 2nd top column
- Override the cell template for a single column to contain a button and a text block?
enter code here
c# wpf datagrid datagridcolumnheader
add a comment |
Good day.
Please I need to create a datagrid that looks like this screenshot
I found some code that gives direction on how to do similar, but I'm a bit lost in the implementation.
Here is the code which I'm trying to edit
<DataGrid ItemsSource="{Binding }" Name="dataGrid1" AutoGenerateColumns="False"
ColumnHeaderHeight="50" >
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Header="Main1" Width="60"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Width="60"/>
<DataGridColumnHeader Content="Nested1" Width="60"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Nested2" Width="60"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontWeight="Bold" Text="Main1"/>
<DataGridColumnHeader Content="Nested2" Width="60" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Width="60"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Nested3" Width="60"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
I edited the code to this
<DataGrid Grid.Column="2"
Grid.Row="1" Grid.RowSpan="2"
Height="100"
x:Name="assetListGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="10 10 20 20"
Background="{StaticResource ForegroundLightBrush}"
LoadingRow="AddIndexNumberWhenLoadingRow"
BorderThickness="1"
VerticalScrollBarVisibility="Auto"
AutoGenerateColumns="False"
ItemsSource="{Binding AssetList, Mode=TwoWay}"
>
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="{StaticResource WordBlueBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Background="{StaticResource WordBlueBrush}">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
/>
<DataGridColumnHeader Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}" Text="Asset"/>
<DataGridColumnHeader Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Comment" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Creation TimeStamp" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid.Columns>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Location" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Value" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid>
And here is the result
I don't know how to add the next top column ( Manufacturer and its sub columns)
The sub columns of "Asset" looks like a gig-zaw and I can't figure out how to even them out. I have tried to add thesame heights to all column headers to no avail.
Moreover, I'm also finding it hard to modify the cell template and bind it to a particular property in my viewmodel. This is because some of the cells will contain both a textbox and a button.
Can anyone be kind enough to direct me on how to
- Even out the heights of the subcolumn headers
- Add the 2nd top column
- Override the cell template for a single column to contain a button and a text block?
enter code here
c# wpf datagrid datagridcolumnheader
Might be a duplicate: stackoverflow.com/questions/17652039/…
– Klaus Gütter
Nov 18 '18 at 6:47
No, I have tried that as well. The best answer that came close to what I need is the one for this question stackoverflow.com/questions/24852736/…
– Ken Janka
Nov 18 '18 at 6:58
I have succeeded to edit the cell template. What is left to be done are the height and adding the 2nd top column
– Ken Janka
Nov 18 '18 at 8:16
add a comment |
Good day.
Please I need to create a datagrid that looks like this screenshot
I found some code that gives direction on how to do similar, but I'm a bit lost in the implementation.
Here is the code which I'm trying to edit
<DataGrid ItemsSource="{Binding }" Name="dataGrid1" AutoGenerateColumns="False"
ColumnHeaderHeight="50" >
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Header="Main1" Width="60"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Width="60"/>
<DataGridColumnHeader Content="Nested1" Width="60"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Nested2" Width="60"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontWeight="Bold" Text="Main1"/>
<DataGridColumnHeader Content="Nested2" Width="60" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Width="60"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Nested3" Width="60"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
I edited the code to this
<DataGrid Grid.Column="2"
Grid.Row="1" Grid.RowSpan="2"
Height="100"
x:Name="assetListGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="10 10 20 20"
Background="{StaticResource ForegroundLightBrush}"
LoadingRow="AddIndexNumberWhenLoadingRow"
BorderThickness="1"
VerticalScrollBarVisibility="Auto"
AutoGenerateColumns="False"
ItemsSource="{Binding AssetList, Mode=TwoWay}"
>
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="{StaticResource WordBlueBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Background="{StaticResource WordBlueBrush}">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
/>
<DataGridColumnHeader Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}" Text="Asset"/>
<DataGridColumnHeader Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Comment" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Creation TimeStamp" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid.Columns>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Location" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Value" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid>
And here is the result
I don't know how to add the next top column ( Manufacturer and its sub columns)
The sub columns of "Asset" looks like a gig-zaw and I can't figure out how to even them out. I have tried to add thesame heights to all column headers to no avail.
Moreover, I'm also finding it hard to modify the cell template and bind it to a particular property in my viewmodel. This is because some of the cells will contain both a textbox and a button.
Can anyone be kind enough to direct me on how to
- Even out the heights of the subcolumn headers
- Add the 2nd top column
- Override the cell template for a single column to contain a button and a text block?
enter code here
c# wpf datagrid datagridcolumnheader
Good day.
Please I need to create a datagrid that looks like this screenshot
I found some code that gives direction on how to do similar, but I'm a bit lost in the implementation.
Here is the code which I'm trying to edit
<DataGrid ItemsSource="{Binding }" Name="dataGrid1" AutoGenerateColumns="False"
ColumnHeaderHeight="50" >
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Header="Main1" Width="60"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Width="60"/>
<DataGridColumnHeader Content="Nested1" Width="60"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Nested2" Width="60"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontWeight="Bold" Text="Main1"/>
<DataGridColumnHeader Content="Nested2" Width="60" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Width="60"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Nested3" Width="60"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
I edited the code to this
<DataGrid Grid.Column="2"
Grid.Row="1" Grid.RowSpan="2"
Height="100"
x:Name="assetListGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="10 10 20 20"
Background="{StaticResource ForegroundLightBrush}"
LoadingRow="AddIndexNumberWhenLoadingRow"
BorderThickness="1"
VerticalScrollBarVisibility="Auto"
AutoGenerateColumns="False"
ItemsSource="{Binding AssetList, Mode=TwoWay}"
>
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="{StaticResource WordBlueBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Background="{StaticResource WordBlueBrush}">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
/>
<DataGridColumnHeader Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}" Text="Asset"/>
<DataGridColumnHeader Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Comment" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Creation TimeStamp" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid.Columns>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Location" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Value" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid>
And here is the result
I don't know how to add the next top column ( Manufacturer and its sub columns)
The sub columns of "Asset" looks like a gig-zaw and I can't figure out how to even them out. I have tried to add thesame heights to all column headers to no avail.
Moreover, I'm also finding it hard to modify the cell template and bind it to a particular property in my viewmodel. This is because some of the cells will contain both a textbox and a button.
Can anyone be kind enough to direct me on how to
- Even out the heights of the subcolumn headers
- Add the 2nd top column
- Override the cell template for a single column to contain a button and a text block?
enter code here
c# wpf datagrid datagridcolumnheader
c# wpf datagrid datagridcolumnheader
asked Nov 18 '18 at 6:43
Ken JankaKen Janka
338
338
Might be a duplicate: stackoverflow.com/questions/17652039/…
– Klaus Gütter
Nov 18 '18 at 6:47
No, I have tried that as well. The best answer that came close to what I need is the one for this question stackoverflow.com/questions/24852736/…
– Ken Janka
Nov 18 '18 at 6:58
I have succeeded to edit the cell template. What is left to be done are the height and adding the 2nd top column
– Ken Janka
Nov 18 '18 at 8:16
add a comment |
Might be a duplicate: stackoverflow.com/questions/17652039/…
– Klaus Gütter
Nov 18 '18 at 6:47
No, I have tried that as well. The best answer that came close to what I need is the one for this question stackoverflow.com/questions/24852736/…
– Ken Janka
Nov 18 '18 at 6:58
I have succeeded to edit the cell template. What is left to be done are the height and adding the 2nd top column
– Ken Janka
Nov 18 '18 at 8:16
Might be a duplicate: stackoverflow.com/questions/17652039/…
– Klaus Gütter
Nov 18 '18 at 6:47
Might be a duplicate: stackoverflow.com/questions/17652039/…
– Klaus Gütter
Nov 18 '18 at 6:47
No, I have tried that as well. The best answer that came close to what I need is the one for this question stackoverflow.com/questions/24852736/…
– Ken Janka
Nov 18 '18 at 6:58
No, I have tried that as well. The best answer that came close to what I need is the one for this question stackoverflow.com/questions/24852736/…
– Ken Janka
Nov 18 '18 at 6:58
I have succeeded to edit the cell template. What is left to be done are the height and adding the 2nd top column
– Ken Janka
Nov 18 '18 at 8:16
I have succeeded to edit the cell template. What is left to be done are the height and adding the 2nd top column
– Ken Janka
Nov 18 '18 at 8:16
add a comment |
3 Answers
3
active
oldest
votes
Here is the answer to couple of questions
- Even out the heights of the subcolumn headers
You are missing fonts on Role, Comment, Creation Timestamp columns
FontSize="{StaticResource FontSizeLarge}" FontFamily="{StaticResource LatoBold}"
- Add the 2nd top column
You just have to follow the same pattern of design for the next set of columns
<DataGrid Grid.Column="2"
Grid.Row="1" Grid.RowSpan="2"
Height="100"
x:Name="assetListGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="10 10 20 20"
BorderThickness="1"
VerticalScrollBarVisibility="Auto"
AutoGenerateColumns="False"
ItemsSource="{Binding AssetList, Mode=TwoWay}"
>
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid >
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock/>
<DataGridColumnHeader Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="Asset"/>
<DataGridColumnHeader Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Comment" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Creation TimeStamp" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock/>
<DataGridColumnHeader Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="Manufacturer "/>
<DataGridColumnHeader Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Comment" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Creation TimeStamp" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid.Columns>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Location" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Value" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid>
Hope it helps.
Thanks. Your answer actually helped me to implement the full datagrid as I wanted. It was more helpful than the response of whoever marked my question as "lack of research effort or unclear". Below is the full implementation.
– Ken Janka
Nov 19 '18 at 0:16
add a comment |
this is not answer but maybe helps :
<DataGrid.Columns>
<DataGridTextColumn Header="1">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<Grid MinWidth="200">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="header" Grid.ColumnSpan="3" HorizontalAlignment="Center"></TextBlock>
<TextBlock Grid.Row="1" Text="col"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="col1"/>
<TextBlock Grid.Row="1" Grid.Column="2" Text="col2"/>
</Grid>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="2"></DataGridTextColumn>
</DataGrid.Columns>
add a comment |
This is the full implementation of my datagrid
<DataGrid Grid.Column="2"
Grid.Row="1" Grid.RowSpan="2"
x:Name="assetListGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="10 10 20 20"
Background="{StaticResource ForegroundLightBrush}"
LoadingRow="AddIndexNumberWhenLoadingRow"
BorderThickness="1"
VerticalScrollBarVisibility="Auto"
AutoGenerateColumns="False"
ItemsSource="{Binding AssetList, Mode=TwoWay}"
>
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<!--<Setter Property="Background" Value="{StaticResource WordRedBrush}" />-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Background="{StaticResource WordBlueBrush}" >
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DatagridColumnHeader2" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="BorderBrush" Value="{StaticResource ForegroundLightBrush}"/>
<Setter Property="BorderThickness" Value="0 0 1 0" />
<Setter Property="Background" Value="{StaticResource WordOrangeBrush}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Height" Value="30" />
<Setter Property="FontSize" Value="{StaticResource FontSizeLarge}" />
<Setter Property="Foreground" Value="{StaticResource ForegroundLightBrush}" />
</Style>
</DataGrid.Resources>
<!-- Columns -->
<DataGrid.Columns>
<!-- Asset Properties -->
<!-- Asset Number-->
<DataGridTemplateColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock
FontSize="{StaticResource FontSizeXLarge}"
FontFamily="{StaticResource LatoBold}"
HorizontalAlignment="Center"
Height="40"
/>
<DataGridColumnHeader
HorizontalContentAlignment="Center"
Width="250" Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<TextBox Width="90" IsReadOnly="True"
Text="{Binding Name}"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"/>
<Button Margin="5 0 0 13" HorizontalAlignment="Right"
VerticalAlignment="Center"
Content="Right Click"
Style="{StaticResource ListViewButton}" >
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Add Critical Point" />
</ContextMenu>
</Button.ContextMenu>
</Button>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- Name -->
<DataGridTemplateColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
MinWidth="60"
Width="auto"
x:Name="nameHeader"
Text="Asset"/>
<DataGridColumnHeader Width="{Binding ActualWidth, ElementName=nameHeader}" HorizontalContentAlignment="Center"
Content="Name" MaxWidth="150" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- Role -->
<DataGridTemplateColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
Width="auto"
MinWidth="45"
MaxWidth="150"
x:Name="roleHeader"
/>
<DataGridColumnHeader HorizontalContentAlignment="Center" Width="{Binding Path=ActualWidth, ElementName=roleHeader}"
MaxWidth="150" Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- Critical Point-->
<!-- CP Number-->
<DataGridTemplateColumn Header="Critical Point"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock
FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
HorizontalAlignment="Center"
Height="40"
Text="Critical Point"
Padding="0 3 0 0"
/>
<DataGridColumnHeader Style="{StaticResource DatagridColumnHeader2}"
Width="250" Content="CP Number"/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox Width="100" IsReadOnly="True"
Text="{Binding CriticalPoint.CPNumber}"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"/>
<Button Margin="5 0 0 13" HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="Right Click"
Style="{StaticResource ListViewButton}" >
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Delete Critical Point" />
</ContextMenu>
</Button.ContextMenu>
</Button>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!--Name-->
<DataGridTemplateColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
Width="auto"
MinWidth="60"
MaxWidth="150"
x:Name="commentHeader"
/>
<DataGridColumnHeader Style="{StaticResource DatagridColumnHeader2}" Width="{Binding Path=ActualWidth, ElementName=commentHeader}"
MaxWidth="150" Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!--Role-->
<DataGridTemplateColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
Width="auto"
MinWidth="60"
MaxWidth="150"
x:Name="commentHeader"
/>
<DataGridColumnHeader Style="{StaticResource DatagridColumnHeader2}" Width="{Binding Path=ActualWidth, ElementName=commentHeader}"
MaxWidth="150" Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53358528%2fwpf-c-datagrid-with-multi-level-header%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Here is the answer to couple of questions
- Even out the heights of the subcolumn headers
You are missing fonts on Role, Comment, Creation Timestamp columns
FontSize="{StaticResource FontSizeLarge}" FontFamily="{StaticResource LatoBold}"
- Add the 2nd top column
You just have to follow the same pattern of design for the next set of columns
<DataGrid Grid.Column="2"
Grid.Row="1" Grid.RowSpan="2"
Height="100"
x:Name="assetListGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="10 10 20 20"
BorderThickness="1"
VerticalScrollBarVisibility="Auto"
AutoGenerateColumns="False"
ItemsSource="{Binding AssetList, Mode=TwoWay}"
>
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid >
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock/>
<DataGridColumnHeader Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="Asset"/>
<DataGridColumnHeader Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Comment" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Creation TimeStamp" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock/>
<DataGridColumnHeader Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="Manufacturer "/>
<DataGridColumnHeader Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Comment" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Creation TimeStamp" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid.Columns>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Location" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Value" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid>
Hope it helps.
Thanks. Your answer actually helped me to implement the full datagrid as I wanted. It was more helpful than the response of whoever marked my question as "lack of research effort or unclear". Below is the full implementation.
– Ken Janka
Nov 19 '18 at 0:16
add a comment |
Here is the answer to couple of questions
- Even out the heights of the subcolumn headers
You are missing fonts on Role, Comment, Creation Timestamp columns
FontSize="{StaticResource FontSizeLarge}" FontFamily="{StaticResource LatoBold}"
- Add the 2nd top column
You just have to follow the same pattern of design for the next set of columns
<DataGrid Grid.Column="2"
Grid.Row="1" Grid.RowSpan="2"
Height="100"
x:Name="assetListGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="10 10 20 20"
BorderThickness="1"
VerticalScrollBarVisibility="Auto"
AutoGenerateColumns="False"
ItemsSource="{Binding AssetList, Mode=TwoWay}"
>
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid >
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock/>
<DataGridColumnHeader Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="Asset"/>
<DataGridColumnHeader Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Comment" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Creation TimeStamp" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock/>
<DataGridColumnHeader Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="Manufacturer "/>
<DataGridColumnHeader Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Comment" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Creation TimeStamp" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid.Columns>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Location" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Value" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid>
Hope it helps.
Thanks. Your answer actually helped me to implement the full datagrid as I wanted. It was more helpful than the response of whoever marked my question as "lack of research effort or unclear". Below is the full implementation.
– Ken Janka
Nov 19 '18 at 0:16
add a comment |
Here is the answer to couple of questions
- Even out the heights of the subcolumn headers
You are missing fonts on Role, Comment, Creation Timestamp columns
FontSize="{StaticResource FontSizeLarge}" FontFamily="{StaticResource LatoBold}"
- Add the 2nd top column
You just have to follow the same pattern of design for the next set of columns
<DataGrid Grid.Column="2"
Grid.Row="1" Grid.RowSpan="2"
Height="100"
x:Name="assetListGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="10 10 20 20"
BorderThickness="1"
VerticalScrollBarVisibility="Auto"
AutoGenerateColumns="False"
ItemsSource="{Binding AssetList, Mode=TwoWay}"
>
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid >
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock/>
<DataGridColumnHeader Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="Asset"/>
<DataGridColumnHeader Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Comment" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Creation TimeStamp" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock/>
<DataGridColumnHeader Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="Manufacturer "/>
<DataGridColumnHeader Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Comment" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Creation TimeStamp" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid.Columns>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Location" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Value" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid>
Hope it helps.
Here is the answer to couple of questions
- Even out the heights of the subcolumn headers
You are missing fonts on Role, Comment, Creation Timestamp columns
FontSize="{StaticResource FontSizeLarge}" FontFamily="{StaticResource LatoBold}"
- Add the 2nd top column
You just have to follow the same pattern of design for the next set of columns
<DataGrid Grid.Column="2"
Grid.Row="1" Grid.RowSpan="2"
Height="100"
x:Name="assetListGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="10 10 20 20"
BorderThickness="1"
VerticalScrollBarVisibility="Auto"
AutoGenerateColumns="False"
ItemsSource="{Binding AssetList, Mode=TwoWay}"
>
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid >
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock/>
<DataGridColumnHeader Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="Asset"/>
<DataGridColumnHeader Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Comment" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Creation TimeStamp" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock/>
<DataGridColumnHeader Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="Manufacturer "/>
<DataGridColumnHeader Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Comment" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Creation TimeStamp" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid.Columns>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Location" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock />
<DataGridColumnHeader Content="Value" />
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
</DataGrid>
Hope it helps.
answered Nov 18 '18 at 19:04
RajNRajN
3,64521021
3,64521021
Thanks. Your answer actually helped me to implement the full datagrid as I wanted. It was more helpful than the response of whoever marked my question as "lack of research effort or unclear". Below is the full implementation.
– Ken Janka
Nov 19 '18 at 0:16
add a comment |
Thanks. Your answer actually helped me to implement the full datagrid as I wanted. It was more helpful than the response of whoever marked my question as "lack of research effort or unclear". Below is the full implementation.
– Ken Janka
Nov 19 '18 at 0:16
Thanks. Your answer actually helped me to implement the full datagrid as I wanted. It was more helpful than the response of whoever marked my question as "lack of research effort or unclear". Below is the full implementation.
– Ken Janka
Nov 19 '18 at 0:16
Thanks. Your answer actually helped me to implement the full datagrid as I wanted. It was more helpful than the response of whoever marked my question as "lack of research effort or unclear". Below is the full implementation.
– Ken Janka
Nov 19 '18 at 0:16
add a comment |
this is not answer but maybe helps :
<DataGrid.Columns>
<DataGridTextColumn Header="1">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<Grid MinWidth="200">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="header" Grid.ColumnSpan="3" HorizontalAlignment="Center"></TextBlock>
<TextBlock Grid.Row="1" Text="col"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="col1"/>
<TextBlock Grid.Row="1" Grid.Column="2" Text="col2"/>
</Grid>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="2"></DataGridTextColumn>
</DataGrid.Columns>
add a comment |
this is not answer but maybe helps :
<DataGrid.Columns>
<DataGridTextColumn Header="1">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<Grid MinWidth="200">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="header" Grid.ColumnSpan="3" HorizontalAlignment="Center"></TextBlock>
<TextBlock Grid.Row="1" Text="col"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="col1"/>
<TextBlock Grid.Row="1" Grid.Column="2" Text="col2"/>
</Grid>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="2"></DataGridTextColumn>
</DataGrid.Columns>
add a comment |
this is not answer but maybe helps :
<DataGrid.Columns>
<DataGridTextColumn Header="1">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<Grid MinWidth="200">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="header" Grid.ColumnSpan="3" HorizontalAlignment="Center"></TextBlock>
<TextBlock Grid.Row="1" Text="col"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="col1"/>
<TextBlock Grid.Row="1" Grid.Column="2" Text="col2"/>
</Grid>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="2"></DataGridTextColumn>
</DataGrid.Columns>
this is not answer but maybe helps :
<DataGrid.Columns>
<DataGridTextColumn Header="1">
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<Grid MinWidth="200">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="header" Grid.ColumnSpan="3" HorizontalAlignment="Center"></TextBlock>
<TextBlock Grid.Row="1" Text="col"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="col1"/>
<TextBlock Grid.Row="1" Grid.Column="2" Text="col2"/>
</Grid>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="2"></DataGridTextColumn>
</DataGrid.Columns>
answered Nov 18 '18 at 7:58
Mahdi KhaliliMahdi Khalili
11411
11411
add a comment |
add a comment |
This is the full implementation of my datagrid
<DataGrid Grid.Column="2"
Grid.Row="1" Grid.RowSpan="2"
x:Name="assetListGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="10 10 20 20"
Background="{StaticResource ForegroundLightBrush}"
LoadingRow="AddIndexNumberWhenLoadingRow"
BorderThickness="1"
VerticalScrollBarVisibility="Auto"
AutoGenerateColumns="False"
ItemsSource="{Binding AssetList, Mode=TwoWay}"
>
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<!--<Setter Property="Background" Value="{StaticResource WordRedBrush}" />-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Background="{StaticResource WordBlueBrush}" >
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DatagridColumnHeader2" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="BorderBrush" Value="{StaticResource ForegroundLightBrush}"/>
<Setter Property="BorderThickness" Value="0 0 1 0" />
<Setter Property="Background" Value="{StaticResource WordOrangeBrush}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Height" Value="30" />
<Setter Property="FontSize" Value="{StaticResource FontSizeLarge}" />
<Setter Property="Foreground" Value="{StaticResource ForegroundLightBrush}" />
</Style>
</DataGrid.Resources>
<!-- Columns -->
<DataGrid.Columns>
<!-- Asset Properties -->
<!-- Asset Number-->
<DataGridTemplateColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock
FontSize="{StaticResource FontSizeXLarge}"
FontFamily="{StaticResource LatoBold}"
HorizontalAlignment="Center"
Height="40"
/>
<DataGridColumnHeader
HorizontalContentAlignment="Center"
Width="250" Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<TextBox Width="90" IsReadOnly="True"
Text="{Binding Name}"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"/>
<Button Margin="5 0 0 13" HorizontalAlignment="Right"
VerticalAlignment="Center"
Content="Right Click"
Style="{StaticResource ListViewButton}" >
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Add Critical Point" />
</ContextMenu>
</Button.ContextMenu>
</Button>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- Name -->
<DataGridTemplateColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
MinWidth="60"
Width="auto"
x:Name="nameHeader"
Text="Asset"/>
<DataGridColumnHeader Width="{Binding ActualWidth, ElementName=nameHeader}" HorizontalContentAlignment="Center"
Content="Name" MaxWidth="150" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- Role -->
<DataGridTemplateColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
Width="auto"
MinWidth="45"
MaxWidth="150"
x:Name="roleHeader"
/>
<DataGridColumnHeader HorizontalContentAlignment="Center" Width="{Binding Path=ActualWidth, ElementName=roleHeader}"
MaxWidth="150" Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- Critical Point-->
<!-- CP Number-->
<DataGridTemplateColumn Header="Critical Point"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock
FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
HorizontalAlignment="Center"
Height="40"
Text="Critical Point"
Padding="0 3 0 0"
/>
<DataGridColumnHeader Style="{StaticResource DatagridColumnHeader2}"
Width="250" Content="CP Number"/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox Width="100" IsReadOnly="True"
Text="{Binding CriticalPoint.CPNumber}"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"/>
<Button Margin="5 0 0 13" HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="Right Click"
Style="{StaticResource ListViewButton}" >
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Delete Critical Point" />
</ContextMenu>
</Button.ContextMenu>
</Button>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!--Name-->
<DataGridTemplateColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
Width="auto"
MinWidth="60"
MaxWidth="150"
x:Name="commentHeader"
/>
<DataGridColumnHeader Style="{StaticResource DatagridColumnHeader2}" Width="{Binding Path=ActualWidth, ElementName=commentHeader}"
MaxWidth="150" Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!--Role-->
<DataGridTemplateColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
Width="auto"
MinWidth="60"
MaxWidth="150"
x:Name="commentHeader"
/>
<DataGridColumnHeader Style="{StaticResource DatagridColumnHeader2}" Width="{Binding Path=ActualWidth, ElementName=commentHeader}"
MaxWidth="150" Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
add a comment |
This is the full implementation of my datagrid
<DataGrid Grid.Column="2"
Grid.Row="1" Grid.RowSpan="2"
x:Name="assetListGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="10 10 20 20"
Background="{StaticResource ForegroundLightBrush}"
LoadingRow="AddIndexNumberWhenLoadingRow"
BorderThickness="1"
VerticalScrollBarVisibility="Auto"
AutoGenerateColumns="False"
ItemsSource="{Binding AssetList, Mode=TwoWay}"
>
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<!--<Setter Property="Background" Value="{StaticResource WordRedBrush}" />-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Background="{StaticResource WordBlueBrush}" >
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DatagridColumnHeader2" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="BorderBrush" Value="{StaticResource ForegroundLightBrush}"/>
<Setter Property="BorderThickness" Value="0 0 1 0" />
<Setter Property="Background" Value="{StaticResource WordOrangeBrush}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Height" Value="30" />
<Setter Property="FontSize" Value="{StaticResource FontSizeLarge}" />
<Setter Property="Foreground" Value="{StaticResource ForegroundLightBrush}" />
</Style>
</DataGrid.Resources>
<!-- Columns -->
<DataGrid.Columns>
<!-- Asset Properties -->
<!-- Asset Number-->
<DataGridTemplateColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock
FontSize="{StaticResource FontSizeXLarge}"
FontFamily="{StaticResource LatoBold}"
HorizontalAlignment="Center"
Height="40"
/>
<DataGridColumnHeader
HorizontalContentAlignment="Center"
Width="250" Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<TextBox Width="90" IsReadOnly="True"
Text="{Binding Name}"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"/>
<Button Margin="5 0 0 13" HorizontalAlignment="Right"
VerticalAlignment="Center"
Content="Right Click"
Style="{StaticResource ListViewButton}" >
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Add Critical Point" />
</ContextMenu>
</Button.ContextMenu>
</Button>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- Name -->
<DataGridTemplateColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
MinWidth="60"
Width="auto"
x:Name="nameHeader"
Text="Asset"/>
<DataGridColumnHeader Width="{Binding ActualWidth, ElementName=nameHeader}" HorizontalContentAlignment="Center"
Content="Name" MaxWidth="150" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- Role -->
<DataGridTemplateColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
Width="auto"
MinWidth="45"
MaxWidth="150"
x:Name="roleHeader"
/>
<DataGridColumnHeader HorizontalContentAlignment="Center" Width="{Binding Path=ActualWidth, ElementName=roleHeader}"
MaxWidth="150" Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- Critical Point-->
<!-- CP Number-->
<DataGridTemplateColumn Header="Critical Point"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock
FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
HorizontalAlignment="Center"
Height="40"
Text="Critical Point"
Padding="0 3 0 0"
/>
<DataGridColumnHeader Style="{StaticResource DatagridColumnHeader2}"
Width="250" Content="CP Number"/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox Width="100" IsReadOnly="True"
Text="{Binding CriticalPoint.CPNumber}"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"/>
<Button Margin="5 0 0 13" HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="Right Click"
Style="{StaticResource ListViewButton}" >
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Delete Critical Point" />
</ContextMenu>
</Button.ContextMenu>
</Button>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!--Name-->
<DataGridTemplateColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
Width="auto"
MinWidth="60"
MaxWidth="150"
x:Name="commentHeader"
/>
<DataGridColumnHeader Style="{StaticResource DatagridColumnHeader2}" Width="{Binding Path=ActualWidth, ElementName=commentHeader}"
MaxWidth="150" Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!--Role-->
<DataGridTemplateColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
Width="auto"
MinWidth="60"
MaxWidth="150"
x:Name="commentHeader"
/>
<DataGridColumnHeader Style="{StaticResource DatagridColumnHeader2}" Width="{Binding Path=ActualWidth, ElementName=commentHeader}"
MaxWidth="150" Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
add a comment |
This is the full implementation of my datagrid
<DataGrid Grid.Column="2"
Grid.Row="1" Grid.RowSpan="2"
x:Name="assetListGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="10 10 20 20"
Background="{StaticResource ForegroundLightBrush}"
LoadingRow="AddIndexNumberWhenLoadingRow"
BorderThickness="1"
VerticalScrollBarVisibility="Auto"
AutoGenerateColumns="False"
ItemsSource="{Binding AssetList, Mode=TwoWay}"
>
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<!--<Setter Property="Background" Value="{StaticResource WordRedBrush}" />-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Background="{StaticResource WordBlueBrush}" >
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DatagridColumnHeader2" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="BorderBrush" Value="{StaticResource ForegroundLightBrush}"/>
<Setter Property="BorderThickness" Value="0 0 1 0" />
<Setter Property="Background" Value="{StaticResource WordOrangeBrush}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Height" Value="30" />
<Setter Property="FontSize" Value="{StaticResource FontSizeLarge}" />
<Setter Property="Foreground" Value="{StaticResource ForegroundLightBrush}" />
</Style>
</DataGrid.Resources>
<!-- Columns -->
<DataGrid.Columns>
<!-- Asset Properties -->
<!-- Asset Number-->
<DataGridTemplateColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock
FontSize="{StaticResource FontSizeXLarge}"
FontFamily="{StaticResource LatoBold}"
HorizontalAlignment="Center"
Height="40"
/>
<DataGridColumnHeader
HorizontalContentAlignment="Center"
Width="250" Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<TextBox Width="90" IsReadOnly="True"
Text="{Binding Name}"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"/>
<Button Margin="5 0 0 13" HorizontalAlignment="Right"
VerticalAlignment="Center"
Content="Right Click"
Style="{StaticResource ListViewButton}" >
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Add Critical Point" />
</ContextMenu>
</Button.ContextMenu>
</Button>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- Name -->
<DataGridTemplateColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
MinWidth="60"
Width="auto"
x:Name="nameHeader"
Text="Asset"/>
<DataGridColumnHeader Width="{Binding ActualWidth, ElementName=nameHeader}" HorizontalContentAlignment="Center"
Content="Name" MaxWidth="150" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- Role -->
<DataGridTemplateColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
Width="auto"
MinWidth="45"
MaxWidth="150"
x:Name="roleHeader"
/>
<DataGridColumnHeader HorizontalContentAlignment="Center" Width="{Binding Path=ActualWidth, ElementName=roleHeader}"
MaxWidth="150" Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- Critical Point-->
<!-- CP Number-->
<DataGridTemplateColumn Header="Critical Point"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock
FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
HorizontalAlignment="Center"
Height="40"
Text="Critical Point"
Padding="0 3 0 0"
/>
<DataGridColumnHeader Style="{StaticResource DatagridColumnHeader2}"
Width="250" Content="CP Number"/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox Width="100" IsReadOnly="True"
Text="{Binding CriticalPoint.CPNumber}"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"/>
<Button Margin="5 0 0 13" HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="Right Click"
Style="{StaticResource ListViewButton}" >
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Delete Critical Point" />
</ContextMenu>
</Button.ContextMenu>
</Button>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!--Name-->
<DataGridTemplateColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
Width="auto"
MinWidth="60"
MaxWidth="150"
x:Name="commentHeader"
/>
<DataGridColumnHeader Style="{StaticResource DatagridColumnHeader2}" Width="{Binding Path=ActualWidth, ElementName=commentHeader}"
MaxWidth="150" Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!--Role-->
<DataGridTemplateColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
Width="auto"
MinWidth="60"
MaxWidth="150"
x:Name="commentHeader"
/>
<DataGridColumnHeader Style="{StaticResource DatagridColumnHeader2}" Width="{Binding Path=ActualWidth, ElementName=commentHeader}"
MaxWidth="150" Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
This is the full implementation of my datagrid
<DataGrid Grid.Column="2"
Grid.Row="1" Grid.RowSpan="2"
x:Name="assetListGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="10 10 20 20"
Background="{StaticResource ForegroundLightBrush}"
LoadingRow="AddIndexNumberWhenLoadingRow"
BorderThickness="1"
VerticalScrollBarVisibility="Auto"
AutoGenerateColumns="False"
ItemsSource="{Binding AssetList, Mode=TwoWay}"
>
<DataGrid.Resources>
<Style x:Key="DataGridColumnHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<!--<Setter Property="Background" Value="{StaticResource WordRedBrush}" />-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Background="{StaticResource WordBlueBrush}" >
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DatagridColumnHeader2" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="BorderBrush" Value="{StaticResource ForegroundLightBrush}"/>
<Setter Property="BorderThickness" Value="0 0 1 0" />
<Setter Property="Background" Value="{StaticResource WordOrangeBrush}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Height" Value="30" />
<Setter Property="FontSize" Value="{StaticResource FontSizeLarge}" />
<Setter Property="Foreground" Value="{StaticResource ForegroundLightBrush}" />
</Style>
</DataGrid.Resources>
<!-- Columns -->
<DataGrid.Columns>
<!-- Asset Properties -->
<!-- Asset Number-->
<DataGridTemplateColumn Header="Asset"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock
FontSize="{StaticResource FontSizeXLarge}"
FontFamily="{StaticResource LatoBold}"
HorizontalAlignment="Center"
Height="40"
/>
<DataGridColumnHeader
HorizontalContentAlignment="Center"
Width="250" Content="Asset Number"/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<TextBox Width="90" IsReadOnly="True"
Text="{Binding Name}"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"/>
<Button Margin="5 0 0 13" HorizontalAlignment="Right"
VerticalAlignment="Center"
Content="Right Click"
Style="{StaticResource ListViewButton}" >
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Add Critical Point" />
</ContextMenu>
</Button.ContextMenu>
</Button>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- Name -->
<DataGridTemplateColumn Header="Name"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
MinWidth="60"
Width="auto"
x:Name="nameHeader"
Text="Asset"/>
<DataGridColumnHeader Width="{Binding ActualWidth, ElementName=nameHeader}" HorizontalContentAlignment="Center"
Content="Name" MaxWidth="150" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- Role -->
<DataGridTemplateColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
Width="auto"
MinWidth="45"
MaxWidth="150"
x:Name="roleHeader"
/>
<DataGridColumnHeader HorizontalContentAlignment="Center" Width="{Binding Path=ActualWidth, ElementName=roleHeader}"
MaxWidth="150" Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!-- Critical Point-->
<!-- CP Number-->
<DataGridTemplateColumn Header="Critical Point"
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock
FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
HorizontalAlignment="Center"
Height="40"
Text="Critical Point"
Padding="0 3 0 0"
/>
<DataGridColumnHeader Style="{StaticResource DatagridColumnHeader2}"
Width="250" Content="CP Number"/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox Width="100" IsReadOnly="True"
Text="{Binding CriticalPoint.CPNumber}"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"/>
<Button Margin="5 0 0 13" HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="Right Click"
Style="{StaticResource ListViewButton}" >
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Delete Critical Point" />
</ContextMenu>
</Button.ContextMenu>
</Button>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!--Name-->
<DataGridTemplateColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
Width="auto"
MinWidth="60"
MaxWidth="150"
x:Name="commentHeader"
/>
<DataGridColumnHeader Style="{StaticResource DatagridColumnHeader2}" Width="{Binding Path=ActualWidth, ElementName=commentHeader}"
MaxWidth="150" Content="Name" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!--Role-->
<DataGridTemplateColumn
HeaderStyle="{StaticResource DataGridColumnHeader}">
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="{StaticResource FontSizeLarge}"
FontFamily="{StaticResource LatoBold}"
Height="40"
Width="auto"
MinWidth="60"
MaxWidth="150"
x:Name="commentHeader"
/>
<DataGridColumnHeader Style="{StaticResource DatagridColumnHeader2}" Width="{Binding Path=ActualWidth, ElementName=commentHeader}"
MaxWidth="150" Content="Role" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox MaxWidth="150"
Background="{StaticResource ForegroundLightBrush}"
Style="{StaticResource DataGridTextBox}"
/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
answered Nov 19 '18 at 0:22
Ken JankaKen Janka
338
338
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53358528%2fwpf-c-datagrid-with-multi-level-header%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Might be a duplicate: stackoverflow.com/questions/17652039/…
– Klaus Gütter
Nov 18 '18 at 6:47
No, I have tried that as well. The best answer that came close to what I need is the one for this question stackoverflow.com/questions/24852736/…
– Ken Janka
Nov 18 '18 at 6:58
I have succeeded to edit the cell template. What is left to be done are the height and adding the 2nd top column
– Ken Janka
Nov 18 '18 at 8:16