How to center the content of cells in a data grid?

Question

I set the min height of a datagrid that way:

<DataGrid MinRowHeight="40">

After feeding the datagrid with datas, the text in each cell is top and left aligned. I could not find an easy way to center that text.

Any suggestions for doing that?

This may help: http://www.kudinov.ru/?p=133 – Alexey Jun 13 '14 at 08:29 — Alexey, Jun 13 '14 at 08:29

score 51 · Accepted Answer · answered May 24 '11 at 06:27

51

Final solution:

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

answered May 24 '11 at 06:27

Francois

851
1
7
10

3

This is the correct solution if your grid use columns other than DataGridTextColumn. The TextBlock style solutions will add a line bellow the text if you have templated columns on the grid. If anyone could please explain what this code is doing... – GBU Oct 27 '16 at 18:26

score 28 · Answer 2 · edited Mar 26 '16 at 20:37

28

The following code will center the contents of cells in DataGrid:

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

edited Mar 26 '16 at 20:37

bouvierr

3,563
3
27
32

answered May 26 '15 at 10:07

lea

289
3
2

This works great when using the built in datagrid with text columns – galford13x Dec 13 '15 at 17:34
Note that since you're not actually setting any `DataGridCell` specific properties, you can omit the `TargetType="DataGridCell"` attribute, and declare this as a general purpose style in your app.xaml. – BrainSlugs83 Apr 23 '20 at 09:36

score 9 · Answer 3 · answered Mar 15 '16 at 06:41

9

use ElementStyle

 <DataGridTextColumn ElementStyle="{StaticResource Centering}"/>

  <Style x:Key="Centering" TargetType="{x:Type TextBlock}">
       <Setter Property="HorizontalAlignment" Value="Center" />
  </Style>

answered Mar 15 '16 at 06:41

Meysam Chegini

942
12
12

score 9 · Answer 4 · answered May 20 '11 at 13:01

you can use styles. i add a sample for DataGridCheckBoxColumn, i hope it put you in the right direction.

<DataGridCheckBoxColumn Header="is active" IsReadOnly="False">
      <DataGridCheckBoxColumn.ElementStyle>
            <Style TargetType="CheckBox">
                 <Setter Property="VerticalAlignment" Value="Center"/>
                  <Setter Property="HorizontalAlignment" Value="Center"/>
             </Style>
      </DataGridCheckBoxColumn.ElementStyle>
      <DataGridCheckBoxColumn.Binding>
             <Binding Path="ISACTIVE" ValidatesOnDataErrors="True" Converter="{StaticResource MyBoolToIsActiveConverter}" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged"
                                 NotifyOnValidationError="True" ValidatesOnExceptions="True">
                        </Binding>
                    </DataGridCheckBoxColumn.Binding>
                </DataGridCheckBoxColumn>

Finally a solution that can be set to a single column. Thanks for that! — C4d, Jul 07 '16 at 15:49

score 6 · Answer 5 · edited May 23 '17 at 12:09

6

Try setting the DataGrid's Vertical and HorizontalContentAlignment to Center

<DataGrid VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />

If that doesn't work, you can use the solution in this answer. It uses a style that aligns the DataGrid cell contents

edited May 23 '17 at 12:09

Community

1
1

answered May 20 '11 at 12:56

Rachel

130,264
66
304
490

score 5 · Answer 6 · answered Feb 27 '20 at 23:29

This style will set the VerticalAlignment to Center for all DataGridCells without needing to be applied explicitly.

<Style TargetType="DataGridCell">
    <Style.Resources>
        <Style TargetType="ContentPresenter">
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
    </Style.Resources>
</Style>

I find this to be the most elegant solution.

score 2 · Answer 7 · answered Mar 29 '15 at 06:12

Modify your style tag like this.....

 <Style x:Key="CellTextCentre" TargetType="DataGridCell">
    <Setter Property="TextBlock.TextAlignment" Value="Center"></Setter>
    <Setter Property="TextBlock.VerticalAlignment" Value="Center"></Setter> 
 </Style>

score 2 · Answer 8 · answered Jun 08 '20 at 13:29

This below code display datagrid cell conent in center..

<Style x:Key="DataGridCellStyle" TargetType="DataGridCell">
            <!--DISPLAY CONTENT IN MIDDLE-->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridCell}">
                        <Grid Background="{TemplateBinding Background}">
                            <ContentPresenter VerticalAlignment="Center" />                        
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

score 0 · Answer 9 · answered Nov 29 '19 at 15:06

Here is a slightly longer version of Arpit Shah's answer.

<DataGrid AutoGenerateColumns="False" IsReadOnly="True" ItemsSource="{Binding Rows}">
    <DataGrid.Resources>
        <Style x:Key="RightAligned" TargetType="DataGridCell">
            <Setter Property="HorizontalAlignment" Value="Right" />
        </Style>
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn CellStyle="{StaticResource RightAligned}" 
                            Binding="{Binding Path=Quantity, Mode=OneWay}" 
                            Header="Quantity" Width="60" />
        <DataGridTextColumn Binding="{Binding Path=Category, Mode=OneWay}" 
                            Header="Category" Width="150" />
    </DataGrid.Columns>
</DataGrid>

score 0 · Answer 10 · answered Mar 26 '20 at 08:06

Here a better approach to center the content vertically:

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

How to center the content of cells in a data grid?

10 Answers10

Linked