如何让CheckBox图标与自动换行的内容垂直居中对齐

我之前在做WPF项目时也遇到过一模一样的问题——CheckBox整体设置垂直居中后，单行文本时图标和文本能完美对齐，但文本一换行，图标就会和文本顶部对齐，看起来特别别扭。其实根源是默认的CheckBox模板里，图标所在的容器和文本内容的容器没有统一设置垂直居中，下面给你几个实用的解决办法：

方法1：自定义ControlTemplate（最彻底的方案） #

直接修改CheckBox的默认模板，强制让图标和文本容器都垂直居中，不管文本多少行都能保持对齐。这是最推荐的方式，因为能从根本上控制布局逻辑。

<CheckBox Content="这是一段会自动换行的长文本，用来测试CheckBox图标和文本的垂直对齐情况，看看修改模板后是不是能完美居中显示">
    <CheckBox.Template>
        <ControlTemplate TargetType="CheckBox">
            <Grid VerticalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <!-- 复选框图标容器，设置垂直居中 -->
                <BulletDecorator x:Name="BulletContainer" Grid.Column="0" VerticalAlignment="Center">
                    <BulletDecorator.Bullet>
                        <Border x:Name="CheckBorder" Width="13" Height="13" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                Background="{TemplateBinding Background}">
                            <Path x:Name="CheckMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z" 
                                  Fill="{TemplateBinding Foreground}" Margin="1" Opacity="0"/>
                        </Border>
                    </BulletDecorator.Bullet>
                </BulletDecorator>
                <!-- 文本内容容器，同样设置垂直居中 -->
                <ContentPresenter Grid.Column="1" 
                                  Margin="{TemplateBinding Padding}" 
                                  VerticalAlignment="Center" 
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="CheckMark" Property="Opacity" Value="1"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter TargetName="CheckBorder" Property="Opacity" Value="0.5"/>
                    <Setter TargetName="CheckMark" Property="Opacity" Value="0.5"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </CheckBox.Template>
</CheckBox>

方法2：用WrapPanel嵌套内容（快速解决方案） #

如果不想修改模板，也可以把CheckBox的Content换成一个WrapPanel，给WrapPanel设置VerticalAlignment="Center"，这样文本换行后，整个文本容器会和图标保持垂直居中对齐。

<CheckBox VerticalAlignment="Center">
    <WrapPanel VerticalAlignment="Center" Width="200">
        <TextBlock TextWrapping="Wrap" 
                   Text="这是一段会自动换行的长文本，用来测试CheckBox图标和文本的垂直对齐情况，看看用WrapPanel是不是能快速解决问题"/>
    </WrapPanel>
</CheckBox>

方法3：调整ContentPresenter对齐（轻量修改） #

如果你只是需要临时调整，也可以通过样式修改默认模板里的ContentPresenter对齐方式，同时保证图标容器也垂直居中：

<CheckBox VerticalAlignment="Center" 
          Content="多行测试文本，看看这个轻量修改的方法能不能让图标和文本垂直对齐">
    <CheckBox.Style>
        <Style TargetType="CheckBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <BulletDecorator VerticalAlignment="Center">
                            <BulletDecorator.Bullet>
                                <Border x:Name="Border" Width="13" Height="13" Background="#FFFFFF" BorderBrush="#FF000000" BorderThickness="1"/>
                                <Path x:Name="CheckMark" Width="7" Height="7" Margin="1" Stroke="#FF000000" StrokeThickness="2" Data="M 0 0 L 7 7 M 0 7 L 7 0" Opacity="0"/>
                            </BulletDecorator.Bullet>
                            <!-- 给ContentPresenter设置垂直居中 -->
                            <ContentPresenter VerticalAlignment="Center" Margin="4,0,0,0"/>
                        </BulletDecorator>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="CheckMark" Property="Opacity" Value="1"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="Border" Property="Background" Value="#FFEEEEEE"/>
                                <Setter TargetName="Border" Property="BorderBrush" Value="#FFAAAAAA"/>
                                <Setter TargetName="CheckMark" Property="Stroke" Value="#FFAAAAAA"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </CheckBox.Style>
</CheckBox>

总的来说，核心逻辑就是保证复选框图标所在的容器和文本内容所在的容器都设置了VerticalAlignment="Center"，这样不管文本是单行还是多行，两者都会保持垂直居中对齐。

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