[Silverlight] 當麻許的Phone7筆記 - 6.樞紐應用程式(Pivot Application)
Pivot 樞紐模式是Windows Phone 7 設計中一個快速的方式來管理應用程式內顯示或頁面功能。
這種控制項項可以用顯示大量的資料(當然跟電腦可以顯示的大量還是不同)、查看多個資料集合。
並且他有預設預設的手勢(左右滑動) ,來切換每一資料集項目。
Source : http://www.netcraft.co.il/blog/?p=3641
在Visual Studio 中你可以很輕鬆建立一個以Pivot 為基礎的專案…
但是因為Visual Studio 的樣板是給你使用MVVM架構,他會預設給你一些有的沒的,
所以我們開一個新的專案來重新製作一個具有Pivot模式的APP…
首先我們開一個一般的Windows Phone Appication 並且專案名稱為 SamplePivot
預設開啟Pivot 的專案 ,順便就解析一下Pivot Control
接下來我們把 LayoutRoot 裡面的東西都先拿掉,等等放入一個Pivot Control 這樣環境比較單純…
因為Pivot Control 跟 Panorama Control 一樣不是預設的Control 所以我們必須要引用…
在左側工具箱(ToolBox)按滑鼠右鍵點擊 ‘選取項目’
選取 Pivot 後按下確認…
左邊工具列會多一個Pivot Control
把它拖進LayoutRoot 裡面…
做一下大小跟位置的微調.. 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 :
接下來我們做一些修改…
其中我做了一些改變…
1.我將 PivotItem 的Header 改成第一項跟第二項
2.我將 '第一項’內容的Grid 物件改成StackPanel(因為這樣排版比較簡單..Orz..)
3.放入三個TextBlock 進去
執行畫面:
接下來,要測試一項比較重要的屬性跟事件…
我在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("已載入第二項"); }
我們執行起來觀察變化…
執行起來第一個出現的是…
第二個出現的是…
當我切換到第二項時只會出現:
觀察這些我們發現一些事情:
1. PivoItem 的 Loaded 事件在執行的時候就會先觸發,無論是那一個PivotItem是不是當前被選中的。
2. LoadedPivotItem 在切換PivotItem的時候,都會被觸發,但是 Loaded 不會再被觸發…
這些都是在Pivot 應用程式設計時,需要注意跟被觀察的。少文章寫到,所以特別觀察一下…
讚一下:
檔案下載:
標籤:
教學,
Silverlight,
Windows Phone 7
|
This entry was posted on 下午2:33
and is filed under
教學
,
Silverlight
,
Windows Phone 7
.
You can follow any responses to this entry through
the RSS 2.0 feed.
You can leave a response,
or trackback from your own site.
0 意見:
張貼留言