垂直对齐 WPF RadioButton 项目符号并拉伸其内容答案

【问题标题】：Vertically align a WPF RadioButton bullet and stretch its contents垂直对齐 WPF RadioButton 项目符号并拉伸其内容
【发布时间】：2012-10-08 00:33:08
【问题描述】：

我想使用一个横跨整个可用区域的网格作为 RadioButton 的内容，并且我希望 RadioButton 的项目符号垂直对齐。

让网格横跨整个区域很容易，我只需在 RadioButton 上设置 HorizontalContentAlignment 属性：

<RadioButton HorizontalContentAlignment="Stretch">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TextBlock>Foo</TextBlock>
        <TextBox Grid.Column="1"/>
        <TextBlock Grid.Row="1">The quick brown fox</TextBlock>
        <TextBox Grid.Row="1" Grid.Column="1"/>
    </Grid>
</RadioButton>

按照 Simon Weaver 对此older question 的回答，我可以相对轻松地垂直对齐单选按钮的项目符号：

<RadioButton HorizontalContentAlignment="Stretch">
    <TextBlock Grid.IsSharedSizeScope="True">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock>Foo</TextBlock>
            <TextBox Grid.Column="1"/>
        </Grid>
        <LineBreak/>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Row="1">The quick brown fox</TextBlock>
            <TextBox Grid.Row="1" Grid.Column="1"/>
        </Grid>
    </TextBlock>
</RadioButton>

问题是，这样做后，内容不再延伸。

如何获得垂直对齐的项目符号和拉伸网格？

【问题讨论】：

标签： wpf radio-button alignment

【解决方案1】：

这适用于视觉效果。您没有列出任何功能要求，所以我不确定在没有一些事件映射的情况下它是否适合您。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <RadioButton Grid.Column="0" Grid.RowSpan="2" Content=""/>
    <TextBlock Grid.Column="1">Foo</TextBlock>
    <TextBox Grid.Column="2"/>
    <TextBlock Grid.Row="1" Grid.Column="1">The quick brown fox</TextBlock>
    <TextBox Grid.Row="1" Grid.Column="2"/>
</Grid>

【讨论】：

【解决方案2】：

TextBlock 被正确拉伸，但其中的网格没有。大概这就是 TextBlock 的工作方式。

以下内容有点hacky，但它有效：

<RadioButton HorizontalContentAlignment="Stretch">
    <TextBlock Name="Text" Grid.IsSharedSizeScope="True">
        <Grid Width="{Binding ElementName=Text, Path=ActualWidth}">

【讨论】：