31天學會Windows Phone 7開發：樞軸控件

作者：金山崟霸譯 2012-08-09 13:39:22

本文是《Windows Phone 7開發31日談》系列的第十七篇文章。上一篇，我們討論了全景視圖控件以及它的作用和使用方法。本文，我們要講一個和它很相似但又不同的控件，樞軸控件。

什么是樞軸控件？

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

Windows Phone 7樞軸控件

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

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

我的原則很簡單：

◆使用全景視圖控件來介紹你程序中每一個有趣的內容。

◆當你想向用戶以不同的方式展示相同的數據時使用樞軸控件。

使用樞軸控件

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

它的結構非常類似于全景視圖控件，但在今天的例子中，不使用靜態內容，我要將將數據綁定到ListBox控件中，使用DataTemplate來實現。下面是我添加任何內容之前的基礎樞軸控件（這個例子按性別顯示了嬰兒的名字）：

<controls:Pivot Title="BABY NAMES"> 
    <controls:PivotItem Header="boys"> 
    </controls:PivotItem> 
    <controls:PivotItem Header="girls"> 
    </controls:PivotItem> 
    <controls:PivotItem Header="either">          
    </controls:PivotItem> 
</controls:Pivot>

很明顯，沒有數據我們看不到什么。下面繼續。

在ListBox中使用DataTemplate

對于每個PivotItem，我都添加了一個ListBox，并且在ListBox中，我會定義一個描述了每個數據項如何顯示的ItemTemplate。下面是我添加的XAML代碼：

<controls:Pivot Title="BABY NAMES"> 
    <controls:PivotItem Header="boys"> 
        <ListBox x:Name="boyList" Margin="0,0,-12,0"> 
            <ListBox.ItemTemplate> 
                <DataTemplate> 
                    <StackPanel Margin="0,0,0,17" > 
                        <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> 
                    </StackPanel> 
                </DataTemplate> 
            </ListBox.ItemTemplate> 
        </ListBox> 
    </controls:PivotItem> 
    <controls:PivotItem Header="girls"> 
        <ListBox x:Name="girlList" Margin="0,0,-12,0"> 
            <ListBox.ItemTemplate> 
                <DataTemplate> 
                    <StackPanel Margin="0,0,0,17" > 
                        <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> 
                    </StackPanel> 
                </DataTemplate> 
            </ListBox.ItemTemplate> 
        </ListBox> 
    </controls:PivotItem> 
    <controls:PivotItem Header="either"> 
        <ListBox x:Name="allList" Margin="0,0,-12,0"> 
            <ListBox.ItemTemplate> 
                <DataTemplate> 
                    <StackPanel Margin="0,0,0,17" > 
                        <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> 
                    </StackPanel> 
                </DataTemplate> 
            </ListBox.ItemTemplate> 
        </ListBox> 
    </controls:PivotItem> 
</controls:Pivot>

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

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Net;  
using System.Windows;  
using System.Windows.Controls;  
using System.Windows.Documents;  
using System.Windows.Input;  
using System.Windows.Media;  
using System.Windows.Media.Animation;  
using System.Windows.Shapes;  
using Microsoft.Phone.Controls;  
 
namespace Day17_PivotControl  
{  
    public partial class MainPage : PhoneApplicationPage  
    {  
        BabyName[] names = new BabyName[10] {new BabyName("Steve", 1, 0),  
                    new BabyName("Jennifer", 2, 0),  
                    new BabyName("Alex", 1, 2),  
                    new BabyName("Casey", 1, 2),  
                    new BabyName("Quinn", 1, 2),  
                    new BabyName("Anthony", 1, 0),  
                    new BabyName("Sarah", 2, 0),  
                    new BabyName("Parker", 2, 1),  
                    new BabyName("Jessica", 2, 0),  
                    new BabyName("Jeff", 1, 0)};  
          
        // Constructor  
        public MainPage()  
        {  
            InitializeComponent();  
            boyList.ItemsSource = from n in names  
                    where (n.Gender1 == 1 || n.Gender2 == 1)  
                    orderby n.Name  
                    select new BabyName(n.Name, n.Gender1, n.Gender2);  
 
            girlList.ItemsSource = from n in names  
                    where (n.Gender1 == 2 || n.Gender2 == 2)  
                    orderby n.Name  
                    select new BabyName(n.Name, n.Gender1, n.Gender2);  
 
            allList.ItemsSource = from n in names  
                    orderby n.Name  
                    select new BabyName(n.Name, n.Gender1, n.Gender2);  
        }  
    }  
}

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

定義了這些查詢后，我就可以輕松的對數據集合進行排序，解析，并將相同數據的不同集合賦予每個PivotItem項。

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

下載示例代碼

這個例子演示了如何在Windows Phone 7中實現一個樞軸控件，使用真實數據來填充ListBox。下載后可以邊玩邊學。

原作者：Jeff Blankenburg 譯者：金山崟霸

中文來源：http://www.cnblogs.com/porscheyin/archive/2010/12/23/1914676.html

英文來源：http://www.jeffblankenburg.com/2010/10/17/31-days-of-windows-phone-day-17-the-pivot-control/

【編輯推薦】

31天學會Windows Phone 7開發：全景視圖
31天學會Windows Phone 7開發：獨立存儲
31天學會Windows Phone 7開發：墓碑機制（多任務）
31天學會Windows Phone 7開發：位置服務
31天學會Windows Phone 7開發：使手機震動

責任編輯：王曉東來源：博客園

Windows Phone 樞軸控件