Align DataGrid Column Header to Center

Question

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?

You can find the answer: http://stackoverflow.com/questions/7943729/how-to-set-style-for-datagrid-header-in-wpf — Tamás Kerék, Oct 02 '13 at 06:44
Try like this: http://stackoverflow.com/questions/7943729/how-to-set-style-for-datagrid-header-in-wpf — Tamás Kerék, Oct 02 '13 at 06:47

score 82 · Accepted Answer · answered Oct 02 '13 at 06:42

82

Check this

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

answered Oct 02 '13 at 06:42

Anjali

1,680
4
26
48

3

Would be appreciated any comment why Your solution does work and not solution of @Bishan. – Tatranskymedved Dec 12 '16 at 15:24
2

I think we can be happy that at WPF is not everything of the type object() and we need to add every single property via styles and bindings. What a laborious f.... – marsh-wiggle Jun 05 '19 at 20:14

Evgeniy Lyakh · Answer 2 · 2017-07-14T23:24:02.407

18

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}"/>

edited Jul 14 '17 at 23:24

answered Jul 14 '17 at 23:17

Evgeniy Lyakh

181
1
5

3

IMO this is the actual correct answer. The accepted answer provides an alternative but does not actually say why the code provided in the question is wrong. – DMX David Cardinal Sep 30 '20 at 18:36

David Soler · Answer 3 · 2017-03-23T15:11:49.637

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));
    }

}

score 0 · Answer 4 · answered Oct 02 '13 at 06:42

0

Try this

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

answered Oct 02 '13 at 06:42

Rushi Soni

1,088
1
13
21

score 0 · Answer 5 · answered Nov 07 '16 at 17:58

0

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>

answered Nov 07 '16 at 17:58

dotNET

33,414
24
162
251

The question is about changing a single column. – Chris Bordeman Nov 19 '19 at 18:51
@ChrisBordeman: Styles can be keyed to apply them to a specific scope. – dotNET Nov 20 '19 at 04:46
Of course, but then you should show that instead of this. – Chris Bordeman Nov 20 '19 at 18:33

score 0 · Answer 6 · answered Jan 24 '20 at 16:40

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>

Align DataGrid Column Header to Center

6 Answers6

Linked