I have a regular DataGrid from WPF 4.0 RTM, where I put data from a database. In order to make clean & light style of DataGrid
I use a tall/high rows and by default DataGrid
aligns row content in top vertical position, but I want to set a center vertical alignment.
I already tried to use this property
VerticalAlignment="Center"
in DataGrid
options, but it doesn't help me.
Here is an example of XAML-code, describing my DataGrid
without center vertical 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>
Result of executing this code:
As you can see all row content has top vertical align.
What do I have to add in order to get center vertical alignment of each row content?
Complete solution of this issue at MSDN: Vertical alignment of DataGrid row content.
In brief, in style-file set:
<!--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 window file:
<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 a wanted result:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With