TechQA.

WPF C#, Datagrid with multi level header

3.3k views Asked by At

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
Original Q&A
3

There are 3 answers

1
Cinchoo On BEST 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.

0
Mahdi Khalili On

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>
0
Ken Janka On

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>

Related Questions in C#

Related Questions in WPF

Related Questions in DATAGRID

Related Questions in DATAGRIDCOLUMNHEADER

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions