DataGrid行内容垂直对齐

时间:2010-10-20 18:50:10

标签: c# wpf xaml datagrid 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"
            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>

执行此代码的结果:

alt text

如您所见,所有行内容都有顶部垂直对齐。

为了获得每行内容的中心垂直对齐,我需要添加什么?

8 个答案:

答案 0 :(得分:98)

在MSDN上完成此问题的解决方案:Vertical alignment of DataGrid row content

简而言之,在样式文件集中:

<!--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>

在窗口文件中:

<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>

这会给你一个想要的结果:

alt text

答案 1 :(得分:47)

要设置您可以使用的单个文本对齐方式:

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

答案 2 :(得分:19)

以下代码将垂直对齐DataGridTextColumn单元格的内容:

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

编辑:我回过头来解决这个问题,发现下面的解决方案效果更好,它会将DataGridTextRows中所有单元格的内容水平和垂直居中。

<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>

答案 3 :(得分:12)

您也可以不覆盖ControlTemplate:

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

答案 4 :(得分:5)

属性值VerticalAlignment="Center"将使DataGrid在其父元素中居中。

您可能需要VerticalContentAlignment

答案 5 :(得分:2)

就像有人一样需要它。

要仅影响单个列,可以使用'ElementStyle'属性:

<DataGrid ItemsSource="{Binding}">
    <DataGrid.Resources>
        <Style x:Key="DataGridVerticalText" TargetType="TextBlock">
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn Header="Header Title" Binding="{Binding}" ElementStyle="{StaticResource DataGridVerticalText}" />
    </DataGrid.Columns>
</DataGrid>

答案 6 :(得分:1)

基于Jamier的回答,以下代码在使用自动生成的列时为我做了诀窍:

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;
  }
}

答案 7 :(得分:0)

这是我的简单解决方案,而且效果很好

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

我将宽度设置为200,这样您就可以注意到差异。