WPF 容器/网格布局答案

【问题标题】：WPF Container/grid layoutWPF 容器/网格布局
【发布时间】：2012-06-25 00:09:28
【问题描述】：

我需要创建一个可以显示 3 种不同控件类型的集合的 WPF 容器。每个控件的高度和宽度都基于其他控件。例如，如果 controlA 为 200X200，则 controlB 为 100X200，controlC 为 50X50。我需要找出如何通过根据可用空间和每种控件类型的数量找到最佳布局来创建足够智能的容器来安排这些控件。

以下面的例子为例，我们有 1 个 controlA 实例、1 个 controlB 实例和 2 个 controlC 实例。请注意，与顺序控件列表相比，它是如何优雅地定位给它一个紧凑的外观。

container http://onlinegolfpool.com/images/grid.png

关于如何解决的任何想法？我应该使用网格并自己计算吗？

提前致谢

【问题讨论】：

您在下面的 cmets 中有一个示例，即“5 个 controlA 实例、3 个 controlB 实例和 11 个 controlC”。在这种情况下，比率是否相同？这意味着任何 A 的高度仍然是 B 的两倍，而任何 B 的宽度仍然是 C 的两倍？
是的，类型/控件的比例（大小）始终相同——唯一不同的是类型/控件的数量。
听起来您要么需要创建自己的自定义Panel，要么确定您是否可以对数据执行一些算法来确定您需要的行/列数和行/每个项目的列，并使用 ItemsControl 并将 ItemsPanelTemplate 设置为 Grid
澄清一下，您的控件实际上是否具有固定大小，或者只是固定比例？例如，ItemC 是否总是 100x50？另外，您的可用区域是固定大小吗？意思是，它有最大高度或宽度吗？
感谢您的更新，您回答了您的问题 - 没有什么是或应该是固定大小的。

标签： wpf layout grid containers

【解决方案1】：

您绝对应该使用 Grid，但不要考虑自己计算这个 :) 使用星号 (*) 定义每个单元格的相对大小。 WPF 将为您完成剩下的工作。

例子：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Rectangle Fill="Pink" Stroke="Black" Grid.RowSpan="2"/>
    <Rectangle Fill="Blue" Stroke="Black" Grid.Column="1" Grid.ColumnSpan="2"/>
    <Rectangle Fill="Yellow" Stroke="Black" Grid.Row="1" Grid.Column="1"/>
    <Rectangle Fill="Yellow" Stroke="Black" Grid.Row="1" Grid.Column="2"/>
</Grid>

Asterisk 非常强大，很多人甚至都不知道它:) 享受吧！

【讨论】：

是的，但是当我有 5 个 controlA 实例、3 个 controlB 实例和 11 个 controlC 时会发生什么？我也需要足够灵活和聪明的东西来处理这些情况。
然后你可以使用 UniformGrid，嵌套在一个单元格中
是否可以查看 .xaml 示例，我在其中绑定到颜色列表，我可以在其中设置 ItemSource{Binding Path=MyColorsCollection}？
不这么认为。您必须创建自己的Panel，它可以随意排列元素。然后在ItemsControl 和你的ItemSource{Binding Path=MyColorsCollection} 中使用它。
有用的链接如何创建自定义Panel:codeproject.com/Articles/37348/Creating-Custom-Panels-In-WPF

【解决方案2】：

我的建议是使用堆栈面板而不是网格面板。然后为您想要的任何控件赋予硬编码宽度，其余区域将自行调整。

<StackPanel Orientation=Horizontal>
    <leftcontrol/>
    <StackPanel Orientation=Vertical>
        <firstcontrol/>
        <StackPanel Orientation=Horizontal>
            <bottomLeftControl/>
            <bottomRightControl/>
        </StackPanel> 
    </StackPanel>
</StackPanel>

【讨论】：

是的，但是当我有 5 个 controlA 实例、3 个 controlB 实例和 11 个 controlC 时会发生什么？我也需要足够灵活和聪明的东西来处理这些情况。
使用 DockPanel 并让它处理布局
Vishal，您能否提供一个 .xaml 示例，我在其中绑定到颜色列表，我可以在其中设置 ItemSource{Binding Path=MyColorsCollection}？