windows phone開發學習–Pivot動態載入資料

在windows phone開發中，我們常常會用到pivot這個控制項，與panorama控制項不同，pivot控制項類似於一個滾筒，首尾相連。當頁面很多而大體架構一致時，可以採用這個控制項。

然而，有時候我們是不會準確知道pivot中item的個數的，這就需要實現pivot動態載入資料。這裡動態載入的意思是動態建立pivotitem的個數，並且給pivotitem中動態寫入資料。為了簡單起見，我們在每個pivotitem中都建立了同樣的list。

首先給出工程的目錄圖，如下：

其中mainpage頁面配置如下：

其中那個textbox是用來填入希望產生多少pivotitem的個數，點擊button後就會跳轉到Pivot頁面，其中的item個數就是剛剛填入的那個，例如填入3後結果就這樣：

下面說說具體實現，工程中主要包含兩個cs類和兩個xaml檔案

VMLocator.cs主要用來接收儲存使用者輸入的數字，並且建立產生pivot頁面的類

代碼如下：

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Windows;namespace tt{    public class VMLocator    {        private static VMLocator _instance;        public static VMLocator Instance        {            get            {                if (_instance == null)                {                    _instance = Application.Current.Resources["Locator"] as VMLocator;                }                return _instance;            }        }        private DetailViewModel _detailVM;        public DetailViewModel DetailVM        {            get            {                return _detailVM ?? (_detailVM = new DetailViewModel());            }        }    }}

注意到這裡使用了app的資源，以索引值對的形式儲存，為此需要在App.xaml中添加資源

<Application     x:Class="tt.App"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="clr-namespace:tt"     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">    <!--Application Resources-->    <Application.Resources>        <local:VMLocator x:Key="Locator" />    </Application.Resources>    <Application.ApplicationLifetimeObjects>        <!--Required object that handles lifetime events for the application-->        <shell:PhoneApplicationService             Launching="Application_Launching" Closing="Application_Closing"             Activated="Application_Activated" Deactivated="Application_Deactivated"/>    </Application.ApplicationLifetimeObjects></Application>

DetailViewModel.cs根據使用者輸入的數字來建立pivotitem並對每個item進行賦值（這裡為建立List）

代碼如下：

using System;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;using System.ComponentModel;using System.Collections.ObjectModel;using System.Collections.Generic;namespace tt{    public class DetailViewModel : INotifyPropertyChanged    {        private ObservableCollection<TestPivot> _bindData;        public ObservableCollection<TestPivot> BindData        {            get            {                return _bindData;            }            set            {                _bindData = value;                RaisePropertyChanged("BindData");            }        }        public DetailViewModel()        {        }        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);            }        }        #region INotifyPropertyChanged        public event PropertyChangedEventHandler PropertyChanged;        private void RaisePropertyChanged(string propertyName)        {            if (PropertyChanged != null)            {                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));            }        }        #endregion    }    public class TestPivot    {        public string Name { get; set; }        public List<string> ListData { get; set; }    }}

MainPage.xaml中button響應事件如下：

        private void button1_Click(object sender, RoutedEventArgs e)        {            VMLocator.Instance.DetailVM.AddData(int.Parse(textBox1.Text.ToString()));            NavigationService.Navigate(new Uri("/DetailViewPage.xaml", UriKind.Relative));         }

DetailViewPage.xaml代碼如下：

<phone:PhoneApplicationPage     x:Class="tt.DetailViewPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"     mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"    FontFamily="{StaticResource PhoneFontFamilyNormal}"    FontSize="{StaticResource PhoneFontSizeNormal}"    Foreground="{StaticResource PhoneForegroundBrush}"    SupportedOrientations="Portrait"  Orientation="Portrait"    DataContext="{Binding DetailVM,Source={StaticResource Locator}}"    shell:SystemTray.IsVisible="True">    <!--LayoutRoot is the root grid where all page content is placed-->    <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>    <!--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></phone:PhoneApplicationPage>

可以看到以上用到了資料繫結和資料範本，就這樣實現Pivot動態綁定資料。當然，如果使用者需要自己定製繫結資料，只需要修改DetailViewModel.cs中的AddDate()函數即可，相信還是挺方便的。

最後不得不說，儘管pivot可以實現動態載入資料，但是並不意味著這是一種良好的方法。pivot中item的數量顯然不宜過多，否則使用者的體驗性將會大打折扣。個人感覺3-4個已經足夠，所以最好把動態載入的數量限制在4個以下。之前在stackoverflow 上面發過問題，得到的建議也是如此。

From a design perspective and given the unknown number of calendars, I don't think a Pivot is what you should use. If you take a look at the design
guidelines, you'll note:

Apps should minimize the number of pivot pages (four pages or fewer). Users can become lost if they jump from pivot page to pivot page. Use Pivot controls sparingly and limit the use of pivot pages to scenarios where it’s appropriate for the experience.

and

The Pivot control should be used only to display items or data of similar type (for example, filtered views of the same data).

The latter doesn't preclude what you are doing, but most of the apps that I've seen use pivots to provide alternate views of the same data versus the same view of different data (as you'd be doing).

I think a simple list of the available calendars that navigates to a second page for the calendar (with binding to your specific calendar's view model) would be easier and more intuitive.

其實我一直認為，windows phone的介面就該和ios android的介面相區別，否則我們還要windows phone幹嘛？獨一無二才是nokia和windows phone活下去並發展壯大的法寶，其他一切都是浮雲。祝開發windows phone8應用的碼農們好運，期待windows phone8的設計師們能有更別出心裁的設計。