Schnellstart: Verwenden von Pivotsteuerelementen für Layout und Navigation

  • Artikel

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

In diesem Thema erfahren Sie, wie Sie in Ihrer Windows Phone 8.1-App ein WinJS.UI.Pivot-Steuerelement für Layout und Navigation verwenden.

Mit dem Pivot-Steuerelement können Sie schnell Inhaltsabschnitte in der App verwalten, darstellen und in ihnen navigieren, indem Sie den Inhalt kontinuierlich wie in einem Karussell nach links oder nach rechts verschieben. Sie können das Steuerelement zum Filtern großer Datasets, Anzeigen mehrerer Datasets oder Wechseln zwischen App-Ansichten verwenden.

Beispiel für eine Pivotimplementierung

Hilfe zur Auswahl des besten Navigationsmusters für die App finden Sie unter Navigationsmuster.

Außerdem können Sie das flache Navigationsmuster und das hierarchische Navigationsmuster in Aktion erleben, wenn Sie sich die Reihe App-Features – Gesamtübersicht ansehen.

Voraussetzungen

Anweisungen

1. Erstellen eines neues Projekts mit der Vorlage "Windows Phone-Pivot-App"

Sie können auch die Vorlage Hub-/Pivot-App (Universelle Apps) verwenden, um eine universelle Windows-App zu erstellen. Für dieses Beispiel verwenden wir die Vorlage Pivot-App (Windows Phone).

Vorlage "Pivot-App" in Visual Studio

  1. Starten Sie Microsoft Visual Studio 2013 Update 2.

  2. Wählen Sie Datei > Neues Projekt aus, oder klicken Sie auf der Registerkarte Startseite auf Neues Projekt. Das Dialogfeld Neues Projekt wird geöffnet.

  3. Erweitern Sie links im Bereich Vorlagen die Optionen Installiert => Vorlagen => JavaScript => Store-Apps.

  4. Wählen Sie den Vorlagentyp für Windows Phone-Apps aus. Die verfügbaren Projektvorlagen für JavaScript werden im mittleren Bereich des Dialogfelds angezeigt.

  5. Wählen Sie im mittleren Bereich die Projektvorlage Windows Phone-Pivot-App aus.

  6. Geben Sie in das Textfeld Name einen Namen für Ihr Projekt ein. In den Beispielen in diesem Thema wird PivotDemo verwendet.

  7. Klicken Sie auf OK, um das Projekt zu erstellen.

2. Hinzufügen eines neuen Abschnitts (PivotItem)

Jeder Abschnitt in einem Pivot-Element ist durch ein PivotItem-Steuerelement definiert. Die Vorlage enthält vier Demoabschnitte, die Sie nach Bedarf ändern oder löschen können. Hier zeigen wir Ihnen, wie ein fünfter Abschnitt hinzugefügt wird.

Die Basisdateistruktur der Vorlage sieht im Projektmappen-Explorer so aus.

Hinweis   Um die Konsistenz mit universellen Windows-Apps sicherzustellen, wird in der Vorlage das Modell „Hub-Abschnitt-Detail/Element“ des Musters für hierarchische Navigation als Dateibenennungskonvention verwendet.

 

Dateien in der neuen Projektmappe "Hub-/Pivot-App"

  1. Das Pivot-Element und jedes PivotItem-Steuerelement werden in der Datei hub.html im Ordner pages\hub deklariert.

    Hier enthält die Vorlage ein einzelnes Pivot-Steuerelement (Hub) mit vier PivotItem-Steuerelementen (Abschnitten), die sowohl statische (section1, section2, section4) als auch datengesteuerte Inhalte (section3) enthalten.

    <!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>

    Deklarieren Sie zusätzliche Seiten, indem Sie einfach einen der vorhandenen Abschnitte kopieren und einfügen. Ändern die neue Abschnittsspezifikation wie erforderlich.

    Hier deklarieren wir basierend auf section4 einen fünften Abschnitt.

    <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. Für jedes in hub.html deklarierte PivotItem-Steuerelement müssen Sie das Layout und die Funktionalität in entsprechenden HTML-, JavaScript- und vielleicht CSS-Dateien definieren.

    In unserem Beispiel fügen wir section5Page.html und section5Page.js dem Ordner pages/hub hinzu.

    • section5Page.html— Gibt den Inhalt des Abschnitts an.

      Hier zeigen wir nur einen Textlink zu einer Elementseite an.

      <!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>

    • Die Zeichenfolgen für die Kopfzeile jedes Abschnitts werden in resources.resjson im Ordner strings/en-US definiert.

      Hier fügen wir ein weiteres Name-Wert-Paar für den fünften Abschnitt hinzu.

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

    • section5Page.js— gibt Verhalten an, das dem Abschnitt zugeordnet ist.

      Hier rufen wir eine einfache ready-Funktion für die Seite auf, und machen „section5Page“ als benutzerdefiniertes Steuerelement für die Anzeige im Hub verfügbar. Außerdem haben wir einen Klickhandler für den Textlink, der die Navigation zu einer Elementseite initiiert.

      (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
              }
           });
      }
   }
})();

    Außerdem muss der Datei hub.html im Ordner pages/hub ein Verweis auf section5Page.js hinzugefügt werden.

    <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. Führen Sie die App aus. Wählen Sie Debuggen > Debuggen starten aus, oder drücken Sie F5 (UMSCHALTTASTE+F5 um das Debuggen zu beenden und zu Microsoft Visual Studio zurückzukehren).

    Hier sehen Sie einen Screenshot der Phone-App mit dem neuen Abschnitt.

    Pivotbeispiel mit dem neuen Abschnitt 5

3. Erstellen einer universellen Windows-App mit der Vorlage „Hub-/Pivot-App (Universelle Apps)“

Erstellen Sie mit der Vorlage Hub-/Pivot-App (Universelle Apps) eine universelle Windows-App für Windows und Windows Phone.

  1. Starten Sie Visual Studio 2013 Update 2.

  2. Wählen Sie Datei > Neues Projekt aus, oder klicken Sie auf der Registerkarte Startseite auf Neues Projekt. Das Dialogfeld Neues Projekt wird geöffnet.

  3. Erweitern Sie links im Bereich Vorlagen die Optionen Installiert => Vorlagen => JavaScript => Store-Apps.

  4. Wählen Sie den Vorlagentyp Universal-Apps aus. Die verfügbaren Projektvorlagen für JavaScript werden im mittleren Bereich des Dialogfelds angezeigt.

  5. Wählen Sie im mittleren Bereich die Projektvorlage Hub-/Pivot-App (Universal-Apps) aus.

  6. Geben Sie in das Textfeld Name einen Namen für Ihr Projekt ein.

  7. Klicken Sie auf OK, um das Projekt zu erstellen.

  8. Die neue Projektmappe Hub-/Pivot-App enthält drei Projekte: eines für Windows-spezifische Dateien, eines für Phone-spezifische Dateien und eines für gemeinsam genutzten Code. Legen Sie das Startprojekt zum Testen wie erforderlich auf das Windows- oder WindowsPhone-Projekt fest.

4. Hinzufügen eines neuen Abschnitts für universelle Windows-Apps

Wie die Vorlage Windows Phone-Pivot-App enthält auch die Vorlage Hub-/Pivot-App vier Demoabschnitte, die Sie wie gewünscht ändern oder löschen können.

Die Basisdateistruktur der Vorlage sieht im Projektmappen-Explorer so aus.

Dateien in der neuen Projektmappe "Hub-/Pivot-App"

Jeder der entsprechenden HTML-, JavaScript-, CSS- und Ressourcendateien kann universell für Windows- und Windows Phone-Projekte oder nur für die jeweilige Plattform gelten (siehe die verschiedenen Projekte in der Vorlagendemo).

Führen Sie die App aus. Wählen Sie Debuggen > Debuggen starten, oder drücken Sie F5 (SHIFT + F5 um das Debuggen zu beenden und zu Visual Studio zurückzukehren).

Nicht vergessen: Legen Sie das WindowsPhone-Projekt als Startprojekt fest.

Hier sehen Sie einen Screenshot der Phone-App mit dem neuen Abschnitt.

Pivotbeispiel mit dem neuen Abschnitt 5

Dieser Screenshot zeigt den neuen Abschnitt in der Windows-App.

Das Universal-Pivotbeispiel mit dem neuen Abschnitt 5.

Zusammenfassung

In dieser Schnellstartanleitung haben Sie die Vorlage Windows Phone-Pivot-App sowie die Universalvorlage Hub-/Pivot-App (Universal-Apps) in Visual Studio 2013 Update 2 kennen gelernt. Sie haben einen neuen Abschnitt mit dem PivotItem-Steuerelement und eine einfache Handlerfunktion für das click-Ereignis für den Textlink im Abschnittsinhalt hinzugefügt.

Verwandte Themen

Für Entwickler

Ihre erste App – Teil 3: PageControl-Objekte und Navigation

Schnellstart: Verwenden der Einzelseitennavigation

WinJS.Navigation Namespace

WinJS.UI.Pivot

WinJS.UI.PivotItem

HTML-Beispiel für ein Pivot-Steuerelement

Beispiel für Navigation und Navigationsverlauf

Für Designer

Richtlinien für Pivots

Navigationsmuster

Befehlsmuster

Layout