Windows Phone 实用开发技巧（29）：动态绑定Pivot

前几天有个网友问我如何动态绑定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