[英]Vertical alignment of WPF Checkbox content with respect to checkbox
I have a checkbox whose XAML markup is as follows: 我有一个复选框,其XAML标记如下:
<CheckBox HorizontalContentAlignment="Stretch">
<StackPanel Orientation="Vertical">
<TextBox x:Name="editTextBox"
Text="{Binding Path=Caption, Mode=TwoWay}"
TextWrapping="Wrap"
Visibility="{Binding Path=IsBeingEdited, Converter={StaticResource booleanToVisibilityConverter}}" />
<TextBlock x:Name="itemText"
TextWrapping="Wrap"
Text="{Binding Path=Caption}"
Visibility="{Binding Path=IsBeingEdited, Converter={StaticResource reverseBooleanToVisibilityConverter}}">
</TextBlock>
</StackPanel>
</CheckBox>
The idea is that I can switch between the TextBlock (display) and TextBox (edit). 这个想法是我可以在TextBlock(显示)和TextBox(编辑)之间切换。 However, when running the application, the CheckBox visual (the checkable square) is vertically centered.
但是,在运行应用程序时,CheckBox视觉效果(可检查的正方形)垂直居中。 I would like it to be aligned with the top of the TextBlock/TextBox instead.
我希望它与TextBlock / TextBox的顶部对齐。
I've noticed that when I only include a TextBlock (so no StackPanel, no TextBox), the checkbox is in fact aligned with the top of the TextBlock, so I'm assuming I'm missing some setting on the StackPanel? 我注意到,当我仅包含一个TextBlock(所以没有StackPanel,没有TextBox)时,该复选框实际上与TextBlock的顶部对齐,因此我假设我在StackPanel上缺少某些设置吗?
First of all don't waste your time with VerticalAlignment
or VerticalContentAlignment
(or even ControlTemplate
). 首先,不要浪费时间与
VerticalAlignment
或VerticalContentAlignment
(甚至是ControlTemplate
)。 They're not going to do what you want or might expect. 他们不会做您想要或期望的事情。
As described on MSDN a BulletDecorator
(which is the control that CheckBox and RadioButton uses to render a radio/check button) will set the position of the icon automatically. 如在MSDN上所述,
BulletDecorator
(CheckBox和RadioButton用来渲染单选/检查按钮的控件)将自动设置图标的位置。 You have no additional control over this: 您对此没有其他控制权:
A Bullet always aligns with the first line of text when the Child object is a text object.
当“子对象”对象是文本对象时,“项目符号”始终与文本的第一行对齐。 If the Child object is not a text object, the Bullet aligns to the center of the Child object.
如果Child对象不是文本对象,则Bullet对准Child对象的中心。
Unless you change the control template (unnecessary) you'll only be able to position the radio/check icon at the top if the content is text. 除非更改控件模板(不必要),否则如果内容为文本,则只能将单选/选中图标放置在顶部。
So if you do something like this it won't look good because you won't be able to move the icon no matter how many VerticalAlignment
properties you try to set. 因此,如果您执行这样的操作,效果将不会很好,因为无论您尝试设置多少
VerticalAlignment
属性,都将无法移动图标。
<RadioButton>
<StackPanel>
<TextBlock Text="First line"/>
<TextBlock Text="Something else"/>
</StackPanel>
</RadioButton>
BUT fortunately you can put pretty much anything you want in a TextBlock
using InlineUIContainer
. 但是幸运的是,您可以使用
InlineUIContainer
将几乎任何您想要的东西放入TextBlock
中。 The text (or content) in the first line will dictate the position of the icon automatically. 第一行中的文本(或内容)将自动指示图标的位置。 If you want something underneath the first line that isn't text, just use
<Linebreak/>
and then <InlineUIContainer/>
如果您希望第一行下面的内容不是文本,请使用
<Linebreak/>
然后使用<InlineUIContainer/>
Here's an example that has an oversized TextBox
to show more clearly what's happening. 这是一个示例,其中的
TextBox
过大,可以更清楚地显示正在发生的事情。
<RadioButton>
<TextBlock VerticalAlignment="Top" TextWrapping="Wrap">
<TextBlock Text="Products with <" VerticalAlignment="Center" Margin="0,0,5,0"/>
<InlineUIContainer BaselineAlignment="Center">
<TextBox FontSize="30" Width="25" Text="10" Margin="0,0,5,0"/>
</InlineUIContainer>
<TextBlock VerticalAlignment="Center" Margin="0,0,5,0">
<Run Text="days" FontWeight="Bold"/>
<Run Text="inventory" />
</TextBlock>
<LineBreak/>
<InlineUIContainer>
<StackPanel>
<CheckBox Content="Include unsold products" />
<CheckBox Content="Include something else" />
</StackPanel>
</InlineUIContainer>
</TextBlock>
</RadioButton>
CheckBox.Content
doesn't give you very much control over how things are displayed. CheckBox.Content
不能很好地控制事物的显示方式。 Try this instead: 尝试以下方法:
<DockPanel VerticalAlignment="Top"> <!-- can also be center or bottom -->
<CheckBox/>
<Grid>
<TextBox x:Name="editTextBox"
Text="{Binding Path=Caption, Mode=TwoWay}"
TextWrapping="Wrap"
Visibility="{Binding Path=IsBeingEdited, Converter={StaticResource booleanToVisibilityConverter}}" />
<TextBlock x:Name="itemText"
TextWrapping="Wrap"
Text="{Binding Path=Caption}"
Visibility="{Binding Path=IsBeingEdited, Converter={StaticResource reverseBooleanToVisibilityConverter}}">
</Grid>
</DockPanel>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.