如何编写在GridView(XAML-Win8)组中流动项目的代码,如下图所示？
我目前有一个自定义TemplateSelector,为第一个项目选择一个不同的(更大)模板,但是这里指定的流程：
<GroupStyle.Panel>
<ItemsPanelTemplate>
<q42:WrapPanel Orientation="Horizontal" Width="440" Margin="0,80,0"/>
<!-- also tried VariableSizedWrapGrid -->
</ItemsPanelTemplate>
</GroupStyle.Panel>
类似地包装项目1到3,但是然后将项目4放置在项目6的位置,而不填写项目4和5.
问题变成;我如何编写类似于css的代码：
.item { display: inline-block; }
.item1 { float: left; }
,这将使物品像我想要的那样流动？
解决方法
Andreas Hammar将我联系到一个有效的解决方案：
using System.Collections.Generic;
using Application1.Data;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace Application1
{
public class MyGridView : GridView
{
int _rowVal;
int _colVal;
readonly List<Size> _sequence;
public MyGridView()
{
_sequence = new List<Size>
{
LayoutSizes.PrimaryItem,LayoutSizes.SecondarySmallItem,LayoutSizes.OtherSmallItem,// 5
LayoutSizes.OtherSmallItem,LayoutSizes.SecondaryTallItem,// 7
LayoutSizes.OtherSmallItem,// 9
LayoutSizes.OtherSmallItem,// 11
LayoutSizes.SecondarySmallItem,LayoutSizes.OtherSmallItem
};
}
protected override void PrepareContainerForItemOverride(DependencyObject element,object item)
{
base.PrepareContainerForItemOverride(element,item);
var dataItem = item as SampleDataItem;
var index = -1;
if (dataItem != null)
{
index = dataItem.Group.Items.IndexOf(dataItem);
}
if (index >= 0 && index < _sequence.Count)
{
_colVal = (int) _sequence[index].Width;
_rowVal = (int) _sequence[index].Height;
}
else
{
_colVal = (int) LayoutSizes.OtherSmallItem.Width;
_rowVal = (int) LayoutSizes.OtherSmallItem.Height;
}
VariableSizedWrapGrid.SetRowSpan(element as UIElement,_rowVal);
VariableSizedWrapGrid.SetColumnSpan(element as UIElement,_colVal);
}
}
public static class LayoutSizes
{
public static Size PrimaryItem = new Size(6,2);
public static Size SecondarySmallItem = new Size(3,1);
public static Size SecondaryTallItem = new Size(2,2);
public static Size OtherSmallItem = new Size(2,1);
}
}
<local:MyGridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</local:MyGridView.ItemsPanel>
<local:MyGridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,6">
<Button
AutomationProperties.Name="Group Title"
Content="{Binding Title}"
Click="Header_Click"
Style="{StaticResource TextButtonStyle}"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="80" ItemHeight="160" Orientation="Vertical" Margin="0,0" MaximumRowsOrColumns="3"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</local:MyGridView.GroupStyle>
</local:MyGridView>
