Win8应用开发--如何让GridView Temmplate实现大小不一的布局 推荐

需求

在开发win8应用的时候，有时会碰到主页面的GridView Item需要动态绑定，这时候就会用到GridView.Temmplate，可是用GridView.Temmplate定义出来的Item大小都是一致的，如何能让GridView Temmplate实现大小不一的布局？我今天刚刚学到这个比较实用的小技巧，现在和大家分享一下：

创建项目

首先，为了方便我们直接创建一个VS2012自带的项目，如图：





这个项目当前的主页面使用的Temmplate是引用的静态资源，生成的Item大小是一致的，很呆板，如图：





下面我们将这个项目稍稍加工一下，按照步骤操作，很快就能看到结果。

改代码

1. 首先，我们先自定义一个类，名字就叫MyGrid，代码如下：
class MyGrid : GridView
{

protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)
{
SampleDataItem _item = (SampleDataItem)item;//强制转换
element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, _item.ColSpan);
element.SetValue(VariableSizedWrapGrid.RowSpanProperty, _item.RowSpan);
base.PrepareContainerForItemOverride(element, item);
}

}
2. 因为要实现大小不一的布局，而且一般情况页面会有很多分出很多Grid，所以较大的Item就需要跨越一些Span，要实现这一目的我们就要加一些东西，具体步骤是打开DataModel文件夹下的SampleDataSource.cs文件，添加下面的代码：
public int ColSpan { get; set; }
public int RowSpan { get; set; }
public int ItemHeight { get; set; }
public int ItemWeight { get; set; }
将SampleDataItem方法添加int colSpan,和int rowSpan两个参数，并在函数中定义大小（250），代码如下：
public SampleDataItem(String uniqueId, String title, String subtitle, String imagePath, String description, String content, SampleDataGroup group, int colSpan, int rowSpan)
: base(uniqueId, title, subtitle, imagePath, description)
{
this._content = content;
this._group = group;
this.ColSpan = colSpan;
this.RowSpan = rowSpan;
this.ItemHeight = rowSpan * 250;
this.ItemWeight = colSpan * 250;
}
3. 接下来就是指定哪些Item需要改变大小了，还是SampleDataSource.cs文件，比示例的数据也存储在这个文件中，如图：





在这里我把第一个Item定义为2行2列，也就是第一个元素占横竖两个网格，然后把标题，描述换成你要填写的数据就行了。如图：



4. 接下来这个步骤很简单，把GroupedItemsPage.xaml页面中所有的GridView换成local：MyGrid，如图：





找到静态资源"Standard250x250ItemTemplate"，在Grid的属性中添加以下代码：

Width="{Binding ItemWeight}" Height="{Binding ItemHeight}"
5. 下面是最后一个步骤，因为 GridView 所套用的 Style 会动态变化，为了防止所有Item全都被放大或缩小，我们需要实用Blend来重新设定VariableSizedWrapGrid的Item的长宽，这里我们用图片演示步骤：
首先右键点击GroupedItemsPage.xaml，用Blend打开。





然后编辑itemGridView的Panel，设定长宽（250）。









然后绑定ItemTemplate的长宽，









点击输入框后面的小黄点，创建数据绑定，绑定对应的长宽。

查看结果

这样，所有的步骤都完成了，把数据换成你自己想要的，看一看效果吧，在这里我做了一个小Demo 给大家做演示，需要在win8系统下的VS2012下才能运行，另外，如果要运行的话一定要有一个开发者账号，MSN账号即可，由于附件大小超过2M，无法上传，有需要的朋友可以加QQ：195934676，这是我的Demo的效果图：