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

时间:2012-12-25 16:08:50

标签: c# wpf xaml radio-button

我有一个包含两个单选按钮的堆栈面板(选项1 选项2 )。如果用户选择选项2,则文本框应处于活动状态,允许用户提供有关选项2的更多详细信息。

我提出了两种解决方案,但它们都不是我想要的。这就是它们的样子:

Screenshot of solution #1 and #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%?

此处询问了类似的问题(How to set width to 100% in WPF),但使用ItemContainerStyle属性对无线电按钮不起作用。

在我看来,必须有一个更容易(或至少是一个工作)的解决方案。有人可以帮忙吗?

3 个答案:

答案 0 :(得分:3)

使用此:

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

答案 1 :(得分:0)

你可以尝试很多东西 -

  1. 将第二个RadioButton的Horizo​​ntalAlignment设置为“Stretch”;
  2. 尝试在网格上设置它;
  3. 将ColumnDefinition设置为“Auto”,另一个设置为“130 *”并没有任何意义。让第一个在Auto(将自己调整为内容),第二个在“*”(使用所有可用空间)
  4. *尺寸是相对的。如果您有1 *和2 *,则2 *将始终是1 *的两倍。与0.5 *和1 *相同,第一个将始终是1 *的一半。

    您是否尝试将两个ColumnDefinitions设置为自动?

    否则,您可以用来解决此类问题的方法是在元素周围应用边框(每个元素都有不同的边框颜色)。它有助于找出哪个控件是罪魁祸首。

答案 2 :(得分:0)

您可以根据需要进行设计。只需将相同的Search应用于所有RadioButtons

GroupName