[Silverlight] 當麻許的Phone7筆記 - 6.樞紐應用程式(Pivot Application)

2010/12/23

Pivot 樞紐模式是Windows Phone 7 設計中一個快速的方式來管理應用程式內顯示或頁面功能。
這種控制項項可以用顯示大量的資料(當然跟電腦可以顯示的大量還是不同)、查看多個資料集合。
並且他有預設預設的手勢(左右滑動) ,來切換每一資料集項目。

blog-78


wp7s pivot
Source : http://www.netcraft.co.il/blog/?p=3641

在Visual Studio 中你可以很輕鬆建立一個以Pivot 為基礎的專案…
blog-77
但是因為Visual Studio 的樣板是給你使用MVVM架構,他會預設給你一些有的沒的,
所以我們開一個新的專案來重新製作一個具有Pivot模式的APP…

首先我們開一個一般的Windows Phone Appication 並且專案名稱為 SamplePivot

blog-79

預設開啟Pivot 的專案 ,順便就解析一下Pivot Control
blog-78

接下來我們把 LayoutRoot 裡面的東西都先拿掉,等等放入一個Pivot Control  這樣環境比較單純…

blog-80

因為Pivot Control 跟 Panorama Control 一樣不是預設的Control 所以我們必須要引用…
在左側工具箱(ToolBox)按滑鼠右鍵點擊 ‘選取項目’

blog-68

選取 Pivot 後按下確認…
blog-81

左邊工具列會多一個Pivot Control

blog-82

把它拖進LayoutRoot 裡面…

blog-83


做一下大小跟位置的微調.. XAML 如下:



<Grid x:Name="LayoutRoot" Background="Transparent">
    <controls:Pivot Height="768" HorizontalAlignment="Left" Name="pivot1" Title="pivot" VerticalAlignment="Top" Width="480">
        <controls:PivotItem Header="item1">
            <Grid />
        </controls:PivotItem>
        <controls:PivotItem Header="item2">
            <Grid />
        </controls:PivotItem>
    </controls:Pivot>
</Grid>


預設的Pivot  Control :
blog-84

接下來我們做一些修改…
blog-85



其中我做了一些改變…
1.我將 PivotItem 的Header 改成第一項跟第二項
2.我將 '第一項’內容的Grid 物件改成StackPanel(因為這樣排版比較簡單..Orz..)
3.放入三個TextBlock 進去

執行畫面:
blog-86

接下來,要測試一項比較重要的屬性跟事件…

我在Pivot Control 加上了 LoadedPivotItem 事件
並且我在第二項的PivotItem 中加入了 Loaded 事件
XAML :


<Grid x:Name="LayoutRoot" Background="Transparent">
    <controls:Pivot Height="768" HorizontalAlignment="Left" Name="pivot1" Title="pivot" VerticalAlignment="Top" Width="480"  LoadedPivotItem="pivot1_LoadedPivotItem">
        <controls:PivotItem Header="第一項" >
            <StackPanel Orientation="Vertical" Margin="0">
                <TextBlock Text="第一項.第一個" FontSize="40"  Margin="0,20,0,0" />
                <TextBlock Text="第一項.第二個" FontSize="40"  Margin="0,20,0,0" />
                <TextBlock Text="第一項.第三個" FontSize="40"  Margin="0,20,0,0"  />
            </StackPanel>
        </controls:PivotItem>
        <controls:PivotItem Header="第二項" Loaded="PivotItem_Loaded" >
            <Grid />
        </controls:PivotItem>
    </controls:Pivot>
</Grid>

C# Code :



private void pivot1_LoadedPivotItem(object sender, PivotItemEventArgs e)
{
    MessageBox.Show( (pivot1.SelectedItem as PivotItem).Header.ToString() +"被切換到" );
}

private void PivotItem_Loaded(object sender, RoutedEventArgs e)
{
    MessageBox.Show("已載入第二項");
}

我們執行起來觀察變化…

執行起來第一個出現的是…
blog-87

第二個出現的是…
blog-88
當我切換到第二項時只會出現:
blog-89

觀察這些我們發現一些事情:

1. PivoItem 的 Loaded 事件在執行的時候就會先觸發,無論是那一個PivotItem是不是當前被選中的。
2. LoadedPivotItem 在切換PivotItem的時候,都會被觸發,但是 Loaded  不會再被觸發…

這些都是在Pivot 應用程式設計時,需要注意跟被觀察的。少文章寫到,所以特別觀察一下…

讚一下:

檔案下載:


0 意見:

程式 . 生活 . D小調.@2010 | Binary Design: One Winged Angel.