Add padding to DataGridTextColumn in WPF

Question

I have the following DataGrid:

<DataGrid x:Name="RecodersSummary" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness ="1" IsReadOnly ="True" Loaded="RecordersSummary_Loaded" GridLinesVisibility="All" AutoGenerateColumns="False">
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="BorderBrush" Value="Black"/>
    <Setter Property="BorderThickness" Value="1,1,1,1"/>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
  <DataGridTextColumn Header="{DynamicResource Summary_FirstColumnHeader}"  Width="Auto" IsReadOnly="True"   Binding="{Binding Path=Summary}"/>
  <DataGridTextColumn Header="{DynamicResource Summary_SecondColumnHeader}" Width="Auto" IsReadOnly="True"  Binding="{Binding Path=Totals}"/>
  <DataGridTextColumn Header="{DynamicResource Summary_ThirdColumnHeader}" Width="Auto" IsReadOnly="True"  Binding="{Binding Path=Centralized}"/>
  <DataGridTextColumn Header="{DynamicResource Summary_ForthColumnHeader}" Width="Auto" IsReadOnly="True"  Binding="{Binding Path=Standalone}"/>
  <DataGridTextColumn Header="{DynamicResource Summary_FifthColumnHeader}" Width="Auto" IsReadOnly="True"  Binding="{Binding Path=Temporary}"/>
  <DataGridTextColumn Header="{DynamicResource Summary_SixthColumnHeader}" Width="Auto" IsReadOnly="True"  Binding="{Binding Path=Other}"/>
</DataGrid.Columns>

With this the width of the text displayed in the Column header is the same width as the text and looks cramped.

In the above example how can I add padding to the left and right of the text to make the header column a little wider than the text?

Answer 1

You can apply the padding to the column header style.

<DataGrid x:Name="RecodersSummary" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness ="1" IsReadOnly ="True" Loaded="RecordersSummary_Loaded" GridLinesVisibility="All" AutoGenerateColumns="False">
    <DataGrid.Resources>
        <Style x:Key="DataGrid_ColumnHeadStyle1" TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="BorderThickness" Value="1,1,1,1"/>
            <Setter Property="Padding" Value="12,6,12,6"/>
        </Style>
        <Style TargetType="{x:Type DataGrid}">
            <Setter Property="ColumnHeaderStyle" Value="{StatisResource DataGrid_ColumnHeadStyle1}"/>
        </Style>
    </DataGrid.Resources>
    <!-- code removed for brevity -->
</DataGrid>

You can also apply the style to the grid directly.

<DataGrid x:Name="RecodersSummary" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness ="1" IsReadOnly ="True" Loaded="RecordersSummary_Loaded" GridLinesVisibility="All" AutoGenerateColumns="False">
    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="BorderThickness" Value="1,1,1,1"/>
            <Setter Property="Padding" Value="12,6,12,6"/>
        </Style>
    </DataGrid.ColumnHeaderStyle>
    <!-- code removed for brevity -->
</DataGrid>