3

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

我想出了两个解决方案，但都不是我想要的。它们是这样的：

解决方案 #1 和 #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-tags 中创建一个网格。这使我可以将文本框放置在正确的位置，但是宽度不再缩放到 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属性不适用于单选按钮。

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

4

3 回答 3

4

用这个：

<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>
于 2012-12-25T16:21:33.307 回答
1

你可以随心所欲地设计。只需将相同GroupName应用于所有 RadioButtons

<StackPanel>
    <RadioButton Content="Option1" GroupName="Question" />
    <StackPanel Orientation="Horizontal">
        <RadioButton Content="Option2" GroupName="Question" />
        <TextBox Text="Other controls"/>
    </StackPanel>
</StackPanel>
于 2019-04-18T05:41:14.207 回答
0

有很多东西可以尝试——

  1. 将第二个 RadioButton 的 Horizo​​ntalAlignment 设置为“Stretch”；
  2. 尝试将其设置在 Grid 上；
  3. 将 ColumnDefinition 设置为“Auto”，将另一个设置为“130*”并没有任何意义。将第一个设置为 Auto（根据内容调整大小），第二个设置为“*”（使用所有可用空间）

* 大小是相对的。如果你有 1* 和 2*，2* 总是 1* 的两倍。与 0.5* 和 1* 相同，第一个总是 1* 大小的一半。

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

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

于 2012-12-25T16:16:02.760 回答