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.