Windows Phone 7的枢轴控件

移动开发
我们来介绍一个Windows Phone 7枢轴控件,以及它的作用和使用方法。枢轴控件是一个可以给用户提供相同数据的不同“层”的有效控件。

我们曾经介绍过Windows Phone 7的全景视图控件以及它的作用和使用方法。今天,我们再介绍一个和它很相似但又不同的Windows Phone 7控件,枢轴控件。

什么是枢轴控件?

我把枢轴控件看作是一个可以给用户提供相同数据的不同“层”的有效控件。例如,Windows Phone中的日历,你可以在“日程表”和“天”两个视图间来回切换。它们呈现相同的数据,但却在两个完全不同的视图中。枢轴控件另一个出色的应用是将项目进行分类。电话中的设置功能就是一个很好的例子。你可以对系统进行设定,或对应用程序进行设定。下面来快速浏览一下这些例子:

使用全景视图或枢轴控件有没有特定的场合?

是的,确实有。去这两个好地方你可以看到更多的信息。Tim Heuer写的何时你该使用这两个控件的优秀文章,还有Channel 9上的Windows Phone Design Days系列视频。

我的原则很简单:

使用全景视图控件来介绍你程序中每一个有趣的内容。

当你想向用户以不同的方式展示相同的数据时使用枢轴控件。

使用枢轴控件

如果你没有看昨天的关于全景视图控件的文章,快去看看。我介绍了如何在Visual Studio 2010工具箱中获得全景视图和枢轴控件。现在,我们来深入探究枢轴控件的结构,以及如何使用它。

它的结构非常类似于全景视图控件,但在今天的例子中,不使用静态内容,我要将将数据绑定到ListBox控件中,使用DataTemplate来实现。下面是我添加任何内容之前的基础枢轴控件(这个例子按性别显示了婴儿的名字):

  1. <controls:Pivot Title="BABY NAMES"> 
  2.     <controls:PivotItem Header="boys"> 
  3.               
  4.     </controls:PivotItem> 
  5.     <controls:PivotItem Header="girls"> 
  6.               
  7.     </controls:PivotItem> 
  8.     <controls:PivotItem Header="either"> 
  9.               
  10.     </controls:PivotItem> 
  11. </controls:Pivot> 
  12.  

很明显,没有数据我们看不到什么。下面继续,

在ListBox中使用DataTemplate

对于每个PivotItem,我都添加了一个ListBox,并且在ListBox中,我会定义一个描述了每个数据项如何显示的ItemTemplate。下面是我添加的XAML代码:

  1. <controls:Pivot Title="BABY NAMES"> 
  2.     <controls:PivotItem Header="boys"> 
  3.         <ListBox x:Name="boyList" Margin="0,0,-12,0"> 
  4.             <ListBox.ItemTemplate> 
  5.                 <DataTemplate> 
  6.                     <StackPanel Margin="0,0,0,17" > 
  7.                         <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> 
  8.                     </StackPanel> 
  9.                 </DataTemplate> 
  10.             </ListBox.ItemTemplate> 
  11.         </ListBox> 
  12.     </controls:PivotItem> 
  13.     <controls:PivotItem Header="girls"> 
  14.         <ListBox x:Name="girlList" Margin="0,0,-12,0"> 
  15.             <ListBox.ItemTemplate> 
  16.                 <DataTemplate> 
  17.                     <StackPanel Margin="0,0,0,17" > 
  18.                         <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> 
  19.                     </StackPanel> 
  20.                 </DataTemplate> 
  21.             </ListBox.ItemTemplate> 
  22.         </ListBox> 
  23.     </controls:PivotItem> 
  24.     <controls:PivotItem Header="either"> 
  25.         <ListBox x:Name="allList" Margin="0,0,-12,0"> 
  26.             <ListBox.ItemTemplate> 
  27.                 <DataTemplate> 
  28.                     <StackPanel Margin="0,0,0,17" > 
  29.                         <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> 
  30.                     </StackPanel> 
  31.                 </DataTemplate> 
  32.             </ListBox.ItemTemplate> 
  33.         </ListBox> 
  34.     </controls:PivotItem> 
  35. </controls:Pivot> 
  36.  

在这个系列中我们没有提到DataBinding。你会注意到对于每个TextBlock,Text属性的值都被定义为“{Binding Name}”。这意味着不论我向ListBox中传入任何对象,TextBlock都会使用对象的Name属性当做它的Text属性值。为了向ListBox中存入数据,我们要在代码后置的文件中写少许代码(这是MainPage.xaml.cs文件的所有内容):

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Net;  
  5. using System.Windows;  
  6. using System.Windows.Controls;  
  7. using System.Windows.Documents;  
  8. using System.Windows.Input;  
  9. using System.Windows.Media;  
  10. using System.Windows.Media.Animation;  
  11. using System.Windows.Shapes;  
  12. using Microsoft.Phone.Controls;  
  13.  
  14. namespace Day17_PivotControl  
  15. {  
  16.     public partial class MainPage : PhoneApplicationPage  
  17.     {  
  18.         BabyName[] names = new BabyName[10] {new BabyName("Steve", 1, 0),  
  19.                     new BabyName("Jennifer", 2, 0),  
  20.                     new BabyName("Alex", 1, 2),  
  21.                     new BabyName("Casey", 1, 2),  
  22.                     new BabyName("Quinn", 1, 2),  
  23.                     new BabyName("Anthony", 1, 0),  
  24.                     new BabyName("Sarah", 2, 0),  
  25.                     new BabyName("Parker", 2, 1),  
  26.                     new BabyName("Jessica", 2, 0),  
  27.                     new BabyName("Jeff", 1, 0)};  
  28.           
  29.         // Constructor  
  30.         public MainPage()  
  31.         {  
  32.             InitializeComponent();  
  33.             boyList.ItemsSource = from n in names  
  34.                     where (n.Gender1 == 1 || n.Gender2 == 1)  
  35.                     orderby n.Name  
  36.                     select new BabyName(n.Name, n.Gender1, n.Gender2);  
  37.  
  38.             girlList.ItemsSource = from n in names  
  39.                     where (n.Gender1 == 2 || n.Gender2 == 2)  
  40.                     orderby n.Name  
  41.                     select new BabyName(n.Name, n.Gender1, n.Gender2);  
  42.  
  43.             allList.ItemsSource = from n in names  
  44.                     orderby n.Name  
  45.                     select new BabyName(n.Name, n.Gender1, n.Gender2);  
  46.         }  
  47.     }  
  48. }  
  49.  

你会看到对于每个ListBox,我都将BabyName对象的数组用简单的LINQ语法赋给了ItemsSource属性。如果你不熟悉LINQ,你就错过了语言集成查询功能。这有一个非常棒的LINQ学习资源列表。

定义了这些查询后,我就可以轻松的对数据集合进行排序,解析,并将相同数据的不同集合赋予每个PivotItem项。

就是这些内容!通常情况下你不应该在全景视图或枢轴控件中使用超过7个项(如果你这么做了,你应该想想用其他的方式……),这主要是因为那是你的用户能记住的上限。如果他们忘了,就不会去用了,对吗?(7是已知的人类记忆的上限,这也是为什么我们的电话号码也是这个长度。)

这个例子演示了如何在Windows Phone 7中实现一个枢轴控件,使用真实数据来填充ListBox。

【编辑推荐】

  1. Windows Phone 7的全景视图控件
  2. Windows Phone 7开发工具UI设计新特性
  3. .NET平台开发Windows Phone 7、iPhone及Android应用
  4. 简述Windows Phone 7应用程序开发平台
  5. 多图详解 Windows Phone 7功能升级过程
责任编辑:佚名 来源: ITpub
相关推荐

2012-08-09 13:39:22

Windows Pho

2010-12-01 13:55:29

地图插件Windows Pho

2010-12-01 09:50:21

全景视图Windows Pho

2010-08-10 13:21:41

Windows PhoWindows Pho

2012-08-13 09:56:45

Windows Pho

2010-08-12 10:09:57

Windows PhoPanoramaPivot

2013-04-12 11:02:50

WWindowsPho

2013-04-19 10:14:24

2010-10-11 14:42:49

Windows Pho

2010-11-26 16:00:08

Windows Pho

2013-07-30 11:18:37

Windows PhoWindows Pho

2013-04-17 11:00:17

Windows PhoWindows Pho

2013-04-17 11:10:02

Windows PhoWindows Pho

2010-05-05 13:16:02

Windows PhoWindows CE

2010-10-20 16:47:06

MarketplaceWindows Pho

2010-03-26 18:08:18

Windows Pho

2012-02-02 16:39:40

CheckBox控件源代码

2012-02-02 16:37:51

Silverlight常用控件

2011-06-07 11:35:38

Windows Pho

2010-08-05 15:26:19

Windows Pho
点赞
收藏

51CTO技术栈公众号