37
votes

I need to align WPF DataGrid Column Header text to Center. I created a style and attached that using the HeaderStyle property as below.

Style

<Window.Resources>
    <Style x:Key="CenterGridHeaderStyle" TargetType="DataGridColumnHeader">
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
    </Style>
</Window.Resources>

Column

<DataGridTextColumn 
   Binding="{Binding Path=Name}" Header="Name" IsReadOnly="True" 
   HeaderStyle="{DynamicResource CenterGridHeaderStyle}"/>

But this does not align Column Header text to the Center. How can I do this?

6

6 Answers

75
votes

Check this

<DataGridTextColumn Header="Nombre"
                          Binding="{Binding Nombre}">
<DataGridTextColumn.HeaderStyle>
  <Style TargetType="DataGridColumnHeader">
     <Setter Property="HorizontalContentAlignment"
                 Value="Center" />
  </Style>
</DataGridTextColumn.HeaderStyle>
14
votes

It should be StaticResource instead of DynamicResource in the Column:

Style

<Window.Resources>
    <Style x:Key="CenterGridHeaderStyle" TargetType="DataGridColumnHeader">
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
    </Style>
</Window.Resources>

Column

<DataGridTextColumn 
   Binding="{Binding Path=Name}" Header="Name" IsReadOnly="True" 
   HeaderStyle="{StaticResource CenterGridHeaderStyle}"/>
2
votes

There is a response for doing it programmatically at AutoGeneratingColumn:

 private void dataGrid_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
    {
                e.Column.HeaderStyle = new Style(typeof(DataGridColumnHeader));
                e.Column.HeaderStyle.Setters.Add(new Setter(HorizontalContentAlignmentProperty, HorizontalAlignment.Center));

    }

Tip, use attributes:

public class ColumnNameAttribute : Attribute
{
    public HorizontalAlignment Alignment { get; set;}
    public ColumnNameAttribute(HorizontalAlignment alignment){
        Alignment = alignment;
}

public class Example(){
    [ColumnName(HorizontalAlignment.Center)]
    public string Column {get; set;}
}

 private void dataGrid_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{
   var desc = e.PropertyDescriptor as PropertyDescriptor;
   var att = desc.Attributes[typeof(ColumnNameAttribute)] as ColumnNameAttribute;
   if(att != null){
           e.Column.HeaderStyle = new Style(typeof(DataGridColumnHeader));
           e.Column.HeaderStyle.Setters.Add(new Setter(HorizontalContentAlignmentProperty, att.Alignment));
    }

}
0
votes

Try this

<DataGridTextColumn.CellStyle>
  <Style>
    <Setter Property="HorizontalAlignment" Value="Center" />
  </Style>
</DataGridTextColumn.CellStyle>
0
votes

I landed here while searching for the same problem for Row Headers alignment. In case anyone else was searching, the solution is as simple as:

<DataGrid.RowHeaderStyle>
  <Style TargetType="DataGridRowHeader">
    <Style.Resources>
      <Style TargetType="StackPanel">
        <Setter Property="HorizontalAlignment" Value="Center" />
      </Style>
    </Style.Resources>
  </Style>
</DataGrid.RowHeaderStyle>
0
votes

Here is what I am using to change the header text alignment.

<DataGrid.Columns>
    <DataGridTemplateColumn Width="Auto" MinWidth="60" Header=" ID " IsReadOnly="True">                                                                <DataGridTemplateColumn.HeaderStyle>
     <Style TargetType="DataGridColumnHeader">
         <Setter Property="HorizontalContentAlignment" Value="Center"/>
         <Setter Property="Background"  Value="#c0c0c0"/>
         <Setter Property="BorderThickness" Value="1"/>
         <Setter Property="FontWeight" Value="Bold"/>
         <Setter Property="FontSize" Value="12"/>
     </Style>                                                        </DataGridTemplateColumn.HeaderStyle>                                                        <DataGridTemplateColumn.CellTemplate>
     <DataTemplate>
        <TextBlock Text="{Binding ID}" TextAlignment="Center" />
     </DataTemplate>                                                       </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>