Question

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

enter image description here

XAML看起来像这样：

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

CheckBox位于Grid单元格内。 是否有一种简单的方法来制作内容并检查XAML CheckBox的部分垂直对齐？我尝试了各种属性组合而没有运气。我看到a similar question here，但答案太复杂了。

提前致谢。

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

Answer 1

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

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

<强>更新

值得查看以下@ nmarler的评论。

Answer 2

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

不是我相信的最佳方式，但可以做这项工作：

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

使用负边距推送内容，结果： enter image description here

Answer 3

CheckBox的默认样式在WPF中看起来不像。它在XP和Windows 7中完美对齐。您能否更好地描述如何重现此问题？

我能想到的两件事就是更改Padding或VerticalContentAlignment。 CheckBox的默认VerticalContentAlignment值为Top，而CheckBox的{{1}}值Content设置为Padding。尝试改变这两个，看看它是否有任何区别。

这是一个比较

enter image description here

来自以下Xaml

"4,0,0,0"

Answer 4

对此有一个简单的解决方案，而无需为内容创建文本框。只需使用：

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

WPF CheckBox style with the TextWrapping

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

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

Answer 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>

如何将CheckBox与其内容对齐？

8 个答案: