構建基於WinRT的WP8.1 App 03：Page控件

單頁面模板

一般利用Visual Studio 2013建立的最簡單的WP8.1應用是Blank App，它只包含一個不帶任何UI的頁面，而且沒有任何狀態管理的邏輯。

該不帶任何UI的頁面稱爲Blank Page，以下圖所示。

另外還能夠經過菜單「Add New Item…」，新增Basic Page，以下圖所示。

它與Blank Page主要區別爲：

1，Basic Page包含基本的頁面佈局；

2，頁面中預先配置了狀態管理代碼；

3，附帶一個幫助類用於狀態管理和一個NavigationHelper類用於處理後退跳轉；

 

頁面方向

在Windows Phone Silverlight 應用中，能夠經過設置<Page…>的SupportedOrientations屬性定義某個頁面支持的方向。

而在Windows Phone Store 應用中就很不同了。能夠在manifest編輯器中的Application選項卡選擇合適的選項，爲整個應用設置方向。

若是不想設置整個應用範圍的方向，而只設置某些頁面，能夠利用代碼Windows.Graphics.Display.DisplayInformation.AutoRotationPreferences 設置，示例代碼以下：

可是上述代碼仍然是設置整個應用範圍的，因此別忘了在離開頁面時恢復狀態，可參考OnNavigationFrom函數中的代碼。

 

Hub控件

基於WinRT的Windows Phone中Hub控件和Windows上相同，而且與Windows Phone Silverlight中Panorama控件相似。

一般Hub頁面是應用的首頁。

Hub控件設計上的精髓是把內容分離到不一樣的段落和不一樣的細節級別上。Hub頁面是用戶的切入點。內容以橫向或縱向顯示（根據設備的方向），讓用戶能夠一眼預覽新的內容。

Hub包含不一樣分類的內容，每一個分類映射到應用的某個頁面。每一個段落都應該顯示內容或功能。

Hub應該提供大量的視覺變化，吸引用戶查看應用的各個模塊。

另外控件和模板讓Hub的佈局和導航變得很是簡單。

Windows Phone 和 Windows Hub控件以及相關的應用模板已經把主頁面的構建形式化了，所以很是容易構建一個主頁面。

下面這張圖是利用「中心應用程序」模板建立的Hub頁面默認樣式。

從上圖中發現，每一個段落呈現的樣式都不同，也就是說Hub控件中不一樣的段落能夠定製不一樣樣式模板。

另外每一個段落的佈局都是在DataTemplate中定義的，示例代碼以下：

從上述代碼中，發現一般Hub控件做爲Grid的惟一內容，囊括了頁面的內容。在Hub中的HubSection控件，分別顯示控件的不一樣段落。

通常咱們都會爲應用的主頁面設置背景圖，若主頁面中包含的是Hub控件，一般設置的是Hub控件的背景圖片，而不是Page的背景圖片。當用戶滾動到Hub的內容時，將會看到完整的平行視差效果。

設置Hub的背景圖片可參考以下代碼：

 

參考資料

1，快速入門：使用中心

2，Hub Class

3，Windows Phone 8.1 samples