Align the contents of a DataGrid row vertically

Question

I have a regular DataGrid from WPF 4.0 RTM where I put data from a database. To make the DataGrid look clean and light, I use tall / tall rows and by default, the DataGrid aligns the contents of the row in the upper vertical position, but I want to set the vertical alignment to the center.

I already tried to use this property

 VerticalAlignment="Center" 

in the DataGrid options, but that doesn't help me.

Here is an example of a XAML code describing my DataGrid without vertical center alignment:

 <DataGrid x:Name="ContentDataGrid" Style="{StaticResource ContentDataGrid}" ItemsSource="{Binding}" RowEditEnding="ContentDataGrid_RowEditEnding"> <DataGrid.Columns> <DataGridTextColumn Header="UserID" Width="100" IsReadOnly="True" Binding="{Binding Path=userID}" /> <DataGridTextColumn Header="UserName" Width="100" Binding="{Binding Path=userName}" /> <DataGridTextColumn Header="UserAccessLevel" Width="100" Binding="{Binding Path=userAccessLevel}" /> <DataGridTextColumn Header="UserPassword" Width="*" Binding="{Binding Path=userPassword}" /> </DataGrid.Columns> </DataGrid> 

The result of executing this code:

As you can see, the entire contents of the line has top vertical alignment.

What do I need to add to get the center alignment of each row content?

Answer 1

A complete solution to this problem on MSDN: Vertical alignment of the contents of a DataGrid row

In short, in a set of file styles:

 <!--body content datagrid cell vertical centering--> <Style x:Key="Body_Content_DataGrid_Centering" 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> 

In the file window:

 <DataGrid x:Name="ContentDataGrid" Style="{StaticResource ContentDataGrid}" CellStyle="{StaticResource Body_Content_DataGrid_Centering}" ItemsSource="{Binding}" RowEditEnding="ContentDataGrid_RowEditEnding"> <DataGrid.Columns> <DataGridTextColumn Header="UserID" Width="100" IsReadOnly="True" Binding="{Binding Path=userID}" /> <DataGridTextColumn Header="UserName" Width="100" Binding="{Binding Path=userName}" /> <DataGridTextColumn Header="UserAccessLevel" Width="100" Binding="{Binding Path=userAccessLevel}" /> <DataGridTextColumn Header="UserPassword" Width="*" Binding="{Binding Path=userPassword}" /> </DataGrid.Columns> </DataGrid> 

This will give you the desired result:

Answer 2

To set individual text alignments, you can use:

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

Answer 3

The following code will vertically align the contents of a DataGridTextColumn cell:

 <DataGridTextColumn.ElementStyle> <Style TargetType="TextBlock"> <Setter Property="VerticalAlignment" Value="Center"></Setter> </Style> </DataGridTextColumn.ElementStyle> 

Edit: I went back to this problem and found that the solution below works better, it will concentrate the contents of all cells in the DataGridTextRows both horizontally and vertically.

 <UserControl.Resources> <ResourceDictionary> <Style TargetType="DataGridCell"> <Setter Property="HorizontalAlignment" Value="Stretch"></Setter> <Setter Property="VerticalAlignment" Value="Stretch"></Setter> <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter> <Setter Property="TextBlock.TextAlignment" Value="Center"></Setter> <Setter Property="TextBlock.VerticalAlignment" Value="Center"></Setter> </Style> </ResourceDictionary> </UserControl.Resources> 

Answer 4

You can also do without overriding the ControlTemplate:

  <Style TargetType="{x:Type DataGridCell}"> <Setter Property="VerticalAlignment" Value="Center" /> </Style> 

Answer 5

It works for me

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

Answer 6

The value of the VerticalAlignment="Center" attribute will center the DataGrid in its parent element.

You probably want a VerticalContentAlignment .

Answer 7

Based on Jamie's answer, the following code did the trick for me when using auto-generated columns:

 Style VerticalCenterStyle = new Style(); public MainWindow() { // This call is required by the designer. InitializeComponent(); VerticalCenterStyle.Setters.Add(new Setter(VerticalAlignmentProperty, VerticalAlignment.Center)); } private void DataGrid_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e) { if (e.Column is DataGridTextColumn) { ((DataGridTextColumn)e.Column).ElementStyle = VerticalCenterStyle; } } 

Answer 8

This is my simple solution and it just works great

 <DataGridTemplateColumn Header="Hello" Width="200"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBlock Text="World!" TextAlignment="Center" VerticalAlignment="Center"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> 

I set the width to 200 so you can notice the difference.