前几天有个网友问我如何动态绑定pivot项,即piovtitem的项是动态的,pivotitem中的数据也是动态的。这个使用mvvm模式可以很方便的实现,在viewmodel中设置一个集合表示当前有多少个item,集合中的类中含有当前pivotitem中的数据源。下面以一个简单的demo来演示下:
先来看看xaml中是怎么去绑定的
<!--layoutroot is the root grid where all page content is placed-->
<grid x:name="layoutroot" background="transparent">
<!--pivot control-->
<controls:pivot title="my application"
itemtemplate="{staticresource dt_pivot}"
headertemplate="{staticresource dt_header}"
itemssource="{binding binddata}">
</controls:pivot>
</grid>
pivot的数据源绑定是viewmodel中的binddata,itemtemplate表示pivotitem的模板,headertemplate表示pivotitem中header模板,这两个模板分别如下:
<phone:phoneapplicationpage.resources>
<datatemplate x:key="dt_pivot">
<listbox itemssource="{binding listdata}">
<listbox.itemtemplate>
<datatemplate>
<textblock text="{binding}" />
</datatemplate>
</listbox.itemtemplate>
</listbox>
</datatemplate>
<datatemplate x:key="dt_header">
<textblock text="{binding name}" />
</datatemplate>
</phone:phoneapplicationpage.resources>
headertemplate十分简单,就使用一个textblock表示当前的标题。pivot的itemtemplate里面放置一个listbox,数据源为binddata下的listdata
viewmodel中的数据源:
private observablecollection<testpivot> _binddata;
public observablecollection<testpivot> binddata
{
get
{
return _binddata;
}
set
{
_binddata = value;
raisepropertychanged("binddata");
}
}
testpivot即自己定义的类,含有piovtheader和pivotitem数据源的类:
public class testpivot
{
/// <summary>
/// property for pivot header
/// </summary>
public string name { get; set; }
/// <summary>
/// data for pivot item datasource(eg.listbox)
/// </summary>
public list<string> listdata { get; set; }
}
ok,绑定已经建立好了,现在就是如何初始化数据源了,为了简单起见,以最简单的循环生成绑定源数据:
public void adddata(int size)
{
binddata = new observablecollection<testpivot>();
for (int i = 0; i < size; i++)
{
testpivot t = new testpivot();
t.name = "piovt item" + i;
t.listdata = new list<string>();
for (int j = 0; j < 10; j++)
{
t.listdata.add("list item"+j);
}
binddata.add(t);
}
}
其中size表示当前有几个pivotitem,这里pivot数据源可以是同步方式也可以以异步方式,只要testpivot实现notifypropertychanged,并且属性listdata通知改变即可。
你可以从这里找到源代码:, hope that helps.
作者:alexis
如对本文有疑问,
点击进行留言回复!!
网友评论