wpfdatagriddatagridcolumndatagridcolumnheadercontenttemplate

WPF Datagrid HeaderColumn Content Alignment

The ContentTemplate code I use for the Datagrid Header is included in the relevant style file as follows:

<Style TargetType="{x:Type DataGrid}">
...
<Style.Resources>
    <Style TargetType="{x:Type DataGridColumnHeader}">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="{Binding}" Margin="10 5" Grid.Column="0" />
                                <Button x:Name="btnFilter" Content="&#xf0d7;" FontFamily="{StaticResource FontAwesome}" FontSize="16" HorizontalAlignment="Right" Grid.Column="1" />
                            </Grid>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
    </Style>
</Style.Resources>
...
</Style>

The resulting image from this code is as follows:

enter image description here

But I want to align the arrow icons to the right side as in the picture below. How can I do that?

enter image description here

Solution

  • Set the HorizontalContentAlignment property of the DataGridColumnHeaders to Stretch:

    <Style TargetType="DataGridColumnHeader">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="ContentTemplate">
        ...
    </Setter>
</Style>