如何使RadioButton的Bullet对齐顶部？

Question

我有一个多行单选按钮,我希望子弹在内容的左侧(默认情况下)与单选按钮控件的顶部对齐.在XAML中最简单的方法是什么？

Answer 1

注意:一定要查看Rachel的答案 - 她将这一阶段进一步纳入通用模板

首先不要浪费你的时间VerticalAlignment或VerticalContentAlignment(甚至ControlTemplate).他们不会做你想做或想做的事.

如MSDN a BulletDecorator(CheckBox和RadioButton用于呈现无线电/检查按钮的控件)所述,将自动设置图标的位置.您无法对此进行额外控制:

当Child对象是文本对象时,Bullet总是与第一行文本对齐.如果Child对象不是文本对象,则Bullet对齐到Child对象的中心.

除非您更改控制模板(不必要),否则只有在内容为文本时才能将收音机/支票图标置于顶部.

因此,如果你做这样的事情,它看起来不会很好,因为无论VerticalAlignment你试图设置多少属性,你都无法移动图标.

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

Answer 2

我已经基于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对象,则RadioButton项目符号与文本的第一行对齐(a Label将无效)

• 将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.

此外,您可能希望将一些添加TemplateBindings到RadioButton的模板,如果你想继承原来的其他属性RadioButton,如利润率,填充,对齐等我只势必IsChecked保持它的简单的目的.