wpf DataGrid行内容垂直对齐方式

wfauudbj  于 2022-11-26  发布在  其他
关注(0)|答案(9)|浏览(406)

我有一个来自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>

执行此代码的结果:

如您所见,所有行内容都具有顶部垂直对齐。
要使每行内容垂直居中对齐,需要添加什么内容?

nzrxty8p

nzrxty8p1#

MSDN上此问题的完整解决方案:DataGrid行内容的垂直对齐方式。
简而言之,在样式文件集中:

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

这将为您提供所需的结果:

nwlqm0z1

nwlqm0z12#

若要设定个别文字对齐方式,您可以用途:

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

9udxz4iz3#

下列程式码会垂直对齐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>
moiiocjp

moiiocjp4#

这个对我有用

<DataGrid.CellStyle>
   <Style TargetType="DataGridCell">              
     <Setter Property="TextBlock.TextAlignment" Value="Center"/>
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate TargetType="{x:Type DataGridCell}">
           <Grid Background="{TemplateBinding Background}">
             <ContentPresenter VerticalAlignment="Center"/>
           </Grid>
         </ControlTemplate>
       </Setter.Value>
     </Setter>
   </Style>
</DataGrid.CellStyle>
iklwldmw

iklwldmw5#

您也可以不覆写ControlTemplate:

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

mpgws1up6#

属性值VerticalAlignment="Center"将使DataGrid在其父元素中居中。
您可能需要VerticalContentAlignment

z5btuh9x

z5btuh9x7#

根据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;
  }
}
ddrv8njm

ddrv8njm8#

只是如果有人可能像我一样需要它。
若要只影响单一数据行,您可以使用'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>
lyfkaqu1

lyfkaqu19#

这是我的简单的解决方案,它只是完美的工作

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

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

相关问题