首页 > 代码库 > WP8.1学习系列(第九章)——透视Pivot开发指南
WP8.1学习系列(第九章)——透视Pivot开发指南
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 控件，该控件本质上是次要控件（称为 PivotItem 控件）的容器。PivotItem 控件包含单个页面的内容，如每个页面中的控件、网格或链接。有关 Pivot 控件体系结构的更多信息，请参见 Windows Phone 8 的 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 控件的布局根的 Grid 控件中。
层 | 类型 | 描述 |
|---|---|---|
标题列表元素 | PivotHeadersControl | 该元素负责显示 Pivot 项的标题。 |
Pivot 项展示区 | ItemsPresenter | 该 ItemsPresenter 控件显示集合中的一个 PivotItem 控件。 |
标题列表元素
显示标题，直到超过突出显示当前标题的控件的宽度。 如果没有足够的标题来占满该控件的全部宽度，则标题不会循环并且每个标题只显示一次。
Pivot 项展示区
这是一个标准的 ItemsPresenter 控件，它负责充当项内容的占位符。它将包含 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 项中添加控件和内容
- 相关主题
在这部分中，您将在 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>
在本节中，您将向每个 PivotItem 控件中添加各种控件和内容。
向第一个 Pivot 项中添加内容
对于第一个 PivotItem，您将添加包含环绕文字的 TextBlock 控件。
向第一个 Pivot 项添加内容的步骤
向第一个 Pivot 项 <controls:PivotItem Header="item1"> 后面的 XAML 代码中添加以下代码。您必须首先删除现有的 <Grid/> 标记。
XAML<Grid> <!--Added TextBlock control with formatted text.--> <TextBlock TextWrapping="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.--> <Border BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="{StaticResource PhoneBorderThickness}"> <Grid> <Image Source="samplePhoto.jpg" Stretch="UniformToFill"/> <TextBlock Text="Here is some generic content to take up space." TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" /> </Grid> </Border>注意： 第二个 PivotItem 内容应该类似于本主题底部所示的插图。
向第三个 Pivot 项中添加内容
对于最后一个 PivotItem，您将在 ListBox 控件内放置一系列字符串文本值。目的是表明您能够导航托管的控件。用户将能够上下垂直平移列表内容。
向第三个 Pivot 项添加内容的步骤
在 PivotPage1.xaml 中，向 XAML 代码中添加以下命名空间声明：
XAMLxmlns: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开发指南