DataGrid行内容垂直对齐 [英] DataGrid row content vertical alignment

问题描述

我有一个WPF 4.0 RTM的常规DataGrid，我从数据库中放入数据。为了使清洁& DataGrid的轻型样式我使用高/高的行，默认情况下DataGrid将行内容排列在顶部垂直位置，但我想设置中心垂直对齐。

我已经尝试使用此属性

  VerticalAlignment =Center
  

在DataGrid选项中，但并没有帮助我。

这是一个XAML代码的例子，描述我的DataGrid没有中心垂直对齐：

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

执行此代码的结果：

正如你可以看到所有行的内容有顶部垂直对齐。

为了获得每行内容的中心垂直排列，我需要添加什么？

谢谢。

解决方案

完整解决此问题：

http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/8c2aa3b1-d967-41ab-93c2-6c8cb1b7d29d/#488d0cdd-d0c2-469a-bfb6-8ca3d75426d4

简而言之，在样式文件集中：

 <！ -  body内容数据网格单元格垂直居中 - > 
< 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> 
  

在窗口文件中：

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

这将给你一个想要的结果：

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's content has top vertical align.

What do I have to add in order to get center vertical alignment of each row content?

Thanks.

解决方案

Complete solution of this issue:

http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/8c2aa3b1-d967-41ab-93c2-6c8cb1b7d29d/#488d0cdd-d0c2-469a-bfb6-8ca3d75426d4

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:

这篇关于DataGrid行内容垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！