如何使 RadioButton 的项目符号顶部对齐？

Question

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

Answer 1

我基于 Simon Weaver 的答案构建了一个相对通用的模板，可以在大多数情况下使用，而无需记住自定义始终是您的 RadioButton.Content 。

<ControlTemplate x:Key="MultiLineRadioButtonTemplate" TargetType="{x:Type RadioButton}">
    <RadioButton IsChecked="{TemplateBinding IsChecked}">
        <TextBlock>
            <LineBreak />
            <InlineUIContainer>
                <ContentPresenter Margin="0,-21,0,8" 
                                  Content="{TemplateBinding ContentPresenter.Content}"
                                  ContentTemplate="{TemplateBinding ContentPresenter.ContentTemplate}"/>
            </InlineUIContainer>
        </TextBlock>
    </RadioButton>
</ControlTemplate>

解释模板的工作原理：

• TextBlock 之所以存在，是因为默认情况下，如果内容是 Text 对象（Label），RadioButton 项目符号会与 Text 的第一行对齐code> 不起作用）

• LineBreak 是将内容换行，因此创建第一行

• InlineUIContainer，以便我们可以将非文本内容放入TextBlock

• ContentPresenter 是用来保存实际内容的，它有一个负数上边距用于删除 LineBreak 对象留下的空格。

这是一些示例内容：

<StackPanel>
    <RadioButton Template="{StaticResource MultiLineRadioButtonTemplate}">
        <StackPanel>
            <Label Content="Option 1" />
            <StackPanel>
                <CheckBox Content="Some setting" />
                <CheckBox Content="Some other setting" />
            </StackPanel>
        </StackPanel>
    </RadioButton>

    <RadioButton Template="{StaticResource MultiLineRadioButtonTemplate}">
        <StackPanel>
            <Label Content="Option 2" />
            <DataGrid AutoGenerateColumns="False" Height="100">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Id" />
                    <DataGridTextColumn Header="Date" />
                    <DataGridTextColumn Header="Total" />
                    <DataGridTextColumn Header="Count" />
                </DataGrid.Columns>
            </DataGrid>
        </StackPanel>
    </RadioButton>


    <RadioButton Template="{StaticResource MultiLineRadioButtonTemplate}">
        <StackPanel>
            <Label Content="Option 3" />
            <TextBlock TextWrapping="WrapWithOverflow" Margin="2">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna 
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                Duis aute irure dolor in reprehenderit in voluptate velit 
                esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
                occaecat cupidatat non proident, sunt in culpa qui officia 
                deserunt mollit anim id est laborum.
            </TextBlock>
        </StackPanel>
    </RadioButton>
</StackPanel>

以及它的外观：

我唯一真正不满意的是ContentPresenter 的负上边距被硬编码，因为如果您更改字体大小，则必须手动调整该边距。

为 Margin 属性构建一个转换器来计算换行符的高度（{TemplateBinding FontSize}？），甚至是扩展默认情况下具有此行为的 RadioButton 控件的版本，但现在我可以根据应用程序的默认字体大小硬编码 -21。

另外，如果您想从原始 RadioButton 继承其他属性，您可能需要向模板中的 RadioButton 添加一些 TemplateBindings，例如边距、填充、对齐等。为了保持简单，我只绑定到 IsChecked 。

Answer 2

覆盖 RadioButton 的 Control.Template。 以下是来自 MSDN 单选按钮控件模板示例的示例，

如果您不这样做不想覆盖单选按钮的 Control.Template，您可以将内容设为 Wrapped TextBlock。 看这个样本

<RadioButton  Name="radioButton1">
    <TextBlock TextWrapping="Wrap">Here is some multiline text that does some wrapping</TextBlock>
</RadioButton>

Answer 3

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

---

首先，不要在 VerticalAlignment 或 VerticalContentAlignment（甚至 ControlTemplate）上浪费时间。 他们不会做你想要或可能期望的事。

如 MSDN 一个 BulletDecorator （这是 CheckBox 和 RadioButton 用于呈现单选/复选按钮的控件）将自动设置图标的位置。 您对此没有额外的控制权：

当子项出现时，项目符号始终与文本的第一行对齐
对象是文本对象。 如果子对象不是文本对象，则
项目符号与子对象的中心对齐。

除非您更改控件模板（不必要），否则您只能在内容是文本的情况下将单选/复选图标放置在顶部。

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

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

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

这里有一个示例，其中包含超大的 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>