如何使RadioButton的子弹对齐顶部?

笔记 :一定要退房 Rachel's answer -她将这一阶段进一步转化为通用模板

首先,不要把你的时间浪费在 VerticalAlignment 或 VerticalContentAlignment (甚至 ControlTemplate

如上所述 MSDN BulletDecorator (复选框和RadioButton用于渲染单选/复选按钮的控件)将自动设置图标的位置。您对此没有其他控制权:

当子项出现时,项目符号始终与第一行文本对齐 项目符号与子对象的中心对齐。

除非您更改控制模板(不必要),否则只有当内容为文本时,您才能将radio/check图标定位在顶部。

垂直对齐 您尝试设置的属性。

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

但是 幸运的是,你可以把几乎任何你想要的东西放在一个盒子里 TextBlock 使用 InlineUIContainer . 第一行中的文本(或内容)将自动指示图标的位置。如果你想在第一行下面找到一些不是文字的东西,就用 <Linebreak/> 然后 <InlineUIContainer/>

这里有一个例子,它有一个超大的 TextBox

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

我已经基于 Simon Weaver's answer 它可以在大多数情况下使用,而无需记住自定义 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 是因为默认情况下,如果内容是文本对象(a),则RadioButton项目符号与第一行文本对齐 Label

• 这个 LineBreak 是将内容包装到新行,以便创建第一行

• 这个 InlineUIContainer 这样我们就可以将非文本内容放入 控件

• 这个 ContentPresenter 断线 对象

以下是一些示例内容:

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

以及它的外观:

唯一让我不高兴的是,这个项目的最高利润率为负 任命者 硬编码,因为如果你改变字体大小,你必须手动调整边距。

为客户构建一个转换器可能并不难 Margin 属性,该属性计算换行符的高度( {TemplateBinding FontSize} ?),甚至是默认情况下具有这种行为的RadioButton控件的扩展版本,但现在我可以使用基于应用程序默认字体大小的硬编码-21。

另外,您可能需要添加一些 TemplateBindings 到 RadioButton 如果要从原始属性继承其他属性,请在模板中 单选按钮 ,例如边距、填充、对齐等。我只绑定到 IsChecked 为了简单起见。

覆盖RadioButton的控件.模板。下面是来自MSDN的示例 Radio Button Control Template Example

如果您不想覆盖单选按钮的Control.Template,可以将内容设置为包装文本块。看到这个样本了吗

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