如何在数据网格中将单元格的内容居中？

Posted 2023-03-05

【中文标题】如何在数据网格中将单元格的内容居中？

【英文标题】：How to center the content of cells in a data grid?

【发布时间】：2011-08-29 15:34:42

【问题描述】：

我这样设置数据网格的最小高度：

<DataGrid MinRowHeight="40">

在向数据网格输入数据后，每个单元格中的文本都是顶部和左侧对齐的。 我找不到使文本居中的简单方法。

有什么建议吗？

【问题讨论】：

这可能会有所帮助：kudinov.ru/?p=133

【参考方案1】：

最终解决方案：

<Style x:Key="DataGridContentCellCentering" 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>

【讨论】：

如果您的网格使用 DataGridTextColumn 以外的列，这是正确的解决方案。如果您在网格上有模板列，TextBlock 样式解决方案将在文本下方添加一行。如果有人能解释一下这段代码在做什么......

【参考方案2】：

以下代码将 DataGrid 中单元格的内容居中：

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

【讨论】：

这在使用带有文本列的内置数据网格时非常有用

请注意，由于您实际上并未设置任何 DataGridCell 特定属性，因此您可以省略 TargetType="DataGridCell" 属性，并将其声明为 app.xaml 中的通用样式。

【参考方案3】：

使用元素样式

 <DataGridTextColumn ElementStyle="StaticResource Centering"/>

  <Style x:Key="Centering" TargetType="x:Type TextBlock">
       <Setter Property="HorizontalAlignment" Value="Center" />
  </Style>

【参考方案4】：

您可以使用样式。我为 DataGridCheckBoxColumn 添加了一个示例，希望它能让您朝着正确的方向前进。

<DataGridCheckBoxColumn Header="is active" IsReadOnly="False">
      <DataGridCheckBoxColumn.ElementStyle>
            <Style TargetType="CheckBox">
                 <Setter Property="VerticalAlignment" Value="Center"/>
                  <Setter Property="HorizontalAlignment" Value="Center"/>
             </Style>
      </DataGridCheckBoxColumn.ElementStyle>
      <DataGridCheckBoxColumn.Binding>
             <Binding Path="ISACTIVE" ValidatesOnDataErrors="True" Converter="StaticResource MyBoolToIsActiveConverter" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged"
                                 NotifyOnValidationError="True" ValidatesOnExceptions="True">
                        </Binding>
                    </DataGridCheckBoxColumn.Binding>
                </DataGridCheckBoxColumn>

【讨论】：

终于有一个可以设置为单列的解决方案了。谢谢！

【参考方案5】：

尝试将 DataGrid 的 Vertical 和 Horizo​​ntalContentAlignment 设置为 Center

<DataGrid VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />

如果这不起作用，您可以使用this answer 中的解决方案。它使用对齐 DataGrid 单元格内容的样式

【参考方案6】：

像这样修改你的样式标签.....

 <Style x:Key="CellTextCentre" TargetType="DataGridCell">
    <Setter Property="TextBlock.TextAlignment" Value="Center"></Setter>
    <Setter Property="TextBlock.VerticalAlignment" Value="Center"></Setter> 
 </Style>

【参考方案7】：

此样式会将所有DataGridCells 的VerticalAlignment 设置为Center，而无需显式应用。

<Style TargetType="DataGridCell">
    <Style.Resources>
        <Style TargetType="ContentPresenter">
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
    </Style.Resources>
</Style>

我发现这是最优雅的解决方案。

【参考方案8】：

以下代码在中心显示数据网格单元格内容..

<Style x:Key="DataGridCellStyle" TargetType="DataGridCell">
            <!--DISPLAY CONTENT IN MIDDLE-->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="x:Type DataGridCell">
                        <Grid Background="TemplateBinding Background">
                            <ContentPresenter VerticalAlignment="Center" />                        
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

【参考方案9】：

这是Arpit Shah's answer 的稍长版本。

<DataGrid AutoGenerateColumns="False" IsReadOnly="True" ItemsSource="Binding Rows">
    <DataGrid.Resources>
        <Style x:Key="RightAligned" TargetType="DataGridCell">
            <Setter Property="HorizontalAlignment" Value="Right" />
        </Style>
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn CellStyle="StaticResource RightAligned" 
                            Binding="Binding Path=Quantity, Mode=OneWay" 
                            Header="Quantity" Width="60" />
        <DataGridTextColumn Binding="Binding Path=Category, Mode=OneWay" 
                            Header="Category" Width="150" />
    </DataGrid.Columns>
</DataGrid>

【参考方案10】：

这里是垂直居中内容的更好方法：

<Style TargetType="x:Type DataGridCell" BasedOn="StaticResource 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>