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 控件概述

 

在应用的底部是 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 应用的步骤

1. 从“开始”菜单启动 Visual Studio。

2. 通过选择“文件” | “新建项目”菜单命令来创建一个新项目。

3. 将显示“新建项目”窗口。展开“Visual C#”模板，然后选择“Windows Phone”模板。

4. 选择 Windows Phone 应用  模板。填写所需的项目“名称”。

5. 单击“确定”。将创建一个新项目并在 Visual Studio 设计器窗口中打开 MainPage.xaml。

6. 在“解决方案资源浏览器”中，右键单击该项目，单击“添加”，然后单击“新建项”。选择“Windows Phone Pivot 页面”，然后单击页面底部的“添加”。 对该项目使用默认名称 PivotPage1.xaml。

7. 在 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 体验配置为当用户启动应用时立即可见。

8. 在 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。

9. 在 <!--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.-->
      <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 项添加内容的步骤

1. 在 PivotPage1.xaml 中，向 XAML 代码中添加以下命名空间声明：

   XAML

    

   xmlns:sys="clr-namespace:System;assembly=mscorlib"
   

   注意：

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

2. 向第三个 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 应该类似于本主题底部所示的插图。

3. 通过选择“调试” | “启动调试”菜单命令运行应用。这将打开模拟器窗口并启动该应用，或者部署到您选择的设备。