DockPanel-拉伸控件填充相对于其兄弟姐妹的剩余空间

Question

以下代码片段将产生以下结果：

<DockPanel Width="240">
    <ComboBox HorizontalAlignment="Stretch">
        <ComboBoxItem Content="A" />
        <ComboBoxItem Content="B" />
        <ComboBoxItem Content="C" />
    </ComboBox>
</DockPanel>

正如我们所看到的，ComboBox很好地填充了整个DockPanel宽度，如预期的那样。 如果我们在StackPanel之后添加以下ComboBox，我们将拥有：

<StackPanel Orientation="Horizontal" Width="120" Visibility="Visible" Background="Aqua">
    <TextBox Width="60" />
    <TextBox Width="60" />
</StackPanel>

我们刚刚遇到了第一个问题：ComboBox以及{{1}以来，DockPanel不应填充HorizontalAlignment=Stretch的其他120个像素}是否使用其他120？

至少，如果我们将StackPanel转换为StackPanel.Visibility，我们将得到：

当Hidden/Collapsed为ComboBox时，如何制作DockPanel.Width来填充整个StackPanel.Visibility 水平，就像第一张图片一样？

所有控件都必须水平对齐，并且Hidden/Collapsed并非必须实现。

Answer 1

  

我们刚刚遇到了第一个问题：ComboBox以及{{1}以来，DockPanel不应填充HorizontalAlignment=Stretch的其他120个像素}是否使用其他120？

只有StackPanel的 last 子级：

DockPanel

没有理由将<DockPanel Width="240"> <StackPanel Orientation="Horizontal" Width="120" Visibility="Visible" Background="Aqua" DockPanel.Dock="Right"> <TextBox Width="60" /> <TextBox Width="60" /> </StackPanel> <ComboBox> <ComboBoxItem Content="A" /> <ComboBoxItem Content="B" /> <ComboBoxItem Content="C" /> </ComboBox> </DockPanel> 属性显式设置为HorizontalAlignment。这是默认值。

  

当Stretch为ComboBox / DockPanel.Width时，如何像第一张图像一样水平StackPanel.Visibility填充整个Hidden？

通过根据以上示例标记将Collapsed添加为最后一个子代。

Answer 2

如果我了解您，则在您的情况下，似乎Grid组件将是一个不错的选择。

对于空间问题- Visibility = "Hidden"保持原始组件空间“有效”，然后，如果可能的话，请使用Visibility = "Collapsed"

 <Grid Width="240">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <ComboBox HorizontalAlignment="Stretch">
            <ComboBoxItem Content="A" />
            <ComboBoxItem Content="B" />
            <ComboBoxItem Content="C" />
        </ComboBox>
        <StackPanel  Grid.Column="1" Orientation="Horizontal"  Visibility="Visible" Background="Red">
            <TextBox Width="60" />
            <TextBox Width="60" />
        </StackPanel>
    </Grid>