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的设计师们能有更别出心裁的设计。