如何解决这种涉及可折叠区域的布局方案？答案

【问题标题】：How do I solve this layout scenario involving a collapsible region?如何解决这种涉及可折叠区域的布局方案？
【发布时间】：2012-11-16 16:31:04
【问题描述】：

我有以下布局问题在这里得到了最好的解释（为粗略的插图道歉）

假设每个控件都作为单独的用户控件实现

我想要这样的行为，即展开右上角（绿色）控件将呈现到视图中的展开区域比初始（绿色）控件的宽度更宽，并直接出现在它的下方，宽度等于第一行中的 2 个控件（例如 2 的 colspan）同时按下它下面的所有内容

假设最初有一个包含 2 行的网格 ..第一行是一些控件，其次是可扩展控件 - 第二行可以有任何东西，可以填充 2 的 colspan ..可以是另一个布局容器或任何用户控件在里面等等。

如果绿色的可扩展控件是用户控件，我需要做什么才能获得我所描述的这种行为？

我想我需要设置容器的 Grid.Row 和 Colspan 附加属性，该属性表示从用户控件内部到用户控件所在的布局网格的扩展内容（？）？（但是我如何将用户控件内的控件的附加属性设置为用户控件外的布局容器 - 特别是如果扩展内容本身位于用户控件内的网格内）。

即使我能做到这一点，这也将非常脆弱，因为它只有在控件位于网格布局容器中时才能工作。

有什么想法吗？不必使用网格，但这似乎是解决问题的自然/显而易见的方法？

【问题讨论】：

标签： wpf xaml

【解决方案1】：

不久前我有一个类似的布局。这对我有用：

在绿色控件上，为您需要的大小创建依赖属性。在这种情况下，我期望全宽（下矩形）和窄宽度（上矩形）。
在顶级容器中，您可以创建一个用于测量尺寸的网格。所以你会得到这样的东西：
```
<Grid x:Name="fullSize">
     <ColumnDefinition/>
     <ColumnDefinition x:Name="halfSize"/>
</Grid>
```

您可以在此处以适当的方式划分列的宽度。 - 然后，绑定用这个网格测量的宽度

   <foo:GreenControl
         FullWidth={Binding ElementName=fullSize, Path=ActualWidth}
         NarrowWidth={Binding ElementName=halfSize, Path=ActualWidth}
   />

现在 GreenControl 可以将其宽度设置为所需的任何值，例如在值更新的处理程序中。在我的例子中，我将 XAML 中的元素绑定到依赖道具。

【讨论】：

伟大的开始！这解决了获得全宽的问题。问题是，当我的绿色控件展开时，我还需要在其下方显示额外的展开内容（例如下一个 Grid 行），所以有两个部分：最初的“最小”绿色控件仍然在同一个地方，然后是展开的全宽出现在它下面的版本
这是一个固定的额外高度，还是取决于绿色控件中的某些内容？我猜想多出一行，然后让绿色控件跨越两行，并将额外行的高度绑定到绿色控件所需的高度。
假设额外的内容现在是固定高度的——这就是我的设想：你有一个 UserControl ..它位于窗口中的网格中。此网格有 3 行 - 1 行用于 UserControl，第 2 行用于填充 UserControl 中的可扩展内容，第 3 行用于剩余窗口内容。 UserControl 内部是另一个网格，其中包含扩展的内容（假设它在 Stackpanel 中）。当我展开时，我想在 StackPanel 上设置 Grid.Row 和 Grid.Column 附加属性以引用窗口中的外部 Grid，在 UserControl 之外。问题是 - 我该如何设置它们？
你可以做 Grid.SetColumn(mygrid, colvalue); Grid.SetColumnSpan(mygrid, spanvalue); （请参阅msdn.microsoft.com/en-us/library/ms749011.aspx 关于设置附加道具）。