Windows Phone 7的枢轴控件
创始人
2024-07-18 13:31:01
0

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

什么是枢轴控件?

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

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

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

我的原则很简单:

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

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

使用枢轴控件

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

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

  1.  Title="BABY NAMES"> 
  2.      Header="boys"> 
  3.               
  4.      
  5.      Header="girls"> 
  6.               
  7.      
  8.      Header="either"> 
  9.               
  10.      
  11.  
  12.  

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

在ListBox中使用DataTemplate

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

  1.  Title="BABY NAMES"> 
  2.      Header="boys"> 
  3.          x:Name="boyList" Margin="0,0,-12,0"> 
  4.              
  5.                  
  6.                      Margin="0,0,0,17" > 
  7.                          Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> 
  8.                      
  9.                  
  10.              
  11.          
  12.      
  13.      Header="girls"> 
  14.          x:Name="girlList" Margin="0,0,-12,0"> 
  15.              
  16.                  
  17.                      Margin="0,0,0,17" > 
  18.                          Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> 
  19.                      
  20.                  
  21.              
  22.          
  23.      
  24.      Header="either"> 
  25.          x:Name="allList" Margin="0,0,-12,0"> 
  26.              
  27.                  
  28.                      Margin="0,0,0,17" > 
  29.                          Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> 
  30.                      
  31.                  
  32.              
  33.          
  34.      
  35.  
  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功能升级过程

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...