如何将 CheckBox 与其内容对齐？

Posted 2023-03-05

【中文标题】如何将 CheckBox 与其内容对齐？

【英文标题】：How can I align a CheckBox with its content?

【发布时间】：2011-11-06 03:23:41

【问题描述】：

WPF CheckBox 的外观使检查部分与标签（内容）部分不对齐。支票略高于内容，如下所示：

XAML 如下所示：

<CheckBox Content="Poorly aligned CheckBox" Margin="9"/>

复选框位于网格单元格内。 有没有一种简单的方法可以使 XAML CheckBox 的内容和检查部分垂直对齐？我尝试了各种属性组合，但没有成功。我看到了a similar question here，但答案太复杂了。

提前致谢。

编辑：问题是由我设置为 14 的 Window FontSize 引起的。要重新创建问题，请将 CheckBox FontSize 设置为 14（或更多）。工厂工人在远处观看我的程序，因此我允许用户增加或减少 Window FontSize。

【问题讨论】：

如果您认为编辑控件模板过于复杂，那么您将不得不接受标准控件模板的布局方式。您需要对控件模板进行的实际更改，就像您链接到的答案中所做的更改一样简单。

Tags do not 属于标题，即使是稍微熟悉网站的人都知道这一点，如果问题被标记为 WPF 所有人都知道你不是在说话关于 WinForms 或 html 复选框。 WPF 标记甚至会自动添加到页面标题之前。

您可以将我添加到无法重现您的问题的人员列表中。您的 XAML 会生成一个外观正常的复选框，而不会出现您在屏幕截图中显示的布局问题。您可以在独立的测试应用中重现您的问题吗？

设置VerticalContentAlignment="Center"

更新你的答案

【参考方案1】：

我知道为时已晚，但这里有一个更好的解决方案，无需设置边距。对于TextBlock或Checkbox的不同高度，边距应该设置不同。

<CheckBox VerticalAlignment="Center" VerticalContentAlignment="Center">
    <TextBlock Text="Well aligned Checkbox" VerticalAlignment="Center" />
</CheckBox>

更新：

下面@nmarler 的评论值得一看。

【讨论】：

我发现指定VerticalContentAlignment="Center" 属性就足够了。所以更紧凑：<CheckBox Content="Well aligned Checkbox" VerticalContentAlignment="Center"/> 为我工作

这是最好的答案

我使用了@nmarler 的建议，但奇怪的是它只与<CheckBox Content="Well aligned Checkbox" VerticalContentAlignment="Bottom"/> 一致。无论如何它解决了我的对齐问题，谢谢你们！

【参考方案2】：

编辑 - 新答案：（以前不好）

我认为这不是最好的方法，但可以完成工作：

<CheckBox>
    <TextBlock Text="Poorly aligned CheckBox" Margin="0,-2,0,0"/>
</CheckBox>

使用负边距将内容向上推，结果：

【讨论】：

这根本不做任何事情。

Qwertie 的回答指出了问题的原因 - Window FontSize="14"。只要用户不更改 Window FontSize （我的程序允许），您的否定上边距答案就有效。目前，您的答案是我找到的最好的答案。谢谢。

负上边距使整个控件略微向上移动。我发现负顶部填充效果更好。现在我的解决方法是： Padding="4, -2, 0, 0"

【参考方案3】：

CheckBox 的默认样式与 WPF 中的样式不同。它在 XP 和 Windows 7 中完美匹配。您能否更好地描述如何重现此问题？

我能想到的两件事是更改Padding 或VerticalContentAlignment。 VerticalContentAlignment 的默认 CheckBox 值为 Top，而带有 Content 的 CheckBox 将 Padding 设置为 "4,0,0,0"。试着改变这两个，看看是否有什么不同。

这是一个比较

来自以下 Xaml

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <CheckBox Grid.Row="0"
              Content="Poorly aligned CheckBox" Margin="9" />
    <CheckBox Grid.Row="1"
              Content="Padding=4,4,0,0" Margin="9" Padding="4,4,0,0"/>
    <CheckBox Grid.Row="2"
              Content="Vertical Center" Margin="9"
              VerticalContentAlignment="Center"/>
    <CheckBox Grid.Row="3"
              Content="Vertical Top" Margin="9"
              VerticalContentAlignment="Top"/>
</Grid>

【讨论】：

Setting Padding="4, -2, 0, 0" 目前是一个合理的修复方法。谢谢。

在看到您对Window 拥有FontSize="14" 的评论后，我尝试了那个：)

看到您的回复，为我的复选框添加边距似乎为我解决了这个问题。

【参考方案4】：

对此有一个简单的解决方案，无需为内容制作文本块，也无需编写您不需要的额外代码。只需使用“VerticalContentAlignment”。示例：

<CheckBox Content="Sample of Text" VerticalContentAlignment="Center"/>

【参考方案5】：

将一个空的 CheckBox 和内容作为单独的控件放置在 StackPanel 中，具有水平方向。这适用于任何字体大小。

<StackPanel Orientation="Horizontal">
    <CheckBox VerticalAlignment="Center" />
    <TextBlock VerticalAlignment="Center" Text="Option X" />
</StackPanel />

【讨论】：

如果您这样做，单击 TextBlock 将不会切换 CheckBox。您需要将它放在 CheckBox 的内容中以实现该行为。

【参考方案6】：

对我的布局应用负顶部填充效果很好：

<CheckBox Content="Poorly aligned CheckBox" Padding="4,-3,0,0" Margin="9"/>

【参考方案7】：

我的复选框对齐很好，所以我想知道你的复选框有什么不同。唯一明显的区别是你使用的字体比我大，这让我想起了以下问题：

WPF CheckBox style with the TextWrapping

您的问题可能是，如果内容是文本块，则复选框顶部对齐，当字体大小增加时，这可能看起来很奇怪。所以我的猜测是，尝试使用 AccessText 作为 CheckBox 的内容：

<CheckBox Margin="9"><AccessText>Better aligned CheckBox?</AccessText></CheckBox>

【讨论】：

谢谢。您的回答指出了问题的原因 - Window FontSize="14"。我尝试了 AccessText 但这并没有解决它。我可能会使用 MichaelS 的答案，即给内容一个负的上边距。

【参考方案8】：

在 ControlTemplate TargetType="x:Type CheckBox" 中，您将看到 Width=13 Height=13;添加 Margin="0,4,0,0"（左、上、右、下）并调整以获得您喜欢的结果。我什至放大了 CheckBox 和 Glyph Size，然后将其与 Margin 重新对齐。这是完整的模板：

<Style x:Key="x:Type CheckBox"
   TargetType="x:Type CheckBox">
    <Setter Property="SnapsToDevicePixels"
      Value="true" />
    <Setter Property="OverridesDefaultStyle"
      Value="true" />
    <Setter Property="FocusVisualStyle"
      Value="DynamicResource CheckBoxFocusVisual" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="x:Type CheckBox">
                <BulletDecorator Background="Transparent">
                    <BulletDecorator.Bullet>
                        <!--Width=13 Height=13 CornerRadius=0-->
                        <Border x:Name="Border"
                Width="15"
                Height="15"
                Margin="0,4,0,0"
                CornerRadius="1"
                BorderThickness="1">
                            <Border.BorderBrush>
                                <LinearGradientBrush StartPoint="0,0"
                                 EndPoint="0,1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Color="DynamicResource BorderLightColor"
                                Offset="0.0" />
                                            <GradientStop Color="DynamicResource BorderDarkColor"
                                Offset="1.0" />
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0,0"
                                 EndPoint="0,1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Color="DynamicResource ControlLightColor" />
                                            <GradientStop Color="DynamicResource ControlMediumColor"
                                Offset="1.0" />
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>

                            </Border.Background>
                            <Grid>
                                <!--Width=7 Height=7-->
                                <Path Visibility="Collapsed"
                  Width="8"
                  Height="8"
                  Margin="0,0,0,0"
                  x:Name="CheckMark"
                  SnapsToDevicePixels="False"
                  StrokeThickness="2"
                  Data="M 0 0 L 7 7 M 0 7 L 7 0">
                                    <Path.Stroke>
                                        <SolidColorBrush Color="DynamicResource GlyphColor" />
                                    </Path.Stroke>
                                </Path>
                                <Path Visibility="Collapsed"
                  Width="8"
                  Height="8"
                  Margin="0,0,0,0"
                  x:Name="InderminateMark"
                  SnapsToDevicePixels="False"
                  StrokeThickness="2"
                  Data="M 0 7 L 7 0">
                                    <Path.Stroke>
                                        <SolidColorBrush Color="DynamicResource GlyphColor" />
                                    </Path.Stroke>
                                </Path>
                            </Grid>
                        </Border>
                    </BulletDecorator.Bullet>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                            Storyboard.TargetProperty="(Panel.Background).
                  (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                        <EasingColorKeyFrame KeyTime="0"
                                     Value="StaticResource ControlMouseOverColor" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                            Storyboard.TargetProperty="(Panel.Background).
                  (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                        <EasingColorKeyFrame KeyTime="0"
                                     Value="StaticResource ControlPressedColor" />
                                    </ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                            Storyboard.TargetProperty="(Border.BorderBrush).
                  (GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                        <EasingColorKeyFrame KeyTime="0"
                                     Value="StaticResource PressedBorderDarkColor" />
                                    </ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                            Storyboard.TargetProperty="(Border.BorderBrush).
                  (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                        <EasingColorKeyFrame KeyTime="0"
                                     Value="StaticResource PressedBorderLightColor" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled" />
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                             Storyboard.TargetName="CheckMark">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                        Value="x:Static Visibility.Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked" />
                            <VisualState x:Name="Indeterminate">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                             Storyboard.TargetName="InderminateMark">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                        Value="x:Static Visibility.Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <!--4,0,0,0-->
                    <ContentPresenter Margin="5,0,0,0"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Left"
                        RecognizesAccessKey="True" />
                </BulletDecorator>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>