Windows Phone 8 的 Pivot 控件

?

2014/6/18

?

適用于：Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

Windows?Phone Pivot 應用提供了一種快速管理視圖或頁面的方法。該方法可以用于篩選大型數據集、查看多個數據集或切換應用視圖。例如，在頁面上從左至右輕拂或平移，可以前進到內容的下一個頁面。

?

本主題包括以下部分。

• Pivot 控件概述
• 導航支持
• Pivot 應用功能
• 相關主題

Pivot 控件概述

在應用的底部是?Pivot?控件，該控件本質上是次要控件（稱為?PivotItem?控件）的容器。PivotItem?控件包含單個頁面的內容，如每個頁面中的控件、網格或鏈接。有關?Pivot?控件體系結構的更多信息，請參見?Windows Phone 8 的 Pivot 控件體系結構。

?

?

導航支持

Pivot?控件內置了對觸控式交互和導航的支持。因為默認情況下已經啟用了手勢功能，所以您不必在應用中實施任何特殊的手勢功能。Pivot 控件支持以下手勢和導航效果：

• 水平移動（點擊并向左/向右拖動）

• 水平輕拂（點擊并向左/向右快速滑動）

• 導航托管的控件 - 例如，可以點擊鏈接，可以滾動列表

Pivot 應用功能

下表列出了在 Pivot 應用中所支持的一系列功能。

功能

描述

設計時體驗	您可以使用 Visual Studio 或 Blend for Visual Studio 中的設計圖面執行諸如添加其他?PivotItem?控件和在項視圖之間切換之類的操作。
匹配 Windows?Phone Pivot 體驗	您應用的外觀和響應體驗可能與集成的 Windows?Phone Pivot 體驗相似。
內置的輕拂和手勢支持	Pivot 應用已提供對常見導航的手勢支持。您不必在您的應用中實現諸如拖動、輕拂或點擊之類的手勢。
對已更改選擇的響應	只要?PivotItem?發生更改，您就可以在代碼中訂閱?SelectionChanged?事件來對該更改做出響應。
按需加載內容	若要提高 Pivot 應用的性能，您可以按需加載?Pivot?控件內容，而不是在啟動時就加載所有內容。
采用編程方式選擇哪個PivotItem?位于視圖中	您可以采用編程方式為用

Windows Phone 8 的 Pivot 控件體系結構

?

2014/6/18

?

適用于：Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

Pivot 應用包含一個基礎?Pivot?控件，該控件托管內容的各個頁面。PivotItem?控件負責顯示頁面中的內容。您可以使用設計器或采用編程的方式來處理這些元素。本主題詳細介紹?Pivot?控件和?PivotItem?控件的體系結構以及具體分析。

?

本主題包括以下部分。

• Pivot 控件
• PivotItem 控件
• 相關主題

Pivot 控件

Pivot?控件是用于 Pivot 應用的基礎控件，該控件包含兩個不同的層。每個層都包含在用作?Pivot?控件的布局根的?Grid?控件中。

層

類型

描述

標題列表元素	PivotHeadersControl	該元素負責顯示 Pivot 項的標題。
Pivot 項展示區	ItemsPresenter	該?ItemsPresenter?控件顯示集合中的一個?PivotItem?控件。

標題列表元素

顯示標題，直到超過突出顯示當前標題的控件的寬度。 如果沒有足夠的標題來占滿該控件的全部寬度，則標題不會循環并且每個標題只顯示一次。

Pivot 項展示區

這是一個標準的?ItemsPresenter?控件，它負責充當項內容的占位符。它將包含?PivotItem?控件。

PivotItem 控件

PivotItem?控件顯示單個查看頁面中的內容。PivotItem?控件是在 XAML 中作為標準?ItemsControl?元素定義的。PivotItem?控件包含一個層，該層包含在用作?Pivot?控件的布局根的?Grid?控件中。

層

類型

描述

內容	ContentPresenter	該?ContentPresenter?控件顯示?PivotItem?內容。

內容

這是一個標準的?ContentPresenter?元素，用于充當內容的占位符。

在?Pivot?控件中只能定義?PivotItem?控件。如果您嘗試將另一個元素放到?Pivot?控件中，該元素將被包裝到PivotItem?控件中。可以在 XAML 代碼中指定?PivotItem?控件的內容，也可以采用編程方式通過?Content?屬性添加該控件的內容。

如何為 Windows Phone 8 創建 Pivot 應用

?

2014/6/18

?

適用于：Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

?

在 Visual Studio 中，有多種在 Windows?Phone 中創建 Pivot 體驗的方法：

• 創建新項目時，可以使用名為“Windows Phone Pivot 應用”的自定義模板。該模板將預填充內容，您可以相應地修改該模板。

• 在 Visual Studio 中，可以向工具箱添加?Pivot?控件并且可以輕松放置到您的項目中。

• 您可以向現有項目添加“Windows Phone Pivot 頁面”。

本主題介紹如何通過向現有項目添加“Windows Phone Pivot 頁面”來創建 Pivot 應用。您可以在?Windows Phone 開發人員中心的示例庫中找到 Pivot 應用示例。

?

本主題包括以下部分。

• 創建基本 Pivot 應用
• 向 Pivot 項中添加控件和內容
• 相關主題

? 創建基本 Pivot 應用

在這部分中，您將在 Visual Studio 中創建一個 Pivot 應用。此過程將向您的項目中添加一個“Windows Phone Pivot 頁面”，該頁面預填充一個?Pivot?控件和一些?PivotItem?控件。您將另外添加一個?PivotItem。

創建基本 Pivot 應用的步驟

從“開始”菜單啟動 Visual Studio。

通過選擇“文件” | “新建項目”菜單命令來創建一個新項目。

將顯示“新建項目”窗口。展開“Visual C#”模板，然后選擇“Windows Phone”模板。

選擇?Windows?Phone 應用??模板。填寫所需的項目“名稱”。

單擊“確定”。將創建一個新項目并在 Visual Studio 設計器窗口中打開?MainPage.xaml。

在“解決方案資源瀏覽器”中，右鍵單擊該項目，單擊“添加”，然后單擊“新建項”。選擇“Windows Phone Pivot 頁面”，然后單擊頁面底部的“添加”。 對該項目使用默認名稱?PivotPage1.xaml。

在?MainPage.xaml?中，向名為?ContentPanel?的網格中的 XAML 代碼中添加以下內容：

XAML <HyperlinkButton Content="Pivot Application Example" Height="57" HorizontalAlignment="Left" Margin="49,116,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="383" NavigateUri="/PivotPage1.xaml"/> 注意：

創建此超級鏈接的目的是為您的應用創建一個起點。在應用程序運行時，用戶將點按此超級鏈接以前移到此 Pivot 體驗。您不必使用超級鏈接作為 Pivot 應用的默認條目機制；超級鏈接僅用作本練習中使用的一個示例。可以將 Pivot 體驗配置為當用戶啟動應用時立即可見。

在?PivotPage1.xaml?中，XAML 代碼中的以下代碼應該可見：

XAML <!--LayoutRoot is the root grid where all page content is placed.--><Grid x:Name="LayoutRoot" Background="Transparent"><!--Pivot Control--><controls:Pivot Title="MY APPLICATION"><!--Pivot item one--><controls:PivotItem Header="item1"><Grid/></controls:PivotItem><!--Pivot item two--><controls:PivotItem Header="item2"><Grid/></controls:PivotItem></controls:Pivot></Grid> 注意：

前面的代碼將創建一個?Pivot?控件并為其分配一個標題。接下來，您將創建兩個?PivotItem?控件，每個控件分配一個標頭。對于此項目，我們將創建三個?PivotItem?控件，在下一步中將再創建一個PivotItem。

在?<!--Pivot item two-->?部分后面，通過以下代碼再添加一個?PivotItem?控件：

XAML <!--Pivot item three.--><controls:PivotItem Header="item3"><Grid/></controls:PivotItem>

向 Pivot 項中添加控件和內容

在本節中，您將向每個?PivotItem?控件中添加各種控件和內容。

向第一個 Pivot 項中添加內容

對于第一個?PivotItem，您將添加包含環繞文字的?TextBlock?控件。

向第一個 Pivot 項添加內容的步驟

• 向第一個 Pivot 項?<controls:PivotItem Header="item1">?后面的 XAML 代碼中添加以下代碼。您必須首先刪除現有的 <Grid/> 標記。

  XAML <Grid><!--Added TextBlock control with formatted text.--><TextBlockTextWrapping="Wrap"Style="{StaticResource PhoneTextLargeStyle}"><Run>This is a simple sample for the pivot control adding text.</Run><LineBreak/><LineBreak/><Run>You can put any content you want here...</Run></TextBlock> </Grid> 注意：

  第一個?PivotItem?內容應該類似于本主題底部所示的插圖。

向第二個 Pivot 項中添加內容

對于這個頁面，您將添加包含背景圖像和換行文本的分類內容。對于本主題，使用示例圖像 samplePhoto.jpg。您必須相應更改下面的代碼以容納您的圖片。

向第二個 Pivot 項添加內容的步驟

• 向第二個 Pivot 項代碼行?<controls:PivotItem Header="item2">?后面的 XAML 代碼中添加以下代碼。您必須首先刪除現有的 <Grid/> 標記。

  XAML <!--Added background image and text content.--><BorderBorderBrush="{StaticResource PhoneForegroundBrush}"BorderThickness="{StaticResource PhoneBorderThickness}"><Grid><ImageSource="samplePhoto.jpg"Stretch="UniformToFill"/><TextBlockText="Here is some generic content to take up space."TextWrapping="Wrap"Style="{StaticResource PhoneTextExtraLargeStyle}" /></Grid></Border> 注意：

  第二個?PivotItem?內容應該類似于本主題底部所示的插圖。

向第三個 Pivot 項中添加內容

對于最后一個?PivotItem，您將在?ListBox?控件內放置一系列字符串文本值。目的是表明您能夠導航托管的控件。用戶將能夠上下垂直平移列表內容。

向第三個 Pivot 項添加內容的步驟

在?PivotPage1.xaml?中，向 XAML 代碼中添加以下命名空間聲明：

XAML xmlns:sys="clr-namespace:System;assembly=mscorlib" 注意：

引用此程序集是向?ListBox?控件中添加多行字符串文本。

向第三個?PivotItem?代碼行?<controls:PivotItem Header="item3">?后面的 XAML 代碼中添加以下代碼。您必須首先刪除現有的 <Grid/> 標記。

XAML <!--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> 注意：

第三個?PivotItem?應該類似于本主題底部所示的插圖。

通過選擇“調試” | “啟動調試”菜單命令運行應用。這將打開模擬器窗口并啟動該應用，或者部署到您選擇的設備。

?

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的WP8.1学习系列(第九章)——透视Pivot开发指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。