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

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?

Answer 1

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>

Answer 2

The following code will center the contents of cells in DataGrid:
<Style TargetType="DataGridCell">
<Setter Property="TextBlock.TextAlignment" Value="Center" />
</Style>

Answer 3

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

Answer 4

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>

Answer 5

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

Answer 6

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.

Answer 7

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>

Answer 8

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>

Answer 9

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>

Answer 10

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>