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

Question

我有以下最佳解释的布局问题（粗略说明道歉）

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

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

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

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

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

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

有什么想法吗？不必使用网格，但这似乎是解决它的自然/明显的方法吗？

Answer 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中的元素绑定到依赖道具。