DockPanel - 拉伸控件以填充与其兄弟姐妹相关的剩余空间答案

【问题标题】：DockPanel - Stretch control to fill remaining space in respect to it's siblings VisibilityDockPanel - 拉伸控件以填充与其兄弟姐妹相关的剩余空间
【发布时间】：2019-09-28 20:19:58
【问题描述】：

下面的 sn-p 产生这个结果：

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

正如我们所见，ComboBox 很好地填充了整个DockPanel 宽度，正如它应该的那样。如果我们在ComboBox 之后添加以下StackPanel，我们会得到这个：

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

我们刚刚解决了第一个问题：ComboBox 不应该填充DockPanel 的其他 120 个像素吗，因为它是 HorizontalAlignment=Stretch 并且因为 StackPanel 使用其他 120 个像素？

至少，如果我们将 StackPanel.Visibility 变成 Hidden/Collapsed，我们会得到这样的：

当StackPanel.Visibility 是Hidden/Collapsed 时，如何使ComboBox 填充整个DockPanel.Width 水平方向，就像第一张图片一样？

所有控件都必须水平对齐，DockPanel 不是必须的。

【问题讨论】：

使用 Visibility.Collapsed 而不是 Hidden。
@DaveM 您是否尝试过使用您的解决方案运行示例？既不是隐藏作品，也不是折叠作品。
将组合框作为停靠面板中的最后一项（堆栈面板之后）并设置堆栈面板的 DockPanel.Dock="Right"
Dockpanel 看起来很方便。在实践中，让事情按预期工作可能很繁琐，而且布局可能很脆弱。网格更容易预测。

标签： c# wpf xaml dockpanel

【解决方案1】：

我们刚刚解决了第一个问题：ComboBox 不应该填充DockPanel 的其他 120 个像素吗，因为它是 HorizontalAlignment=Stretch 并且因为 StackPanel 使用其他 120 个像素？

仅当它是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。这是默认值。

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

根据上述示例标记将ComboBox 添加为最后一个子级。

【讨论】：

【解决方案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>

【讨论】：

当StackPanel 被隐藏/折叠时，ComboBox 仍然不会占用第 2 列的空间。
好吧，我刚刚对其进行了测试，正如我所写，Visibility = "Hidden" 不起作用，但是当 Visibility = "Collapsed" ComboBox 占用了整个剩余空间（240px） .请再检查一遍
如果您折叠堆栈面板，它将不占用空间，并且它位于自动列中，而该列又不占用空间。如果你只是隐藏它，那么它会占用相同的空间，但你看不到它。在我看来，崩溃会因此起作用。如果由于某种原因折叠后不起作用，请使用足够的代码和标记更新您的帖子，以便我们可以轻松复制您看到的内容。