如何使 RadioButton 的 Bullet 对齐顶部? [英] How do I make a RadioButton's Bullet align top?

问题描述

我有一个多行单选按钮，我希望项目符号位于内容的左侧(默认情况下)与单选按钮控件的顶部对齐.在 XAML 中执行此操作的最简单方法是什么?

I have a multiline radio button and I want the bullet to be to the left of the content (as default) aligned to the top of the radio button control. What's the easiest way to do this in XAML?

推荐答案

注意:请务必查看 Rachel 的回答 - 她将这一阶段进一步转化为通用模板

Note: Be sure to check out Rachel's answer - she takes this one stage further into a generic template

首先不要在VerticalAlignment 或VerticalContentAlignment(甚至ControlTemplate)上浪费时间.他们不会做您想要或可能期望的事情.

First of all don't waste your time with VerticalAlignment or VerticalContentAlignment (or even ControlTemplate). They're not going to do what you want or might expect.

如MSDN 一个 BulletDecorator(这是 CheckBox 和 RadioButton 用来呈现单选/复选按钮的控件)将自动设置图标的位置.您对此没有其他控制权:

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. You have no additional control over this:

当 Child 时，Bullet 总是与文本的第一行对齐object 是一个文本对象.如果 Child 对象不是文本对象，则Bullet 与子对象的中心对齐.

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.

除非您更改控件模板(不必要的)，否则您只能在内容为文本时将单选/复选图标放置在顶部.

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.

因此，如果您执行此类操作，它看起来会很糟糕，因为无论您尝试设置多少个 VerticalAlignment 属性，您都无法移动图标.

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.

<RadioButton>
    <StackPanel>
        <TextBlock Text="First line"/>
        <TextBlock Text="Something else"/>
    </StackPanel>
</RadioButton>

但是 幸运的是，您可以使用 InlineUIContainer 在 TextBlock 中放入几乎任何您想要的内容.第一行中的文本(或内容)将自动指示图标的位置.如果你想要第一行下面的不是文本的东西，只需使用 然后

BUT fortunately you can put pretty much anything you want in a TextBlock using InlineUIContainer. 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/>

这是一个具有超大 TextBox 的示例，以更清楚地显示正在发生的事情.

Here's an example that has an oversized TextBox to show more clearly what's happening.

<RadioButton>

    <TextBlock VerticalAlignment="Top" TextWrapping="Wrap">

        <TextBlock Text="Products with &lt;" 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>

这篇关于如何使 RadioButton 的 Bullet 对齐顶部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！