Search code examples
c#wpfxamldatagridvertical-alignment

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?


Solution

  • 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