Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

DataGrid row content vertical alignment

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:

alt text

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?

like image 239
Mike Avatar asked Oct 20 '10 18:10

Mike


1 Answers

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:

alt text

like image 195
Mike Avatar answered Oct 07 '22 15:10

Mike