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

    昨天實踐了一下Pivot控制項，今天就趁熱打鐵，繼續來看看Windows Phone Developer Tools RTW 中加入的新特性-Panorama控制項。關於Panorama控制項的介紹，大家可以參考MSDN上的文檔：“Panorama Control for Windows Phone”，也可以瀏覽瀏覽WPMind上的中文版：《Windows Phone 7 UI設計及人機互動指南》第一版，第二版的pdf檔案可以在這裡下載：《UI Design and Interaction Guide for Windows Phone 7》 v2.0 。

Panorama控制項簡介

    全景視圖是Windows Phone 7核心體驗的一部分。標準應用程式（standard applications）受手機螢幕界限的局限，與標準應用程式不同，全景視圖應用利用一個超出手機螢幕局限的長水平畫布提供一種獨特的方式來瀏覽控制項、資料和服務。這些內在的Live App利用分層的動畫和內容，實現了層與層之間以不同速度平滑過渡，就和視差效果類似。當前，沒有一個全景應用模板或者控制項是作為標準應用程式平台的一部分來提供的。但是，開發人員們可以利用Silverlight來建立類似的應用體驗。

 

    全景應用的使用者介面由4層類型組成：背景圖片、全景標題、全景地區和全景地區標題，它們有各自獨立的動作邏輯。

背景圖片

    背景圖片位於全景應用的最底層，由它來給出類似於雜誌的體驗。背景圖片通常是一張全景，它可能是應用程式最直觀的部分。如何建立一個好的應用體驗，我們在設計過程中，必須牢記以下因素：

• 利用單色的背景，或者是跨度為整個全景的圖片。如果你決定使用圖片，從大小來考慮，你可能會使用JPG圖片，但是Silverlight支援的任何UI圖片類型都是可以接受的。
• 可以使用多個圖片作為背景，但是在任一時刻，只能顯示其中一張。
• 為了確保良好的程式效能，最少的載入時間，並且無需剪裁，圖片大小應該在800 x 480和800 x 1024像素（高x寬）中選擇。
• 對於一個具備4個全景地區的應用，使用16 x 9的螢幕高寬比。
• 為了提高文本的易讀性，使用一個透明的黑色或者白色過濾器。
• 在動態UI元素上，避免使用下拉陰影製作效果（drop-shadow effects）。
• 使用一定比例的與panning手勢相關的動作，該panning手勢和頂層內容寬度與背景圖片的寬度比例有關。
• 只有背景藝術出現在應用中時，才使用動畫。
• 當使用者的pan手勢超出圖片的寬度時，關閉並且返回可見地區。

全景標題（Panorama Title）

    全景標題是整個全景應用的標題。其目的是讓使用者識別該應用，無論是以何種方式進入應用，它都必須是可見的。下面是全景標題的設計建議：

• 使用簡潔的文字或者圖片，例如一個logo作為全景標題。使用多個UI元素，例如一個logo加文字（或者其他UI元素）也是可以接受的。
• 確保字型或者圖片的顏色與整個背景相匹配，而且，標題的可視性不依賴於背景圖片。
• 為了保持一致性體驗，在Start菜單中的應用程式名稱和該標題一致。
• 避免標題動畫，或者動態改變標題的字型。
• 使用一定比例的動作，相對於最頂層內容來說較慢，而相對於底層圖片來說較快。
• 當使用者的pan手勢超出圖片的寬度時，關閉並且返回可見地區。

全景地區（Panorama Sections）

    全景地區是全景應用的組成部分，它封裝了其他控制項和內容。以下是全景地區的設計建議：

• 最大化利用四個全景地區，確保全景應用的平滑效能。
• 在列表或者網格內使用垂直滾動是可以接受的，但前提是它處於全景地區內，並且不同時與水平滾動出現。
• 只要全景地區的寬度小於螢幕的寬度，垂直滾動是可以接受的。
• 支援所有自訂控制項和標準控制項。
• 與手指拖拽的移動比例相同。
• 當使用者導向到一個新的地區時，開啟螢幕動畫。
• 設計全景地區的布局，使得少量的下一個全景地區可見。提供輕微的重疊，使得使用者直覺地利用Pan手勢來切換應用。
• 直到該全景地區有內容要表示時，才顯示該全景地區。

全景地區標題（Panorama Section Titles）

    全景地區標題是全景地區的可選部分。如果你提供標題，考慮下面的設計建議：

• 儘管可以使用圖片，最好使用簡潔的文本。使用多個元素，例如一個圖片加文字（或者其他UI元素）也是可以的。
• 確保全景地區標題不依賴於背景圖片。
• 避免使用標題動畫，因為標題可以移動。
• 跨越整個地區，即使存在多個控制項。
• 當使用者導向到一個新的地區時，開啟螢幕動畫。

Panorama控制項實踐

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

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

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

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

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

<!--Panorama item three.-->
       <controls:PanoramaItem Header="item3">
           <Grid/>
      </controls:PanoramaItem>

5.為Panorama添加背景圖片，代碼如下：

<!--Assigns a background image to the Panorama control.-->
     <controls:Panorama.Background>
        <ImageBrush ImageSource="samplePhoto.jpg"/>
     </controls:Panorama.Background>

6.為Panorama Item添加控制項和內容。為第一個PanoramaItem添加TextBlock control，代碼如下：

<Grid>
<!--This code creates two TextBlock controls and places them in a StackPanel control.-->
   <StackPanel>
       <TextBlock
           Text="This is a text added to the first panorama item control"
           Style="{StaticResource PhoneTextLargeStyle}"
           TextWrapping="Wrap"/>
       <TextBlock Text=" "/>
       <TextBlock
           Text="You can put any content you want here..."
           Style="{StaticResource PhoneTextLargeStyle}"
           TextWrapping="Wrap"/>
   </StackPanel>
</Grid>

為第二個PanoramaItem添加文字，並把方向置為水平，代碼如下：

<controls:PanoramaItem
      Header="item2"
      Orientation="Horizontal">

<!--Assigns a border to the PanoramaItem control and background for the content section.-->
     <Grid>
         <Border
             BorderBrush="{StaticResource PhoneForegroundBrush}"
             BorderThickness="{StaticResource PhoneBorderThickness}"
             Background="#80808080">
             <TextBlock
                 Text="This content is very wide and can be panned horizontally."
                 Style="{StaticResource PhoneTextExtraLargeStyle}"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center" >                 
             </TextBlock>
         </Border>
      </Grid>

為第三個PanoramaItem添加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"

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

附上原始碼：PanoramaDemo.rar

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

 

參考連結：

Panorama Control for Windows Phone

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

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