[英]How can I align a CheckBox with its content?
The look of a WPF CheckBox misaligns the check portion with the label (content) portion. WPF CheckBox 的外观使检查部分与标签(内容)部分错位。 The check stays slightly above the content as shown here:
支票略高于内容,如下所示:
The XAML looks like this: XAML 看起来像这样:
<CheckBox Content="Poorly aligned CheckBox" Margin="9"/>
The CheckBox is inside a Grid cell. CheckBox 位于 Grid 单元格内。 Is there a simple way to make the content and check portions of a XAML CheckBox align vertically?
是否有一种简单的方法可以使 XAML CheckBox 的内容和检查部分垂直对齐? I've tried various combinations of properties with no luck.
我尝试了各种属性组合,但都没有运气。 I saw a similar question here but the answer is way too complex.
我在这里看到了一个类似的问题,但答案太复杂了。
Thanks in advance.提前致谢。
EDIT: The problem was caused by the Window FontSize which I set to 14 .编辑:问题是由我设置为 14 的 Window FontSize 引起的。 To re-create the problem set the CheckBox FontSize to 14 (or more).
要重新创建问题,请将 CheckBox FontSize 设置为 14(或更多)。 My program is viewed at a distance by factory workers so I allow the Window FontSize to be increased or decreased by the user.
我的程序由工厂工人在远处查看,因此我允许用户增加或减少 Window FontSize。
I know it's too late, but here is a better solution, without setting margins.我知道为时已晚,但这里有一个更好的解决方案,无需设置边距。 Margins should be set differently for different heights of
TextBlock
or Checkbox
.应为
TextBlock
或Checkbox
不同高度设置不同的边距。
<CheckBox VerticalAlignment="Center" VerticalContentAlignment="Center">
<TextBlock Text="Well aligned Checkbox" VerticalAlignment="Center" />
</CheckBox>
Update:更新:
It's worth checking out @nmarler's comment below.值得查看下面@nmarler 的评论。
Edit - New Answer: (previous was no good)编辑 - 新答案:(以前不好)
Not the best way i believe , but can do the work:我相信这不是最好的方式,但可以完成这项工作:
<CheckBox>
<TextBlock Text="Poorly aligned CheckBox" Margin="0,-2,0,0"/>
</CheckBox>
Using negative margin to push the content up, result:使用负边距将内容向上推,结果:
The default Style of a CheckBox
don't look like that in WPF. CheckBox
的默认样式与 WPF 中的样式不同。 It aligns perfectly in both XP and Windows 7. Can you give a better description of how to reproduce this problem?它在 XP 和 Windows 7 中完美匹配。您能否更好地描述如何重现此问题?
Two things I can think of to get the offset that you're seeing is either changing the Padding
or the VerticalContentAlignment
.为了获得您所看到的偏移量,我能想到的两件事是更改
Padding
或VerticalContentAlignment
。 The default CheckBox
value for VerticalContentAlignment
is Top
and a CheckBox
with Content
has Padding
set to "4,0,0,0"
. VerticalContentAlignment
的默认CheckBox
值为Top
并且带有Content
的CheckBox
Padding
设置为"4,0,0,0"
。 Try to change these two around and see if it makes any difference.尝试改变这两个,看看它是否有什么不同。
Here is a comparison这是一个比较
From the following Xaml从以下 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>
There is a simple solution for this without needing to make a text block for the content, and without writing extra code that you don't need.对此有一个简单的解决方案,无需为内容制作文本块,也无需编写不需要的额外代码。 Just use "VerticalContentAlignment".
只需使用“VerticalContentAlignment”。 Example:
例子:
<CheckBox Content="Sample of Text" VerticalContentAlignment="Center"/>
Place an empty CheckBox and the content as separate controls in a StackPanel with horizontal orientation.将一个空的 CheckBox 和内容作为单独的控件放置在具有水平方向的 StackPanel 中。 This works with any font size.
这适用于任何字体大小。
<StackPanel Orientation="Horizontal">
<CheckBox VerticalAlignment="Center" />
<TextBlock VerticalAlignment="Center" Text="Option X" />
</StackPanel />
应用负顶部填充对我的布局来说很好用:
<CheckBox Content="Poorly aligned CheckBox" Padding="4,-3,0,0" Margin="9"/>
In the ControlTemplate TargetType="{x:Type CheckBox}", you will see Width=13 Height=13;在 ControlTemplate TargetType="{x:Type CheckBox}" 中,您会看到 Width=13 Height=13; add in the Margin="0,4,0,0" (Left, Top, Right, Bottom) and adjust to get the results you like.
添加 Margin="0,4,0,0"(左、上、右、下)并调整以获得您喜欢的结果。 I have even enlarged the CheckBox and the Glyph Size and then realigned it with the Margin.
我什至放大了 CheckBox 和 Glyph Size,然后将其与 Margin 重新对齐。 Here is the complete Template:
这是完整的模板:
<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>
My checkboxes are aligned fine, so I wonder what's different about yours.我的复选框对齐得很好,所以我想知道你的有什么不同。 The only apparent difference is that you are using a larger font than me, which reminds me of the following question:
唯一明显的区别是您使用的字体比我大,这让我想起了以下问题:
WPF CheckBox style with the TextWrapping 带有 TextWrapping 的 WPF CheckBox 样式
Your problem may be that if the content is a textblock, the checkbox is top-justified, which may look odd when the font size is increased.您的问题可能是,如果内容是文本块,则复选框是顶部对齐的,当增加字体大小时,这可能看起来很奇怪。 So my guess is, try using an AccessText as the Content of the CheckBox instead:
所以我的猜测是,尝试使用 AccessText 作为 CheckBox 的内容:
<CheckBox Margin="9"><AccessText>Better aligned CheckBox?</AccessText></CheckBox>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.