通过

快速入门：为布局和导航使用透视控件

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

了解如何在 Windows Phone 8.1 应用中为布局和导航使用 WinJS.UI.Pivot 控件。

Pivot 控件提供一种通过左右平移（即不断环绕，如旋转）快速管理、展示和快速浏览应用中内容部分的方法。它可用于筛选较大的数据集、查看多个数据集或切换应用视图。

透视实现示例。

有关为你的应用选择最佳导航模式的帮助，请参阅导航模式。

同样，你可以在操作时参阅平面导航和分层导航模式，它们是应用功能大全系列的一部分。

先决条件

说明

1. 使用“透视应用 (Windows Phone)”模板创建新项目

你也可以使用“中心/透视应用(通用应用)”模板创建通用 Windows 应用。对于此示例，我们将使用“透视应用 (Windows Phone)”****模板。

Visual Studio 中的中心应用模板

  1. 启动 Microsoft Visual Studio 2013 Update 2。

  2. 选择“文件”>“新建项目”或从“起始页”选项卡单击“新建项目”。将打开“新建项目”对话框。

  3. 在左侧的“模板”窗格中，依次展开“已安装”=>“模板”=>“JavaScript”=>“应用商店应用”****。

  4. 选择“Windows Phone 应用”模板类型。JavaScript 可用的项目模板随即将显示在对话框的中心窗格中。

  5. 在中心窗格中，选择“透视应用 (Windows Phone)”****项目模板。

  6. 在“名称”文本框中，键入项目名称。本主题中的示例使用 PivotDemo。

  7. 单击“确定”以创建项目。

2. 添加一个新部分 (PivotItem)

Pivot 内的每个部分均由 PivotItem 控件定义。该模板包括四个可根据需要修改或删除的演示部分。 在此处，我们将显示如何添加第 5 个部分。

该模板的基本文件结构如“解决方案资源管理器”中所示。

注意   为了与通用 Windows 应用一致，该模板使用文件命名约定的分层导航模式的中心部分详细信息/项模型。

 

新的中心/透视应用解决方案中的文件。

  1. Pivot 和每个 PivotItem 均在 pages\hub 文件夹的 hub.html 中声明。

    此处，该模板包括带有四个 PivotItem 控件（部分）的单个 Pivot 控件（中心），这四个控件包含静态（第 1 部分、第 2 部分、第 4 部分）和数据驱动的（第 3 部分）内容。

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>hubPage</title>

  <link href="/css/phone.css" rel="stylesheet" />
  <link href="/pages/hub/hub.css" rel="stylesheet" />
  <link href="/pages/hub/hubphone.css" rel="stylesheet" />
  <script src="/js/data.js"></script>
  <script src="/pages/hub/hub.js"></script>
  <script src="/pages/hub/section1Page.js"></script>
  <script src="/pages/hub/section2Page.js"></script>
  <script src="/pages/hub/section3Page.js"></script>
  <script src="/pages/hub/section4Page.js"></script>
</head>
<body>
  <div class="hubpage fragment">
    <header aria-label="Header content" role="banner">
      <button class="titlearea backbutton" 
        data-win-control="WinJS.UI.BackButton">
      </button>
      <h1 class="titlearea win-type-ellipsis">
        <span class="pagetitle">PivotDemo</span>
      </h1>
    </header>

    <section aria-label="Main content" role="main">
      <!-- Customize the Hub control by modifying the 
           HubSection controls here. -->

      <div class="hub" data-win-control="WinJS.UI.Pivot">

        <div class="section1 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-options="{ isHeaderStatic: true }" 
          data-win-res="{ winControl: {'header': 'Section1'} }">
          <div class="sectioncontrol" 
            id="section1contenthost" 
            data-win-control="HubApps_SectionControls.Section1Control">
          </div>
        </div>

        <div class="section2 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-options="{ isHeaderStatic: true }" 
          data-win-res="{ winControl: {'header': 'Section2'} }">
          <div class="added pivot-item-viewport" >
            <div class="added pivot-item-surface" >
              <div class="sectioncontrol" 
                id="section2contenthost" 
                data-win-control="HubApps_SectionControls.Section2Control">
              </div>
            </div> 
          </div> 
        </div>

        <div class="section3 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-res="{ winControl: {'header': 'Section3'} }">
          <div class="section3contenthost sectioncontrol" 
            id="section3contenthost" 
            data-win-control="HubApps_SectionControls.Section3Control"
            data-win-options="{
              dataSource: select('.pagecontrol').winControl.section3DataSource,
              layout: {type: WinJS.UI.ListLayout},
              oniteminvoked: select('.pagecontrol').winControl.section3ItemNavigate}">
          </div>
        </div>

        <div class="section4 section" 
          data-win-control="WinJS.UI.PivotItem" 
          data-win-options="{ isHeaderStatic: true }" 
          data-win-res="{ winControl: {'header': 'Section4'} }">
            <div class="sectioncontrol" 
              id="section4contenthost" 
              data-win-control="HubApps_SectionControls.Section4Control">
            </div>
        </div>
      </div>
    </section>
  </div>
</body>
</html>

    只需复制并粘贴现有部分之一，即可声明其他页面。根据需要修改新部分规格。

    在此处，我们基于 section4 声明第 5 个部分。

    <div class="section4 section" 
  data-win-control="WinJS.UI.PivotItem" 
  data-win-options="{ isHeaderStatic: true }" 
  data-win-res="{ winControl: {'header': 'Section4'} }">
  <div class="sectioncontrol" 
    id="section4contenthost" 
    data-win-control="HubApps_SectionControls.Section4Control">
  </div>
</div>

<div class="section5 section" 
  data-win-control="WinJS.UI.PivotItem" 
  data-win-options="{ isHeaderStatic: true }" 
  data-win-res="{ winControl: {'header': 'Section5'} }">
     <div class="sectioncontrol" 
    id="section5contenthost" 
    data-win-control="HubApps_SectionControls.Section5Control">
  </div>
</div>

  2. 在 hub.html 中声明的每个 PivotItem 都必须具有其布局和在相应 HTML、JavaScript 和可能的级联样式表 (CSS) 和资源文件中定义的功能。

    对于这四个示例，我们将 section5Page.html 和 section5Page.js 添加到 pages/hub 文件夹中。

    • section5Page.html—指定该部分内容。

      在此处，我们仅显示指向项目页面的文本链接。

      <!DOCTYPE html>
<html>
<head>
   <title></title>
   <link href="/pages/hub/hub.css" rel="stylesheet" />
   <script src="/pages/hub/section5Page.js"></script>
</head>
<body>
   <div class="fragment section1page">
      <section aria-label="Main content" role="main">
        <a href="/pages/item/section5Item1.html">Link</a>
      </section>
   </div>
</body>
</html>

    • 每个部分的标头字符串均在 strings/en-US 文件夹的 resources.resjson 中定义。

      在此处，我们将为第 5 部分添加另一个名称/值对。

          "Section5": "Section 5",
    "Section5Description": "",

    • section5Page.js—指定与该部分相关联的行为。

      在此处，我们为该页面调用基本 ready 函数并将 section5Page 作为可在中心上显示的自定义控件公开。对于文本链接，我们还具有可启动导航到项目页面的单击处理程序。

      (function () {
   "use strict";

   var ControlConstructor = 
     WinJS.UI.Pages.define("/pages/hub/section5Page.html", {
       // This function is called after the page control contents 
       // have been loaded, controls have been activated, and 
       // the resulting elements have been parented to the DOM. 
       ready: function (element, options) {
         options = options || {};

         // Retrieve the page 2 link and register the event handler. 
         // Don't use a button when the action is to go to another 
         // page; use a link instead. 
         // See Guidelines and checklist for buttons at 
         // https://go.microsoft.com/fwlink/p/?LinkID=313598
         // and Quickstart: Using single-page navigation at 
         // https://go.microsoft.com/fwlink/p/?LinkID=320288.
         WinJS.Utilities.query("a").listen(
           "click", linkClickHandler, false);
      },
   });

   // The following lines expose this control constructor as a global. 
   // This lets you use the control as a declarative control inside 
   // the data-win-control attribute. 

   WinJS.Namespace.define("HubApps_SectionControls", {
      Section5Control: ControlConstructor
   });

   function linkClickHandler(eventInfo) {
      var link = eventInfo.target;
      eventInfo.preventDefault();
      if (link.href.indexOf("ms-appx") > -1) {
        WinJS.Navigation.navigate(link.href);
      }
      else if (link.href.indexOf("http") > -1) {
        // Create a Uri object from a URI string 
        var uri = new Windows.Foundation.Uri(link.href);
        var options = new Windows.System.LauncherOptions();
        // Launch the URI with a warning prompt
        options.treatAsUntrusted = true;
        // Launch the URI
        Windows.System.Launcher.launchUriAsync(uri, options).then(
           function (success) {
              if (success) {
                // URI launched
              } else {
                // URI launch failed
              }
           });
      }
   }
})();

    对 section5Page.js 的引用还必须添加到 pages/hub 文件夹的 hub.html 中。

    <head>
   <meta charset="utf-8" />
   <title>hubPage</title>

   <link href="/css/phone.css" rel="stylesheet" />
   <link href="/pages/hub/hub.css" rel="stylesheet" />
   <link href="/pages/hub/hubphone.css" rel="stylesheet" />
   <script src="/js/data.js"></script>
   <script src="/pages/hub/hub.js"></script>
   <script src="/pages/hub/section1Page.js"></script>
   <script src="/pages/hub/section2Page.js"></script>
   <script src="/pages/hub/section3Page.js"></script>
   <script src="/pages/hub/section4Page.js"></script>
   <script src="/pages/hub/section5Page.js"></script>
</head>

  3. 运行应用。选择“调试”>“启动调试”****，或者选择 F5（选择 SHIFT + F5 以停止调试并返回到 Microsoft Visual Studio）。

    下面是带有新部分的 Phone 应用的屏幕截图。

    显示了新的第 5 部分的透视示例。

3. 使用中心/透视应用（通用应用）模板创建通用 Windows 应用

使用“中心/透视应用(通用应用)”模板为 Windows 和 Windows Phone 创建通用 Windows 应用。

  1. 启动 Visual Studio 2013 Update 2。

  2. 选择“文件”****>“新建项目”或从“起始页”****选项卡单击“新建项目”。将打开“新建项目”****对话框。

  3. 在左侧的“模板”窗格中，依次展开“已安装”=>“模板”=>“JavaScript”=>“应用商店应用”。

  4. 选择“通用应用”****模板类型。JavaScript 可用的项目模板随即将显示在对话框的中心窗格中。

  5. 在中心窗格中，选择“中心/透视应用（通用应用）”项目模板。

  6. 在“名称”****文本框中，键入项目名称。

  7. 单击“确定”以创建项目。

  8. 新“中心/透视应用”****解决方案包含三个项目。一个适用于特定于 Windows 的文件，一个适用于特定于 Phone 的文件，还有一个适用于共享的代码。按照测试的需要，将“启动项目”设置为 Windows 或 WindowsPhone 项目。

4. 为通用 Windows 应用添加新的部分

与在“透视应用 (Windows Phone)”****模板中一样，“中心/透视应用”模板也可以根据需要包括四个可进行修改或删除的演示部分。

该模板的基本文件结构如“解决方案资源管理器”****中所示。

新中心/透视应用解决方案中的文件。

每个相应的 HTML、JavaScript、CSS 和资源文件可能在 Windows 和 Phone 项目上通用，也可能对指定平台唯一（请参阅模板演示中的各种项目）。

运行应用。选择“调试”>“启动调试”****，或者选择 F5（选择 SHIFT + F5 以停止调试并返回 Visual Studio）。

请记住: 将 WindowsPhone 项目设置为“启动项目”。

下面是带有新部分的 Phone 应用的屏幕截图。

显示了新的第 5 部分的透视示例。

下面是 Windows 应用中新部分的屏幕截图。

显示了新的第 5 部分的通用透视示例。

摘要

在本快速入门中，你查看了 Visual Studio 2013 Update 2 随附的“透视应用 (Windows Phone)”****模板以及“中心/透视应用（通用应用）”通用模板。你还在该部分内容中包括的文本链接上添加了带有 PivotItem 控件的新部分以及 click 事件的简单处理程序函数。

相关主题

对于开发人员

你的第一个应用 - 第 3 部分：PageControl 对象和导航

快速入门：使用单页导航

WinJS.Navigation Namespace

WinJS.UI.Pivot

WinJS.UI.PivotItem

HTML 透视控件示例

导航和导航历史记录示例

对于设计人员

透视指南

导航模式

命令模式

布局