Windows Phone 7 開發 31 日談——第17日：樞軸控制元件

l_serein發表於2012-11-04
Windows控制元件

By Jeff Blankenburg

本文是“Windows Phone 7 開發 31 日談” 系列的第17日。

昨天，我們討論了全景檢視控制元件以及它的作用和使用方法。今天，我要講一個和它很相似但又不同的控制元件，樞軸控制元件。

 

什麼是樞軸控制元件？

    我把樞軸控制元件看作是一個可以給使用者提供相同資料的不同“層”的有效控制元件。例如，Windows Phone中的日曆，你可以在“日程表”和“天”兩個檢視間來回切換。它們呈現相同的資料，但卻在兩個完全不同的檢視中。樞軸控制元件另一個出色的應用是將專案進行分類。電話中的設定功能就是一個很好的例子。你可以對系統進行設定，或對應用程式進行設定。下面來快速瀏覽一下這些例子：

clip_image002 clip_image004

 

使用全景檢視或樞軸控制元件有沒有特定的場合？

是的，確實有。去這兩個好地方你可以看到更多的資訊。Tim Heuer寫的何時你該使用這兩個控制元件的優秀文章 ，還有Channel 9上的Windows Phone Design Days系列視訊 。

我的原則很簡單：

  • 使用全景檢視控制元件來介紹你程式中每一個有趣的內容。
  • 當你想向使用者以不同的方式展示相同的資料時使用樞軸控制元件。

使用樞軸控制元件

如果你沒有看昨天的關於全景檢視控制元件的文章 ，快去看看。我介紹瞭如何在Visual Studio 2010工具箱中獲得全景檢視和樞軸控制元件。現在，我們來深入探究樞軸控制元件的結構，以及如何使用它。

它的結構非常類似於全景檢視控制元件，但在今天的例子中，不使用靜態內容，我要將將資料繫結到ListBox控制元件中，使用DataTemplate來實現。下面是我新增任何內容之前的基礎樞軸控制元件（這個例子按性別顯示了嬰兒的名字）：

[xhtml] view plaincopy
  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>  

 

 

 

 

 

 

 

 

很明顯，沒有資料我們看不到什麼。下面繼續，

 

在ListBox中使用DataTemplate

對於每個PivotItem，我都新增了一個ListBox，並且在ListBox中，我會定義一個描述了每個資料項如何顯示的ItemTemplate。下面是我新增的XAML程式碼：

[xhtml] view plaincopy
  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}" mce_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}" mce_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}" mce_Style="{StaticResource PhoneTextExtraLargeStyle}"/>  
  30.                     </StackPanel>  
  31.                 </DataTemplate>  
  32.             </ListBox.ItemTemplate>  
  33.         </ListBox>  
  34.     </controls:PivotItem>  
  35. </controls:Pivot>  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

在這個系列中我們沒有提到DataBinding。你會注意到對於每個TextBlock，Text屬性的值都被定義為“{Binding Name}”。這意味著不論我向ListBox中傳入任何物件，TextBlock都會使用物件的Name屬性當做它的Text屬性值。為了向ListBox中存入資料，我們要在程式碼後置的檔案中寫少許程式碼（這是MainPage.xaml.cs檔案的所有內容）：

[c-sharp] view plaincopy
  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. namespace Day17_PivotControl  
  14. {  
  15.     public partial class MainPage : PhoneApplicationPage  
  16.     {  
  17.         BabyName[] names = new BabyName[10] {new BabyName("Steve", 1, 0),  
  18.         new BabyName("Jennifer", 2, 0),  
  19.         new BabyName("Alex", 1, 2),  
  20.         new BabyName("Casey", 1, 2),  
  21.         new BabyName("Quinn", 1, 2),  
  22.         new BabyName("Anthony", 1, 0),  
  23.         new BabyName("Sarah", 2, 0),  
  24.         new BabyName("Parker", 2, 1),  
  25.         new BabyName("Jessica", 2, 0),  
  26.         new BabyName("Jeff", 1, 0)};  
  27.         // Constructor  
  28.         public MainPage()  
  29.         {  
  30.             InitializeComponent();  
  31.             boyList.ItemsSource = from n in names  
  32.                                   where (n.Gender1 == 1 || n.Gender2 == 1)  
  33.                                   orderby n.Name  
  34.                                   select new BabyName(n.Name, n.Gender1, n.Gender2);  
  35.             girlList.ItemsSource = from n in names  
  36.                                    where (n.Gender1 == 2 || n.Gender2 == 2)  
  37.                                    orderby n.Name  
  38.                                    select new BabyName(n.Name, n.Gender1, n.Gender2);  
  39.             allList.ItemsSource = from n in names  
  40.                                   orderby n.Name  
  41.                                   select new BabyName(n.Name, n.Gender1, n.Gender2);  
  42.         }  
  43.     }  
  44. }  

你會看到對於每個ListBox，我都將BabyName物件的陣列用簡單的LINQ語法賦給了ItemsSource屬性。如果你不熟悉LINQ，你就錯過了語言整合查詢 功能。這有一個非常棒的LINQ學習資源列表 。

定義了這些查詢後，我就可以輕鬆的對資料集合進行排序，解析，並將相同資料的不同集合賦予每個PivotItem項。

就是這些內容！通常情況下你不應該在全景檢視或樞軸控制元件中使用超過7個項（如果你這麼做了，你應該想想用其他的方式……），這主要是因為那是你的使用者能記住的上限。如果他們忘了，就不會去用了，對嗎？（7是已知的人類記憶的上限，這也是為什麼我們的電話號碼也是這個長度 。）

下載示例程式碼

這個例子演示瞭如何在Windows Phone 7中實現一個樞軸控制元件，使用真實資料來填充ListBox。下載後可以邊玩邊學。

clip_image006

原文地址：http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7c-Day-17-The-Pivot-Control.aspx

相關文章