我們曾經(jīng)介紹過Windows Phone 7的全景視圖控件以及它的作用和使用方法。今天，我們再介紹一個和它很相似但又不同的Windows Phone 7控件，樞軸控件。

什么是樞軸控件?

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

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

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

我的原則很簡單：

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

當(dāng)你想向用戶以不同的方式展示相同的數(shù)據(jù)時使用樞軸控件。

使用樞軸控件

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

它的結(jié)構(gòu)非常類似于全景視圖控件，但在今天的例子中，不使用靜態(tài)內(nèi)容，我要將將數(shù)據(jù)綁定到ListBox控件中，使用DataTemplate來實現(xiàn)。下面是我添加任何內(nèi)容之前的基礎(chǔ)樞軸控件(這個例子按性別顯示了嬰兒的名字)：

<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> 
 

很明顯，沒有數(shù)據(jù)我們看不到什么。下面繼續(xù)，

在ListBox中使用DataTemplate

對于每個PivotItem，我都添加了一個ListBox，并且在ListBox中，我會定義一個描述了每個數(shù)據(jù)項如何顯示的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屬性當(dāng)做它的Text屬性值。為了向ListBox中存入數(shù)據(jù)，我們要在代碼后置的文件中寫少許代碼(這是MainPage.xaml.cs文件的所有內(nèi)容)：

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對象的數(shù)組用簡單的LINQ語法賦給了ItemsSource屬性。如果你不熟悉LINQ，你就錯過了語言集成查詢功能。這有一個非常棒的LINQ學(xué)習(xí)資源列表。

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

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

這個例子演示了如何在Windows Phone 7中實現(xiàn)一個樞軸控件，使用真實數(shù)據(jù)來填充ListBox。

【編輯推薦】

1. Windows Phone 7的全景視圖控件
2. Windows Phone 7開發(fā)工具UI設(shè)計新特性
3. .NET平臺開發(fā)Windows Phone 7、iPhone及Android應(yīng)用
4. 簡述Windows Phone 7應(yīng)用程序開發(fā)平臺
5. 多圖詳解 Windows Phone 7功能升級過程