WPF C#, Datagrid with multi level header












-1















Good day.



Please I need to create a datagrid that looks like this screenshot



enter image description here



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



enter image description here



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




  1. Even out the heights of the subcolumn headers

  2. Add the 2nd top column

  3. Override the cell template for a single column to contain a button and a text block? enter code here










share|improve this question























  • 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
















-1















Good day.



Please I need to create a datagrid that looks like this screenshot



enter image description here



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



enter image description here



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




  1. Even out the heights of the subcolumn headers

  2. Add the 2nd top column

  3. Override the cell template for a single column to contain a button and a text block? enter code here










share|improve this question























  • 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














-1












-1








-1








Good day.



Please I need to create a datagrid that looks like this screenshot



enter image description here



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



enter image description here



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




  1. Even out the heights of the subcolumn headers

  2. Add the 2nd top column

  3. Override the cell template for a single column to contain a button and a text block? enter code here










share|improve this question














Good day.



Please I need to create a datagrid that looks like this screenshot



enter image description here



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



enter image description here



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




  1. Even out the heights of the subcolumn headers

  2. Add the 2nd top column

  3. Override the cell template for a single column to contain a button and a text block? enter code here







c# wpf datagrid datagridcolumnheader






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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



















  • 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












3 Answers
3






active

oldest

votes


















0














Here is the answer to couple of questions




  1. Even out the heights of the subcolumn headers


You are missing fonts on Role, Comment, Creation Timestamp columns



FontSize="{StaticResource FontSizeLarge}" FontFamily="{StaticResource LatoBold}"



  1. 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.






share|improve this answer
























  • 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



















0














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>





share|improve this answer































    0














    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>





    share|improve this answer























      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
      });


      }
      });














      draft saved

      draft discarded


















      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









      0














      Here is the answer to couple of questions




      1. Even out the heights of the subcolumn headers


      You are missing fonts on Role, Comment, Creation Timestamp columns



      FontSize="{StaticResource FontSizeLarge}" FontFamily="{StaticResource LatoBold}"



      1. 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.






      share|improve this answer
























      • 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
















      0














      Here is the answer to couple of questions




      1. Even out the heights of the subcolumn headers


      You are missing fonts on Role, Comment, Creation Timestamp columns



      FontSize="{StaticResource FontSizeLarge}" FontFamily="{StaticResource LatoBold}"



      1. 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.






      share|improve this answer
























      • 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














      0












      0








      0







      Here is the answer to couple of questions




      1. Even out the heights of the subcolumn headers


      You are missing fonts on Role, Comment, Creation Timestamp columns



      FontSize="{StaticResource FontSizeLarge}" FontFamily="{StaticResource LatoBold}"



      1. 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.






      share|improve this answer













      Here is the answer to couple of questions




      1. Even out the heights of the subcolumn headers


      You are missing fonts on Role, Comment, Creation Timestamp columns



      FontSize="{StaticResource FontSizeLarge}" FontFamily="{StaticResource LatoBold}"



      1. 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.







      share|improve this answer












      share|improve this answer



      share|improve this answer










      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



















      • 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













      0














      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>





      share|improve this answer




























        0














        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>





        share|improve this answer


























          0












          0








          0







          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>





          share|improve this answer













          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>






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 18 '18 at 7:58









          Mahdi KhaliliMahdi Khalili

          11411




          11411























              0














              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>





              share|improve this answer




























                0














                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>





                share|improve this answer


























                  0












                  0








                  0







                  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>





                  share|improve this answer













                  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>






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 19 '18 at 0:22









                  Ken JankaKen Janka

                  338




                  338






























                      draft saved

                      draft discarded




















































                      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.




                      draft saved


                      draft discarded














                      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





















































                      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







                      這個網誌中的熱門文章

                      Tangent Lines Diagram Along Smooth Curve

                      Yusuf al-Mu'taman ibn Hud

                      Zucchini