我們?cè)?jīng)介紹過(guò)Windows Phone 7的全景視圖控件以及它的作用和使用方法。今天，我們?cè)俳榻B一個(gè)和它很相似但又不同的Windows Phone 7控件，樞軸控件。

什么是樞軸控件?

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

使用全景視圖或樞軸控件有沒(méi)有特定的場(chǎng)合?

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

我的原則很簡(jiǎn)單：

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

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

使用樞軸控件

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

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

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

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

在ListBox中使用DataTemplate

對(duì)于每個(gè)PivotItem，我都添加了一個(gè)ListBox，并且在ListBox中，我會(huì)定義一個(gè)描述了每個(gè)數(shù)據(jù)項(xiàng)如何顯示的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> 
 

在這個(gè)系列中我們沒(méi)有提到DataBinding。你會(huì)注意到對(duì)于每個(gè)TextBlock，Text屬性的值都被定義為“{Binding Name}”。這意味著不論我向ListBox中傳入任何對(duì)象，TextBlock都會(huì)使用對(duì)象的Name屬性當(dāng)做它的Text屬性值。為了向ListBox中存入數(shù)據(jù)，我們要在代碼后置的文件中寫(xiě)少許代碼(這是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);  
        }  
    }  
}  
 

你會(huì)看到對(duì)于每個(gè)ListBox，我都將BabyName對(duì)象的數(shù)組用簡(jiǎn)單的LINQ語(yǔ)法賦給了ItemsSource屬性。如果你不熟悉LINQ，你就錯(cuò)過(guò)了語(yǔ)言集成查詢(xún)功能。這有一個(gè)非常棒的LINQ學(xué)習(xí)資源列表。

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

就是這些內(nèi)容!通常情況下你不應(yīng)該在全景視圖或樞軸控件中使用超過(guò)7個(gè)項(xiàng)(如果你這么做了，你應(yīng)該想想用其他的方式……)，這主要是因?yàn)槟鞘悄愕挠脩?hù)能記住的上限。如果他們忘了，就不會(huì)去用了，對(duì)嗎?(7是已知的人類(lèi)記憶的上限，這也是為什么我們的電話(huà)號(hào)碼也是這個(gè)長(zhǎng)度。)

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

【編輯推薦】

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