WPF 统一网格布局答案

【问题标题】：WPF UniformGrid LayoutWPF 统一网格布局
【发布时间】：2012-06-15 12:22:34
【问题描述】：

我有一个ItemsControl，我计划在其中托管一个水果对象列表。我有一个Fruit 对象列表，它们都有自己的DataTemplates。我有一个Grape 对象、一个Orange 对象和一个Kiwi 对象。

我想使用UniformGrid 以使所有单元格的大小相等，但我希望Kiwi 对象仅跨越1 个单元格，我希望Grape 跨越2 个单元格（ColumnSpan = 2）并且我希望 Orange 控件跨越 4 个单元格（ColumnSpan = 2 和 RowSpan = 2）

我怎样才能做到这一点？

【问题讨论】：

标签： wpf layout grid uniformgrid

【解决方案1】：

UniformGrid 中的项目不能跨越多个单元格。

为什么不使用常规的Grid 而将行/列的高度/宽度设置为*，这样它们的大小都相同？如果您希望单元格是一个高度与宽度匹配的完美正方形，请务必将 Grid 的Height 绑定到Width，反之亦然。

需要注意的是，您需要在ItemContainerStyle 中应用网格定位属性，而不是在项目本身上，因为ItemsControl 将每个元素包装在ContentPresenter 中，然后再将该项目添加到ItemsPanel （详情见我的博文here）

<ItemsControl ItemsSource="{Binding MyCollection}">
    <!-- ItemsPanelTemplate -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- ItemContainerStyle -->
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Grid.Column" 
                    Value="{Binding ColumnIndex}" />
            <Setter Property="Grid.Row" 
                    Value="{Binding RowIndex}" />

            <!-- Can either use a DataTrigger to determine these values, 
                 or store them on the object itself -->
            <Setter Property="Grid.RowSpan" 
                    Value="{Binding RowSpan}" />
            <Setter Property="Grid.ColumnSpan" 
                    Value="{Binding ColumnSpan}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

【讨论】：

【解决方案2】：

您不能在统一的网格中跨行或跨列 - 请参阅下面的 stackoverflow 问题

WPF: Is it possible to do a row/column span in UniformGrid?

但是，如果您的项目具有统一的尺寸，您可以使用 WrapPanel 实现类似的效果。这是一个例子

<ItemsControl Width="300">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel IsItemsHost="True" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.Items>
        <Rectangle Fill="Orange" Height="100" Width="100" />
        <Rectangle Fill="Red" Height="100" Width="100" />
        <Rectangle Fill="Blue" Height="100" Width="100" />
        <Rectangle Fill="Green" Height="100" Width="200" />
        <Rectangle Fill="Yellow" Height="100" Width="100" />
        <Rectangle Fill="Brown" Height="100" Width="100" />
        <Rectangle Fill="Black" Height="100" Width="200" />
    </ItemsControl.Items>
</ItemsControl>

【讨论】：