需求
在开发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的效果图:
转载于:https://blog.51cto.com/6962972/1180272