Text alignment in a WPF DataGrid

Question

How can I align the column data to center in a WPF DataGrid?

For Silverlight, see [this answer](http://stackoverflow.com/questions/7916226/column-aligment-in-a-silverlight-datagrid/7916301#7916301). — Drew Noakes, Oct 27 '11 at 13:10

Mohammed A. Fadil · Answer 1 · 2011-05-03T06:25:45.117

106

If you are using DataGridTextColumn you can use the following code snippet:

<Style TargetType="DataGridCell">
     <Style.Setters>
            <Setter Property="TextBlock.TextAlignment" Value="Center" />
     </Style.Setters>
</Style>

edited May 03 '11 at 06:25

answered Apr 28 '10 at 12:39

Mohammed A. Fadil

9,205
7
50
67

8

This is best way - setting alignment on the cell causes the cell not to fill its width, which looks odd when the row is selected – bruceboughton Dec 08 '11 at 10:07
1

Initially this didn't work for me, but after a bit more testing and fixing some errors in my code this solution worked great. thanks! – Mageician Feb 24 '12 at 19:02
@BrianVPS Welcomes, I am happy to hear that :D – Mohammed A. Fadil Feb 28 '12 at 12:19
@Priyank Thakkar, Welcomes :D – Mohammed A. Fadil Mar 19 '12 at 12:20
1

See [my answer](http://stackoverflow.com/a/25507802/1563422) for a C# code-behind version of this. – Danny Beckett Aug 26 '14 at 14:04
For me this approach just center the text horizontally, but how to center it also vertically? – Sirop4ik Jan 27 '20 at 14:11
See [this answer](https://stackoverflow.com/a/18179080/536172) if you want to center only one column. – AntonK Mar 14 '23 at 16:50

score 50 · Accepted Answer · edited Sep 27 '11 at 15:04

50

It's hard to say without knowing specifics, but here's a DataGridTextColumn that is centered:

<wpf:DataGridTextColumn Header="Name" Binding="{Binding Name}" IsReadOnly="True">
    <wpf:DataGridTextColumn.CellStyle>
        <Style>
            <Setter Property="FrameworkElement.HorizontalAlignment" Value="Center"/>
        </Style>
    </wpf:DataGridTextColumn.CellStyle>
</wpf:DataGridTextColumn>

edited Sep 27 '11 at 15:04

answered Apr 06 '09 at 09:45

Kent Boogaart

175,602
35
392
393

Worked great for me even in Dec 2010! – ErocM Dec 03 '10 at 03:27
12

This approach didn't work for me. The text was centered, but the cell width no longer matched up with its header. Mohammed's solution worked best. – Chris Staley Mar 23 '11 at 13:52
2

As Kiff said, the cell is shifting too. You must target the Textblock like Mohammed A. Fadil exemple. – Philippe Lavoie May 02 '11 at 20:19

score 24 · Answer 3 · answered May 09 '13 at 10:17

24

I started with huttelihut's solution. Unfortunately, that didn't work for me just yet. I tweaked his answer and came up with this (solution is to align the text to the right):

<Resources>
    <Style x:Key="RightAligned" TargetType="TextBlock">
        <Setter Property="HorizontalAlignment" Value="Right"/>
    </Style>
</Resources>

As you can see, I applied the style to a TextBlock, not the DataGridCell.

And then I had to set the Element style, not the Cell style.

ElementStyle="{StaticResource RightAligned}"

answered May 09 '13 at 10:17

Jan

2,168
2
19
28

1

Please note that this does not work with the `DataGridTextColumn` – JP Hellemons Dec 28 '15 at 14:27
4

@JP Hellemons: for me it worked with `DataGridTextColumn` – Mikhail Poda Dec 01 '16 at 11:00

Torben Junker Kjær · Answer 4 · 2011-03-28T08:15:46.657

15

+1 for Kent Boogaart. I ended up doing this, which makes the code slightly less cluttered (and enables me to use the alignment on several columns):

<Resources>
      <Style x:Key="NameCellStyle" TargetType="DataGridCell">
                <Setter Property="HorizontalAlignment" Value="Center" />
      </Style>
</Resources>


<DataGrid.Columns>                           
   <DataGridTextColumn Header="Name" CellStyle="{StaticResource NameCellStyle}" Binding="{Binding Name}"/>                            
    // .. other columns        
</DataGrid.Columns>

edited Mar 28 '11 at 08:15

answered Mar 28 '11 at 07:54

Torben Junker Kjær

4,042
4
34
33

2

+1 for style, but for me `HorizontalAlignment` does not work whereas `HorizontalContentAlignment` does. – Emmanuel May 04 '11 at 08:42
You can do the same with a DataGridColumnHeader style and set that as the HeaderStyle. Nice clean solution. – Ed Hartley Jul 08 '20 at 00:47

score 9 · Answer 5 · answered Aug 26 '14 at 14:04

9

Here's @MohammedAFadil's XAML answer, converted to C# code behind:

var MyStyle = new Style(typeof(DataGridCell)) {
    Setters = {
        new Setter(TextBlock.TextAlignmentProperty, TextAlignment.Center)
    }
};

To apply the Style, set the CellStyle property of the DataGrid, e.g.

var MyGrid = new DataGrid() {
    CellStyle = MyStyle
};

answered Aug 26 '14 at 14:04

Danny Beckett

20,529
24
107
134

1

Simple and clean! +1 :) Just what I needed. – Exel Gamboa Feb 22 '15 at 15:54

score 5 · Answer 6 · answered Aug 23 '12 at 12:31

Or in code behind:

grid.CellStyle = newCellStyle();

public static Style newCellStyle()
{
    //And here is the C# code to achieve the above
    System.Windows.Style style = new Style(typeof(DataGridCell));
    style.Setters.Add(new System.Windows.Setter
    {
        Property = Control.HorizontalAlignmentProperty,
        Value = HorizontalAlignment.Center
    });
    return style;
}

score 5 · Answer 7 · answered Jul 03 '13 at 15:12

I ended up having problems with the cell being shifted and looking funky using the accepted answer. I know it's late, but hopefully my findings will help someone. I use:

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

rather than the CellStyle.

score 3 · Answer 8 · answered Dec 10 '20 at 15:19

If someone is still looking for answer for this, here's what worked for me:

<DataGridTextColumn ...>
    <DataGridTextColumn.CellStyle>
        <Style TargetType="{x:Type DataGridCell}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridCell}">
                        <Grid Background="{TemplateBinding Background}">
                            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Left"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGridTextColumn.CellStyle>
</DataGridTextColumn>

score 2 · Answer 9 · answered Apr 02 '19 at 20:19

For me this one works well

<DataGridTextColumn Width="1*" Binding="{Binding Balance, StringFormat=C} "Header="Balance">
  <DataGridTextColumn.CellStyle>
      <Style>
        <Setter Property="TextBlock.TextAlignment"  Value="Right"/>
      </Style>
   </DataGridTextColumn.CellStyle>
 </DataGridTextColumn>

score 1 · Answer 10 · edited May 23 '17 at 12:26

1

Ok, I used the frameworkElement approach but there was a strange behavior when you try to highlight the row.

I've put another example of WPF Datagrid alignment in this thread!

edited May 23 '17 at 12:26

Community

1
1

answered Aug 24 '09 at 19:50

Junior Mayhé

16,144
26
115
161

score 1 · Answer 11 · answered Jul 09 '11 at 15:06

My favorite solution is:

<DataGridTextColumn Header="My Column" Binding="{Binding MyDBValue}" Width="100" >
<DataGridTextColumn.CellStyle>
        <Style>
                <Setter Property="FrameworkElement.HorizontalAlignment" Value="Center"/>
        </Style>
</DataGridTextColumn.CellStyle>

Stephen Himes · Answer 12 · 2017-10-18T20:21:21.653

Thanks Danny Beckett for converting @MohammedAFadil's XAML answer, converted to C# code. All of my datagrids are set up dynamically, so I can change anything, whenever.

To set up an empty datagrid, with nothing in it and then just bind it to data, just take your datagrid.columns

        var centerTextSetter = new Style(typeof(DataGridCell))
        {
            Setters = { new Setter(TextBlock.TextAlignmentProperty, TextAlignment.Center) }
        };
        DgDbNames.Columns.Add(new DataGridTextColumn()
        {
            Header = "Db Name",
            Binding = new System.Windows.Data.Binding("DbName"),
            IsReadOnly = true,
            Width = new DataGridLength(0.2, DataGridLengthUnitType.Star),
            CellStyle = centerTextSetter
        });

score 0 · Answer 13 · answered Aug 28 '20 at 11:13

I really like Bruno's TextBlock.TextAlignment approach. You can use this in conjunction with horizontal alignment and then any background will stretch across the whole grid cell.

e.g. (in VB)

    Dim sty = New System.Windows.Style(GetType(DataGridCell))
    sty.Setters.Add(New Setter(HorizontalAlignmentProperty, HorizontalAlignment.Stretch))
    sty.Setters.Add(New Setter(TextBlock.TextAlignmentProperty, TextAlignment.Right))
    sty.Setters.Add(New Setter(BackgroundProperty, Brushes.LightGray))

Text alignment in a WPF DataGrid

13 Answers13

Linked