需求

在开发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 p_w_picpathPath, String description, String content, SampleDataGroup group, int colSpan, int rowSpan)

            : base(uniqueId, title, subtitle, p_w_picpathPath, 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的效果图：