Windows Phone Developer Tools RTW 新特性-Pivot控制項

    IE9 Beta發布了，Windows Phone Developer Tools RTW也來了，開發人員和發燒友又有得忙活了。園子裡好多朋友已經開始了研究，包括馬寧、張欣、Jake、randylee、chenkai等等，我也來加入吧。

    剛剛安裝了Windows Phone Developer Tools RTW，其中UI方面一些新特性，包括Bing Maps Silverlight Control for Windows Phone、Panorama Control for Windows Phone和Pivot Control for Windows Phone。這次就來實踐一下Pivot控制項。

    首先，關於Pivot控制項的介紹，大家可以參考《UI Design and Interaction Guide for Windows Phone 7-v2.0》這個文檔。之前，園子裡的幾個朋友在WPMind站長小指的撮合下，對該文檔的第一版聯合進行了翻譯，大家可以去http://www.wpmind.com/上下載。

    樞軸（Pivot）控制項提供了一種快速的方式來管理應用中的視圖或頁面。樞軸可以用來過濾大的資料集，瀏覽多個資料集，或者切換應用視圖。樞軸控制項水平並且相鄰放置獨立的視圖，同時管理左側和右側的導航。可以通過Flick或者Pan手勢來推動樞軸控制項。

    程式設計時，對於的Pivot考慮：

• 應用程式應該使得pivot頁最少。
• pivot頁面的內容由應用程式定義。
• pivot頁面是迴圈的。
• pivot頁面不能覆蓋水平pan和水平flick功能，因為它與樞軸控制項的互動設計相衝突。
• pivot標題文字的長度沒有限制。顯示文字的數量受制於樞軸控制項的寬度。
• pivot標題高度固定，不能改變。
• 樞軸控制項應該只用來顯示相同類型的條目或者資料。
• 該控制項不應該用來做任務流程。不同的頁面應該在外觀方面具備無縫切換。頁面不應該極大地改變使用者的活動。
• 樞軸控制項應該少使用，在適當情況下才使用。
• 在使用者沒有可能添加資訊的情況下，一個空的pivot頁應該被刪除。

    下面我們來示範如何在應用程式中加入pivot控制項。

1. 開啟Visual Studio 2010 Express for Windows Phone，建立C#項目，選擇Windows Phone Application模板，項目名為PivotDemo。

2. 為項目添加新的項目，選擇Windows Phone Pivot Page，命名為PivotPage.xaml，如所示：

3.在MainPage.xaml檔案中，為ContentPanel加入新的元素，代碼如下：

<HyperlinkButton Content="Pivot Application Example" Height="57" HorizontalAlignment="Left" Margin="49,116,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="383" NavigateUri="/PivotPage1.xaml"/>

4.在PivotPage.xaml檔案中，為其加入一個新的PivotItem，代碼如下：

<!--Pivot item three.-->
     <controls:PivotItem Header="item3">
        <Grid/>
     </controls:PivotItem>

5.為Pivot Item添加控制項和內容。為第一個PivotItem添加TextBlock control，代碼如下：

<Grid>
    <!--Added textbox control with formatted text.-->
    <TextBlock
       TextWrapping="Wrap"
       Style="{StaticResource PhoneTextLargeStyle}">
       <Run>This is a simple sample for the pivot control adding text.</Run>
       <LineBreak/>
       <LineBreak/>
       <Run>You can put any content you want here...</Run>
  </TextBlock>
</Grid>

為第二個PivotItem添加背景圖片和文字，代碼如下：

<!--Added background image and text content.-->
    <Border
        BorderBrush="{StaticResource PhoneForegroundBrush}"
        BorderThickness="{StaticResource PhoneBorderThickness}">
             <Grid>
                 <Image
                    Source="PanoramaBG.png"
                    Stretch="UniformToFill"/>
                 <TextBlock
                    Text="Here is some generic content to take up space."
                    TextWrapping="Wrap"
                    Style="{StaticResource PhoneTextExtraLargeStyle}" />
            </Grid>
     </Border>

為第三個PivotItem添加ListBox，向其中寫入一些string，支援垂直滾屏，代碼如下：

<!--This code adds a series of string text values.-->
<Grid>
            <ListBox FontSize="{StaticResource PhoneFontSizeLarge}">
                <sys:String>This</sys:String>
                <sys:String>item</sys:String>
                <sys:String>has</sys:String>
                <sys:String>a</sys:String>
                <sys:String>short</sys:String>
                <sys:String>list</sys:String>
                <sys:String>of</sys:String>
                <sys:String>strings</sys:String>
                <sys:String>that</sys:String>
                <sys:String>you</sys:String>
                <sys:String>can</sys:String>
                <sys:String>scroll</sys:String>
                <sys:String>up</sys:String>
                <sys:String>and</sys:String>
                <sys:String>down</sys:String>
                <sys:String>and</sys:String>
                <sys:String>back</sys:String>
                <sys:String>again.</sys:String>        
            </ListBox>
</Grid>

另外，為了使ListBox控制項支援多行的string，必須添加引用：

xmlns:sys="clr-namespace:System;assembly=mscorlib"

6. 編譯代碼，進行模擬器調試，如所示。

附上原始碼：PivotDemo.zip

視頻示範地址：http://v.youku.com/v_show/id_XMjA4MTk3MDg0.html

 

參考連結：

Pivot Control for Windows Phone

《Windows Phone 7 UI設計及人機互動指南》第一版

《UI Design and Interaction Guide for Windows Phone 7》 v2.0