我有一个ItemsControl
,我计划在其中托管水果对象列表。我有一个Fruit
个对象列表,它们都有自己的DataTemplate
个。我有一个Grape
对象,一个Orange
对象和一个Kiwi
对象。
我想使用UniformGrid
以便所有单元格具有相同的大小,但我希望Kiwi
对象只跨越1个单元格,我希望Grape
跨越2个单元格( ColumnSpan = 2
)我希望Orange
控件跨越4个单元格(ColumnSpan = 2
和RowSpan = 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>