How to get DataTemplate to fill DataGridTemplateColumn

Question

I have the following XAML for creating a datagrid:

<DataGrid CanUserAddRows="False" HorizontalAlignment="Left" Name="Test" AutoGenerateColumns="False" Height="164" Margin="205,264,0,0" VerticalAlignment="Top" Width="511">
        <DataGrid.Columns>
            <DataGridTextColumn CanUserSort="False" Binding="{Binding Description, Mode=TwoWay}" Header="Description" Width="6*" IsReadOnly="True" />
            <DataGridTemplateColumn Width="2.6*" x:Name="Parent" >
                <DataGridTemplateColumn.HeaderTemplate>
                    <DataTemplate >
                        <Grid ShowGridLines="False" Width="{Binding ElementName=Parent,Path=Width}" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1*" />
                                <ColumnDefinition Width="1*" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="Initial " Grid.Column="0" />
                            <TextBlock Text="Date " Grid.Column="1"  />
                        </Grid>
                    </DataTemplate>
                </DataGridTemplateColumn.HeaderTemplate>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>                           



                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridCheckBoxColumn CanUserSort="False" Binding="{Binding StepComplete, Mode=TwoWay}" Header="Completed" Width="1.5*" IsReadOnly="True" />
        </DataGrid.Columns>
    </DataGrid>

I have created a DataGridTemplateColumn.HeaderTemplate with a DataTemplate inside as I want to create a multi header column. My issue is that I cannot get the DataTemplate to stretch / fill its parent cell. I have added an image below to demonstrate my problem. Please note the area highlighted around the Initial Date text as this is the DataTemplate border. Does anyone know how I can change the DataTemplate to fill its parent cell?

Thanks Callum

Answer 1

To set the header cell alignment you have to use ColumnHeaderStyle:

<DataGrid.ColumnHeaderStyle>
    <Style TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="FontWeight"  Value="Bold" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
</DataGrid.ColumnHeaderStyle>

I see two issues in your code:

1. You are trying to binding Grid.Width property (double) to DataGridTemplateColumn.Width property with value 2.6* (DataGridLength). You cannot set 2.6* to Grid.Width, because it is not valid double value.
2. DataTemplate has its own NameScope, therefore you cannot refer to an element outside DataTemplate using ElementName. Moreover, DataGridTemplateColumn is not an UIElement and is not in VisualTree, therefore DataGridTemplateColumn is not parent of your elements defined in DataTemplate. DataGridTemplateColumn is used just to define columns. DataGrid then generate headers, rows and cells based on the definitions, but the DataGridColumns never gets rendered.