windows phone7 學習筆記13——Panorama和Pivot

　　Windows Phone提供了Panorama和Pivot這兩種控制項供使用者橫向切換導航的方式來顯示具有內容比較相關的頁面。本文主要對這兩個控制項進行描述，包括如何使用。

　　1、Panorama和Pivot控制項的共同點

　　(1)使應用程式更加容易導航和使用,呈現更豐富的內容
　　(2)可以非常簡單的使用XAML與API開發豐富的UI應用
　　(3)完全支援資料繫結功能，也支援內容和模板與樣式
　　(4)自動支援系統的主題
　　(5)內建幫組導航的觸摸事件，例如是輕擊(flick),平移（pan)等
　　(6)內建滑動的動畫效果（animations）
　　(7)在最後一個item繼續平移的時候會自動重新回到第一個item

 

　　2、Panorama控制項

　　Panorama控制項用來在一個很長的橫向面板上顯示相關的內容，螢幕之外的內容可以依次切入到螢幕中，可以通過左右滑動的方式來切換它們。當看到其中的一個元素的時候，可以在螢幕右邊顯示出了一點下一屏的內容，這樣你就可以知道在當前螢幕的下一屏還是有內容的。當瀏覽到內容的最後一屏再繼續切換的話，則會回到第一屏。另外Panorama控制項自身內建了觸控和導航，通常來說這些已經夠用，基本上不需要再為其實現特殊的手勢功能。

　　(1)Panorama被大量的使用到Windows Phone裡面,例如：people,music+video還有Office Hub
　　(2)具有一副大於螢幕大小的底圖
　　(3)使用者可以通過輕擊和平移來選擇不同的資訊
　　(4)呈現當前item的時候，同時也顯示旁邊item的一部分資訊
　　(5)建議最多4個items

　　

 

　　例子：

<!--LayoutRoot 是包含所有頁面內容的根網格-->
    <Grid x:Name="LayoutRoot" Background="Transparent">

        <!--Panorama 控制項-->
        <controls:Panorama Title="waiter">
            <controls:Panorama.Background>
                <ImageBrush ImageSource="Panorama.jpg" Opacity="0.5"/>
            </controls:Panorama.Background>

            <!--Panorama 項目一-->
            <controls:PanoramaItem Header="learn">
                <!--具有文字環繞的雙線列表-->
                <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Items}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="0,0,0,17" Width="432" Height="78">
                                <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PanoramaItem>

            <!--Panorama 項目二-->
            <!--使用“Orientation="Horizontal"”可使面板水平放置-->
            <controls:PanoramaItem Header="play">
                <!--具有映像預留位置和文字環繞的雙線列表-->
                <ListBox Margin="0,0,-12,0">
                    <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
                        <Image Height="100" Width="100" Source="icons/tictactoe.png" Margin="12,0,9,0"/>
                        <StackPanel Width="311">
                            <TextBlock Text="tic tac toe"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                            <TextBlock Text="the classic two player game" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                        </StackPanel>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
                        <Image Height="100" Width="100" Source="icons/numbers.png" Margin="12,0,9,0"/>
                        <StackPanel Width="311">
                            <TextBlock Text="numbers"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                            <TextBlock Text="learn your digits from 1 - 20" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                        </StackPanel>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
                        <Image Height="100" Width="100" Source="icons/wordsearch.png" Margin="12,0,9,0"/>
                        <StackPanel Width="311">
                            <TextBlock Text="word search"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                            <TextBlock Text="find as many words as you can" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                        </StackPanel>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
                        <Image Height="100" Width="100" Source="icons/animals.png" Margin="12,0,9,0"/>
                        <StackPanel Width="311">
                            <TextBlock Text="animals"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                            <TextBlock Text="hear and learn your favorites" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                        </StackPanel>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
                        <Image Height="100" Width="100" Source="icons/alphabet.png" Margin="12,0,9,0"/>
                        <StackPanel Width="311">
                            <TextBlock Text="alphabet"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                            <TextBlock Text="learn your letters" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                        </StackPanel>
                    </StackPanel>
                </ListBox>
            </controls:PanoramaItem>

            <!--Panorama 項目三-->
            <controls:PanoramaItem Header="all">

            </controls:PanoramaItem>
        </controls:Panorama>
    </Grid>

 

　　2、Pivot控制項(樞軸控制項)

　　Pivot控制項用來過濾大量的資料集，在不同的視圖中查看它們，或者針對同一個資料切換不同的視圖。Pivot控制項跟Tab控制項很像，但它是專門為Windows Phone和觸控介面設計的。它通過視圖間的橫向互相切換，這樣就可以讓使用者 用內建的觸控功能來回導航。可以把Pivot控制項看作是一個可以給使用者提供相同資料的不同“層”的有效控制項。它們呈現相同的資料，但卻在兩個完全不同的視圖中。樞軸控制項另一個應用是將項目進行分類。

　　(1)同樣的資料來源通過不同形式呈現，例如Calendarhub
　　(2)對於一個資料來源進行分類過濾呈現，例如emailhub
　　(3)代替原先的Tab控制項，組織大類的資訊，例如System settings
　　(4)內容經過最佳化，只顯示在一個屏裡面
　　(5)建議最多7個items

 

　　3、Panorma pk Pivot

　　Panorama
　　(1)更豐富的使用者體驗
　　(2)item可以設定螢幕方向為水平，支援多餘一個屏的顯示
　　(3)可以使用任意大小的背景圖，Panorama會自動的縮放成適合大小
　　(4)建議不要使用Application Bar
　　Pivot
　　(1)支援更多資料量的items，注意最好最多7個
　　(2)能使用更多的空間來呈現資料
　　(3)更加容易使用代碼來操作，例如SelectedIndex和SelectedItem可以用於Pivot，但不能用於Panorama
　　(4)可以使用Application Bar

 

　　4、到底使用那個？

　　(1)是否需要Application Bar
　　(2)是否使用大得背景圖
　　(3)呈現什麼樣的內容,內容逐漸的關係是什嗎？
　　(4)一共有幾個Items
　　(5)程式主要是商用還是娛樂

 

　　5、相關建議

　　Panorama

　　(1)盡量控制PanoramaItems的個數最大不超過四個。

　　(2)除非PanoramaItems有內容顯示，否則最好是把Visibility屬性設定成Collapsed以隱藏。

　　(3)通過設定Orientation屬性為Horizontal使PanoramaItems可以顯示比螢幕邊界更寬的內容。

　　(4)使用合適的背景圖片大小，建議為高度800像素，寬度在2000像素以內。

　　(5)盡量設定Panorama的Title屬性為應用程式在開始介面的名稱。

　　(6)盡量避免為Panorama的Title填加動畫或者動態更改其大小。

　　Pivot

　　(1)考慮到效能，盡量降低PivotItem的個數。

　　(2)盡量即時載入裡面的內容，而不是在程式開始的時候就全部載入。

　　(3)盡量用Pivot控制項顯示相同類型的元素或者資料。

　　(4)不要用Pivot控制項實作類別似導航工具的功能。

　　(5)不要使用Application Bar提供導航。如果用Pivot是為了導航效果，那就相當於濫用了。

　　參考連結：http://www.cnblogs.com/aspnetx/archive/2011/10/27/2227162.html

　　　　　　　http://bbs.51aspx.com/showtopic-42954.html

　　還有msdn上的，這裡就不列出來了。