WPF UniformGrid布局

时间:2012-06-12 15:20:04

标签: wpf layout grid uniformgrid

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

我想使用UniformGrid以便所有单元格具有相同的大小,但我希望Kiwi对象只跨越1个单元格,我希望Grape跨越2个单元格( ColumnSpan = 2)我希望Orange控件跨越4个单元格(ColumnSpan = 2RowSpan = 2

我该如何做到这一点?

2 个答案:

答案 0 :(得分:5)

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

为什么不使用常规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>

答案 1 :(得分:0)

您无法在统一网格中进行行或列跨越 - 请参阅下面的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>