如何在WPF DataGrid中居中显示复选框？

我想让DataGrid里的复选框列居中显示，但试了多种方法都没效果。我的列定义如下：

<DataGridCheckBoxColumn Header="Select" Binding="{Binding IsSelected, UpdateSourceTrigger=PropertyChanged}" HeaderStyle="{StaticResource DGCHCentre}" Width="50" ElementStyle="{StaticResource LargerCheckBoxStyle}"/>

相关样式定义：

<Style x:Key="DGCHCentre" TargetType="DataGridColumnHeader">
    <Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>

<Style TargetType="CheckBox">
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Height" Value="40"/>
    <Setter Property="FontSize" Value="14"/>
</Style>

<Style x:Key="LargerCheckBoxStyle" TargetType="{x:Type CheckBox}">
    <Setter Property="Width" Value="50" />
    <Setter Property="Height" Value="50" />
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="IsHitTestVisible" Value="False"/>
</Style>

不管怎么设置，复选框始终左对齐。后来尝试给LargerCheckBoxStyle加Margin：

<Style x:Key="LargerCheckBoxStyle" TargetType="{x:Type CheckBox}">
    <Setter Property="Width" Value="50" />
    <Setter Property="Height" Value="50" />
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="IsHitTestVisible" Value="False"/>
    <Setter Property="Margin" Value="10 0 0 0"/>
</Style>

结果复选框左侧直接被截断了。

解决方法 #

问题出在DataGridCheckBoxColumn的默认单元格模板上，仅给复选框设置对齐样式无法突破单元格容器的限制，需要从单元格层面控制布局：

1. 定义单元格居中样式

<Style x:Key="CenteredCellStyle" TargetType="DataGridCell">
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="Padding" Value="0"/>
</Style>

2. 在列定义中应用该单元格样式

<DataGridCheckBoxColumn Header="Select" 
                        Binding="{Binding IsSelected, UpdateSourceTrigger=PropertyChanged}" 
                        HeaderStyle="{StaticResource DGCHCentre}" 
                        Width="50" 
                        ElementStyle="{StaticResource LargerCheckBoxStyle}"
                        CellStyle="{StaticResource CenteredCellStyle}"/>

另外，你设置的复选框宽度（50）和列宽（50）一致，添加Margin必然导致控件超出单元格范围被截断，所以需要去掉Margin设置。

如果还是存在对齐问题，可以调整复选框的HorizontalAlignment为Stretch，让它占满单元格后再通过HorizontalContentAlignment居中：

<Style x:Key="LargerCheckBoxStyle" TargetType="{x:Type CheckBox}">
    <Setter Property="Width" Value="50" />
    <Setter Property="Height" Value="50" />
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="IsHitTestVisible" Value="False"/>
</Style>

内容的提问来源于stack exchange，提问作者tonydev314