DataGrid行内容垂直对齐

Mik*_* B. 51 c# wpf xaml datagrid vertical-alignment

我有一个来自WPF 4.0 RTM的常规DataGrid,我从数据库中放入数据.为了使清洁和轻盈的风格DataGrid我使用高/高行,默认情况下DataGrid在顶部垂直位置对齐行内容,但我想设置一个中心垂直对齐.

我已经尝试过使用这个属性了

VerticalAlignment="Center"
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

执行此代码的结果:

替代文字

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

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

Mik*_* B. 103

这个问题的完整解决方案:

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

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

<!--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>
Run Code Online (Sandbox Code Playgroud)

在窗口文件中:

<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>
Run Code Online (Sandbox Code Playgroud)

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

替代文字

  • 我知道这是一个古老的答案.但对于内容的简单居中,这不是很多工作吗? (24认同)
  • 不幸的是,我没有找到任何其他简单的解决方案,如果你有这样的话,请分享你的知识. (4认同)
  • IMO,而不是硬编码“中心”值,可能值得将单元格的 VerticalContentAlignment 值绑定到模板 `VerticalAlignment="{TemplateBinding VerticalContentAlignment}"` 中,这样稍后设置时它将开始尊重它,您可以将其设为在 app.xaml 中设置一次默认样式,无需再担心它。 (2认同)

小智 50

要设置单个文本对齐,您可以使用:

<DataGridTextColumn.ElementStyle>
   <Style TargetType="TextBlock">
       <Setter Property="TextAlignment" Value="Center" />
   </Style>
</DataGridTextColumn.ElementStyle>
Run Code Online (Sandbox Code Playgroud)

  • 是的有效(使用VerticalAlignment,因为TextAlignment用于水平文本定位),但您必须为所有列设置元素样式(Checkbox列和组合框列需要具有不同的样式). (9认同)
  • 它就像这样,因为如果启用了网格线,它不会破坏网格线。 (3认同)

mha*_*sen 19

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

<DataGridTextColumn.ElementStyle>
    <Style TargetType="TextBlock">
        <Setter Property="VerticalAlignment" Value="Center"></Setter>
    </Style>
</DataGridTextColumn.ElementStyle>
Run Code Online (Sandbox Code Playgroud)

编辑: 我回到这个问题并发现下面的解决方案更好地工作,它将水平和垂直中心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>
Run Code Online (Sandbox Code Playgroud)

  • 不起作用.尝试设置DataGrid RowHeight = 100以使行高于默认高度.网格线看起来很奇怪.您的第一个解决方案(DataGridTextColumn.ElementStyle)对我来说效果更好. (2认同)

use*_*Bee 12

你也可以不覆盖ControlTemplate:

    <Style TargetType="{x:Type DataGridCell}">
    <Setter Property="VerticalAlignment" Value="Center" />
    </Style>
Run Code Online (Sandbox Code Playgroud)

  • 只有在没有垂直网格线时,此答案才有效.否则,如果设置RowHeight属性,网格线将获得间隙. (6认同)

小智 11

这个对我有用

 <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>
Run Code Online (Sandbox Code Playgroud)


Nic*_*ins 5

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

您可能需要VerticalContentAlignment.