WPF：在stackpanel中的radiobutton旁边放置文本框

Question

我有一个包含两个单选按钮的堆栈面板（ 选项1和选项2 ）。 如果用户选择选项2，则应激活文本框，以允许用户提供有关选项2的更多详细信息。

我想出了两个解决方案，但没有一个是我想要的。 这是他们的样子：

解决方案＃1

解决方案＃1的XAML代码非常简单，结果非常明显：

    <StackPanel Grid.Row="7" Grid.Column="1">
        <RadioButton>Option 1</RadioButton>
        <RadioButton>Option 2:</RadioButton>
        <TextBox>Some Text that details option 2</TextBox>
    </StackPanel>

这里有什么好处，文本框使用整个宽度。 然而，这不是我想要的，因为文本框应该放在选项2的旁边。

解决方案＃2

下一步是在RadioButton标签中创建一个网格。 这允许我将文本框放在适当的位置，但宽度不再扩展到100％。

代码如下所示：

    <StackPanel Grid.Row="8" Grid.Column="1">
        <RadioButton>Option 1</RadioButton>
        <RadioButton>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="130*" />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" >Option 2:</TextBlock>
                <TextBox Grid.Column="1" Margin="10,0,0,0">Some Text that details option 2</TextBox>
            </Grid>
        </RadioButton>
    </StackPanel>

除了这一点，我认为这是一个非常过度设计的解决方案，问题在于： 如何将单选按钮条目中的网格宽度设置为100％？

这里提出了一个类似的问题（ 如何在WPF中将宽度设置为100％ ），但使用ItemContainerStyle属性对无线电按钮不起作用。

在我看来，必须有一个更容易（或至少是一个工作）的解决方案。 有人可以帮忙吗？

Answer 1

用这个：

<StackPanel Grid.Row="8"
            Grid.Column="1">
    <RadioButton>Option 1</RadioButton>
    <RadioButton HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
        <DockPanel  LastChildFill="True">
            <TextBlock >Option 2:</TextBlock>
            <TextBox Grid.Column="1"  
                     Margin="10,0,0,0">Some Text that </TextBox>
        </DockPanel>
    </RadioButton>
</StackPanel>

或者如果你想保留网格：

 <StackPanel Grid.Row="8"
            Grid.Column="1">
    <RadioButton>Option 1</RadioButton>
    <RadioButton HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
        <Grid  HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBlock >Option 2:</TextBlock>
            <TextBox Grid.Column="1"  
                     Margin="10,0,0,0">Some Text that </TextBox>
        </Grid>
    </RadioButton>
</StackPanel>

Answer 2

无论如何你都可以设计。 只需将相同的GroupName应用于所有RadioButtons

<StackPanel>
    <RadioButton Content="Option1" GroupName="Question" />
    <StackPanel Orientation="Horizontal">
        <RadioButton Content="Option2" GroupName="Question" />
        <TextBox Text="Other controls"/>
    </StackPanel>
</StackPanel>

Answer 3

你可以尝试很多东西 -

1. 将第二个RadioButton的Horizo​​ntalAlignment设置为“Stretch”;
2. 尝试在网格上设置它;
3. 将ColumnDefinition设置为“Auto”而另一个设置为“130 *”并没有任何意义。 让第一个在Auto（将自己调整为内容），第二个在“*”（使用所有可用空间）

*尺寸是相对的。 如果您有1 *和2 *，则2 *将始终是1 *的两倍。 与0.5 *和1 *相同，第一个将始终是1 *的一半大小。

您是否尝试将ColumnDefinitions设置为Auto？

另外，你可以用来解决这类问题的方法是在元素周围应用边框（每个元素都有不同的边框颜色）。 它有助于找出哪个控件是罪魁祸首。