So wird's gemacht: Hinzufügen gängiger Funktionen zur Rastervorlage (Windows Store-Apps mit JavaScript und HTML)

Windows 8:  Dieses Thema gilt nur für Windows 8. Weitere Informationen zur Verwendung eines hierarchischen Navigationsmusters in Windows 8.1 finden Sie unter Hierarchische Navigation von A bis Z (HTML).

Sie können die Visual Studio-Vorlage "Raster-Anwendung" um zusätzliche Grundfunktionen erweitern, die Ihre Anwendung aufwerten. Dieses Lernprogramm ist für Microsoft Visual Studio 2012 unter Windows 8 konzipiert. Das App-Paket für das vollständige Lernprogramm finden Sie hier.

Dies ist die Standardstartseite der Vorlage "Grid Application".

Screenshot der Standardstartseite der Vorlage "Grid Application"

Wenn Sie das Lernprogramm fertiggestellt haben, verfügt Ihre App über unterschiedlich große Elemente, die verschiedene Vorlagen verwenden.

Screenshot der Grid-App mit unterschiedlich großen Elementen mit verschiedenen Vorlagen

Die App enthält auch eine App-Leiste. Wenn Elemente ausgewählt sind, werden hier Kontextbefehle angezeigt.

Screenshot der App mit einer App-Leiste und Kontextbefehlen, wenn Elemente ausgewählt sind

Die App implementiert das SemanticZoom-Steuerelement.

Screenshot der App, die das SemanticZoom-Steuerelement implementiert

Und alle Seitenübergänge in der App sind fließend animiert.

Die Vorlage "Grid Application"

App-Vorlagen von Visual Studio sind eine hervorragende Möglichkeit, um schnell mit einer App mit "eingebautem" Microsoft-Designstil zu beginnen. Da Entwickler aber unterschiedliche Anforderungen haben, sind nicht alle Funktionen in den Vorlagen enthalten. Dieses Lernprogramm zeigt, wie Sie eine vorlagenbasierte App anpassen und erweitern und dabei trotzdem die Richtlinien für den Micrsoft-Designstil einhalten. Insbesondere zeigt dieses Lernprogramm, wie Sie eine App auf Basis der Vorlage "Grid Application" anpassen.

In jedem Abschnitt des Lernprogramms wird gezeigt, wie Sie der Vorlage "Grid Application" ein spezielles Feature hinzufügen. Folgende Features werden hinzugefügt: Animationen für Seitenübergänge, eine App-Leiste mit Standard- und Kontextbefehlen, das SemanticZoom-Steuerelement und unterschiedlich große Elemente im Raster. Sie erfahren den Grund für jede Ergänzung und erhalten eine schrittweise Anleitung zum Hinzufügen des jeweiligen Features zu der Vorlage. Obwohl der Schwerpunkt auf der Vorlage "Grid Application" liegt, können Sie viele dieser Lektionen auch auf die Vorlage "Split Application" anwenden.

Erste Schritte

Bevor Sie mit diesem Lernprogramm beginnen, müssen Sie die folgenden Schritte ausführen.

  1. Starten Sie Visual Studio 2012, und wählen Sie Datei > Neues Projekt aus.
  2. Erstellen Sie ein neues JavaScript-Projekt mit der Vorlage "Grid Application".

Hinzufügen von Animationen für Seitenübergänge

In Apps mit mehreren Seiten sollten die Seitenübergänge animiert sein, wenn Benutzer zwischen den Seiten navigieren. In diesem Abschnitt fügen wir Animationen für Seitenübergänge zu Seiten in der Vorlage "Grid Application" hinzu.

Grund

Eine Animation beim Seitenwechsel vermittelt den Eindruck einer schnellen und flüssigen Navigation zwischen Seiten. Solche Animationen sollten Sie bei jedem Übergang von einer Seite zu einer anderen vorsehen.

Implementierung

Wir fügen auf jeder Seite der Vorlage eine Funktion hinzu, die die zu animierenden Elemente der Seite in der Reihenfolge, in der sie animiert werden sollen, zurückgibt. Dann fügen wir in Navigator.js eine Funktion ein, die sicherstellt, dass das System die Animationen jedes Mal aufruft, wenn der Benutzer auf eine Seite wechselt.

Weitere Informationen zu Animationen für Seitenübergänge finden im Beispiel zur HTML-Animationsbibliothek.

  1. Fügen Sie in GroupedItems.js eine Funktion zu ui.Pages.define hinzu, die ein Array mit HTML-Elementen zurückgibt. Diese Funktion stellt die Kopfzeile und den Seitenabschnitt bereit, der die Rasteransicht enthält.
    
    
    getAnimationElements: function () {
        return [[this.element.querySelector("header")], [this.element.querySelector("section")]];
    },
    
    

    Hinweis  Wie im obigen Beispiel gezeigt, müssen Sie an das Ende dieser Funktion ein Komma setzen, außer es handelt sich um die letzte Funktion in der Liste. Bei der letzten Funktion müssen Sie das Komma vor die Funktion setzen. Diese Regel gilt auch für die folgenden Schritte.

  2. Fügen Sie in GroupDetail.js eine Funktion zu ui.Pages.define hinzu, die ein Array mit den HTML-Elementen zurückgibt, die animiert werden sollen.
    
    getAnimationElements: function () {
        return [[this.element.querySelector("header")], [this.element.querySelector("section")]];
    },
    
    
  3. Fügen Sie in ItemDetail.js eine Funktion zu ui.Pages.define hinzu, die ein Array mit den HTML-Elementen zurückgibt, die animiert werden sollen.
    
    getAnimationElements: function () {
        return [[this.element.querySelector("header")], [this.element.querySelector(".content")]];
    },
    
    
  4. Fügen Sie in Navigator.js eine Funktion zu WinJS.Namespace.define hinzu, die die Elemente auf der Seite abruft, die animiert werden sollen. Falls die Seite keine Funktion bereitstellt, die ein Array mit Elementen zurückgibt, wird die gesamte Seite animiert.
    
    _getAnimationElements: function () {
        if (this.pageControl && this.pageControl.getAnimationElements) {
            return this.pageControl.getAnimationElements();
        }
        return this.pageElement;
    },
    
    
  5. Um nach der Ausführung der Animation den richtigen UI-Fokus zu setzen, müssen Sie auf jeder Seite eine Funktion einfügen. Diese Funktion wird aufgerufen, wenn die Seitenwechselanimation abgeschlossen ist.

    Fügen Sie in GroupedItems.js eine Funktion zu ui.Pages.define hinzu, die den UI-Fokus auf ein Steuerelement auf der Seite setzt.

    
    setPageFocus: function () {
        this.element.querySelector(".groupeditemslist").winControl.element.focus();
    },
    
    

    Hinweis  Wie im obigen Beispiel gezeigt, müssen Sie an das Ende dieser Funktion ein Komma setzen, außer es handelt sich um die letzte Funktion in der Liste. Bei der letzten Funktion müssen Sie das Komma vor die Funktion setzen. Diese Regel gilt auch für die folgenden Schritte.

    Fügen Sie in GroupDetail.js eine Funktion zu ui.Pages.define hinzu, die den UI-Fokus auf ein Steuerelement auf der Seite setzt.

    
    setPageFocus: function () {
        this.element.querySelector(".itemslist").winControl.element.focus();
    },
    
    

    Fügen Sie in ItemDetail.js eine Funktion zu ui.Pages.define hinzu, die den UI-Fokus auf ein Steuerelement auf der Seite setzt.

    
    setPageFocus: function () {
        this.element.querySelector(".content").focus();
    },
    
    

    Entfernen Sie auf jeder Seite (ItemDetail.js, GroupDetail.js und GroupedItems.js) aus der "ready"-Funktion die folgenden Zeilen:

    • GroupedItems.js: listView.element.focus();
    • GroupDetail.js: listView.element.focus();
    • ItemDetail.js: element.querySelector(".content").focus();
  6. Fügen Sie zuletzt die Animation für den Seitenwechsel hinzu. Fügen Sie in Navigator.js den folgenden Code am Anfang der navigated-Funktion (nicht _navigated) ein, um die Animationen in Bewegung zu setzen.
    
    
    navigated: function () {
        // Add the following two lines of code.
        var that = this;
        WinJS.UI.Animation.enterPage(that._getAnimationElements(), null).done(function () { 
            that.pageControl.setPageFocus.bind(that.pageControl); 
            });
    
        var backButton = this.pageElement.querySelector("header[role=banner] .win-backbutton");
    
        ...
    
    
    

Hinzufügen einer App-Leiste

Hier fügen wir eine App-Leiste hinzu, die Standard- und Kontextbefehle enthält, die der Benutzer ausführen kann.

Grund

Eins der Prinzipien des Microsoft-Designstils lautet "Inhalt ist wichtiger ist als Spielereien". Dies umschreibt den Ansatz, dass weniger mehr ist, d. h., dass sich nur die wichtigsten Elemente auf dem Bildschirm befinden sollten. Zur Berücksichtigung dieses Prinzips kann in Windows 8-Apps die App-Leiste eingesetzt werden. Dieses allgemeine Steuerelement ermöglicht Apps, relevante und Kontextbefehle an eine einfach zugängliche Position an den Rand des Bildschirms zu setzen. Häufig genutzte Befehle befinden sich am rechten und linken Rand und sind somit leicht mit der Hand zu erreichen. Mithilfe der App-Leiste kann der Fokus in der App-Oberfläche auf den Inhalt anstatt auf die Steuerelemente gelegt werden. Da die App-Leiste im gesamten System verwendet wird, sind Benutzer mit den Interaktionen der App-Leiste vertraut. Die Benutzerfreundlichkeit Ihrer App wird dadurch erhöht, und das gesamte System macht einen stimmigen Eindruck.

Praxis

Die Fallstudie Von der Website zur Windows Store-App zeigt, wie App-Entwickler die Unterstützung für Befehle mit einer App-Leiste neu gestalten können. Die folgende exemplarische Vorgehensweise zeigt, wie ein Foto hochgeladen wird. Auf der linken Seite ist das schrittweise Vorgehen dafür im Web dargestellt. Auf der rechten Seite ist dasselbe Szenario mit dem Microsoft-Designstil dargestellt.

Screenshots der Schritte zum Hochladen eines Fotos

In der vorherigen exemplarischen Vorgehensweise zeigt die Website den Befehl Upload your photos auf der Seite an. Die Windows Store-App verwendet dagegen die App-Leiste, um die Aktion zum Hochladen eines Fotos anzuzeigen. Der Befehl auf der App-Leiste öffnet dann die Dateiauswahl. Dies ist nur ein Beispiel dafür, wie Aktionen in Apps auf der App-Leiste platziert werden können, um mehr mit weniger zu reichen: Inhalt sollte immer wichtiger sein als Chrom.

Richtlinien

Befehle auf der App-Leiste können abhängig von der Seite, die der Benutzer anzeigt, oder dem Inhalt der App, variieren. Standardbefehle erscheinen, wenn der Benutzer auf eine Seite navigiert. Kontextbezogene (oder auswahlbezogene) Befehle erscheinen dagegen, wenn bestimmte Elemente ausgewählt sind. Kontextbefehle werden im Abschnitt Erstellen von auswählbaren Rastern und Anzeigen von Kontextbefehlen auf der App-Leiste behandelt.

Hinweis  Befehle, die der Benutzer zum Ausführen eines Workflows benötigt, wie dem Senden einer E-Mail oder dem Kauf eines Produkts, stellen Ausnahmen dar und können auf der Canvas platziert werden.

Übersicht über das Beispiel

In diesem Teil des Lernprogramms fügen wir den Seiten "Grouped Items" und "Item Detail" der Vorlage "Grid Application" eine App-Leiste hinzu. Wir fügen Befehle hinzu, mit denen der Benutzer die Größe der Bezeichnungen auf der Seite "Grouped Items" und die Größe des Textkörpers auf der Seite "Item Detail" ändern kann. Es werden nur Befehle angezeigt, die für die angezeigte Seite relevant sind, und die App-Leiste erscheint nicht auf der Seite "Group Detail".

Der folgende Screenshot zeigt die App-Leiste auf der Seite "Grouped Items" mit dem Befehl Increase label size:

Screenshot der Seite "Grouped Items" mit dem Befehl "Increase label size" auf der App-Leiste

Dieser Screenshot zeigt die App-Leiste auf der Seite "Item Detail" mit dem Befehl Increase text size:

Screenshot der Seite "Item Detail" mit dem Befehl "Increase text size" auf der App-Leiste

Implementierung

In den folgenden Schritten fügen wir eine Standard-App-Leiste mit Standardschaltflächen hinzu. Die Schaltflächen sollen in den "ready"-Funktionen auf jeder Seite ein- und ausgeblendet werden. Wir verbinden die Befehle mit Ereignislistenern, die Ereignishandler aufrufen, um die zuvor beschriebenen Funktionen auszuführen. Die App-Leiste soll auf der Seite "Group Detail" deaktiviert werden, weil diese Seite keine Befehle zum Anzeigen enthält.

  1. In Default.html ist in der Vorlage eine App-Leiste enthalten, die aber auskommentiert ist. Entfernen Sie die Kommentarzeichen, damit die App-Leiste Teil des HTML-Codes ist.

  2. Das div-Element der App-Leiste enthält eine Platzhalterschaltfläche. Ersetzen Sie diese durch die folgenden Schaltflächen.

    
    <button id="labelSize" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'labelSize', section:'global', label:'Label size', icon:'add'}"></button>
    <button id="textSize" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'textSize', section:'global', label:'Text size', icon:'add'}"></button>
    
    
  3. Fügen Sie in Default.js die folgenden Ereignislistener hinzu.

    
    
    app.addEventListener("activated", function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize your 
                // application here.
    
                // Add the following two lines of code.									
                document.getElementById("labelSize").onclick = increaseLabelSize;
                document.getElementById("textSize").onclick = increaseTextSize;
            } else {
    
            ...
    
    
    
  4. Fügen Sie in Default.js nach den anderen (Dateibereichs-)Funktionen die folgenden Funktionen hinzu.

    
    function increaseLabelSize() {
        var titles = document.getElementsByClassName("item-title");
        var subtitles = document.getElementsByClassName("item-subtitle");
        var i;
        for (i = 0; i < titles.length; i++) {
            var prevTitleAttributes = titles[i].getAttribute("style");
            var prevSubtitleAttributes = subtitles[i].getAttribute("style");
            if (prevTitleAttributes != null)
                titles[i].setAttribute("style", prevTitleAttributes + "font-size:20px");
            else
                titles[i].setAttribute("style", "font-size:20px");
            if (prevSubtitleAttributes != null)
                subtitles[i].setAttribute("style", prevSubtitleAttributes + "font-size: 14px");
            else
                subtitles[i].setAttribute("style", "font-size: 14px");
        }
    };
    
    function increaseTextSize() {
        var content = document.getElementsByClassName("item-content");
        content[0].setAttribute("style", "font-size:20px");
    };
    
    
  5. Stellen Sie sicher, dass auf jeder Seite nur die relevanten Befehle angezeigt werden.

    Fügen Sie in GroupedItems.js der Funktion ready den folgenden Code hinzu:

    
    appbar.winControl.disabled = false;
    appbar.winControl.hideCommands([textSize]);
    appbar.winControl.showCommands([labelSize]);
    
    

    Fügen Sie in GroupDetail.js der Funktion ready die folgende Codezeile hinzu.

    
    appbar.winControl.disabled = true;
    
    

    Fügen Sie in ItemDetail.js der Funktion ready den folgenden Code hinzu.

    
    appbar.winControl.disabled = false;
    appbar.winControl.hideCommands([labelSize]);
    appbar.winControl.showCommands([textSize]);
    
    

Erstellen von auswählbaren Rastern und Anzeigen von Kontextbefehlen auf der App-Leiste

Hier fügen wir ein ListView-Steuerelement (Listenansicht) hinzu, damit der Benutzer die gewünschten Elemente auswählen kann. Weitere Informationen zum ListView-Steuerelement finden Sie im HTML-ListView-Beispielpaket.

Grund

Benutzer möchten möglicherweise eine Reihe von verschiedenen Aktionen für ein Element in der Listenansicht ausführen. Dazu unterteilen wir die Aktionen in eine primäre Aktion und eine Reihe von sekundären Aktionen. Eine primäre Aktion kann durch Tippen oder Klicken auf ein Element ausgeführt werden. Damit navigiert der Benutzer normalerweise zu dem Element.

Der Benutzer führt eine sekundäre Aktion aus, indem er ein Element auswählt und auf der App-Leiste einen Befehl für das Element aufruft. Der Benutzer kann für das Element im Raster eine Vielzahl von sekundären Aktionen ausführen, wie z. B. ein Element löschen, ein Element zu "Start" hinzufügen, ein Element als Favoriten kennzeichnen, ein Element als gelesen kennzeichnen, ein Element umbenennen usw. Der Benutzer kann Elemente durch Ziehen senkrecht zur Verschiebungsrichtung, per Rechtsklick mit der Maus oder durch Drücken der Leertaste auf der Tastatur auswählen.

Praxis

Die Fallstudie: Vom iPad zur Windows 8-Windows Store-App zeigt, wie in Apps mit einem auswählbaren Raster und einer App-Leiste Kontextbefehle neu gestaltet werden können. Die folgende exemplarische Vorgehensweise zeigt, wie Fotos aus einer Fotojournal-App gelöscht werden. Auf der linken Seite ist das schrittweise Vorgehen dafür auf dem iPad dargestellt. Auf der rechten Seite ist dasselbe Szenario mit dem Microsoft-Designstil dargestellt.

Screenshots der Schritte zum Löschen von Fotos auf dem iPad und in einer Windows Store-App

In der iPad-App wechselt der Benutzer zuerst in den Auswahlmodus, und dann werden die Kontextmenüs im oberen Teil des Bildschirms angezeigt. In der Windows Store-App sind die Kontextbefehle außerhalb des Bildschirms auf der App-Leiste verborgen. In Schritt A ruft der Benutzer die App-Leiste auf. Beim ersten Aufruf sind keine Elemente im Raster ausgewählt, deshalb wird nur der Standardbefehl angezeigt. In Schritt B beginnt der Benutzer, Elemente im Raster auszuwählen. Daraufhin werden die Kontextbefehle im linken Bereich der App-Leiste angezeigt.

Beschreibung

Wenn ein Element ausgewählt wird, sollte die App-Leiste aufgerufen werden, um die Befehle anzuzeigen, die sich auf den Kontext des ausgewählten Elements beziehen. Wenn mehrere Elemente ausgewählt werden, sollte die App-Leiste angezeigt bleiben und die Befehle enthalten, die sich auf den Kontext aller ausgewählten Elemente beziehen. Wenn der Benutzer die Auswahl von Elementen aufhebt, sollte die App-Leiste ausgeblendet werden, sobald kein Element mehr ausgewählt ist.

Wenn die App-Leiste mit Kontextbefehlen angezeigt wird, sollten die Standardbefehle immer angezeigt bleiben. Standardbefehle sollten auf der rechten Seite der App-Leiste angeordnet werden und Kontextbefehle auf der linken.

Sie können festlegen, ob nur ein Element oder mehrere Elemente gleichzeitig ausgewählt werden können.

Wenn eine App angedockt ist, sollte die App ihren Status so weit wie möglich beibehalten. Wenn eine App mit angezeigter App-Leiste angedockt wird, sollte die App-Leiste weiterhin angezeigt werden. Wenn ein Element ausgewählt ist und die App angedockt wird, sollte das Element nach Möglichkeit ausgewählt bleiben.

Wenn die Seite "Grouped Items" angedockt wird, zeigt die angedockte Ansicht aber die verkleinerte Ansicht der Gruppen. Daher ist es nicht möglich, die Auswahl einzelner Elemente im angedockten Zustand anzuzeigen. Da einzelne Elemente nicht angezeigt werden können, sollten alle Kontextbefehle für zuvor ausgewählte Elemente ausgeblendet werden.

Übersicht über das Beispiel

In diesem Abschnitt des Lernprogramms legen wir für die Elemente im Raster den Modus "auswählbar" fest. In diesem Modus können mehrere Elemente gleichzeitig ausgewählt werden. Nach der Auswahl eines Elements wird sofort die App-Leiste aufgerufen und der Kontextbefehl zum Kennzeichnen des Elements als gelesen angezeigt. Dieser Befehl zeigt die Titel aller ausgewählten Elemente grau an. Wird die Auswahl des Elements aufgehoben, wird die App-Leiste ausgeblendet. Wenn der Kontextbefehl zum Kennzeichnen von Elementen als gelesen ausgewählt wird, wird die Aktion ausgeführt, die Auswahl der Elemente aufgehoben und die App-Leiste ausgeblendet.

Dieser Screenshot zeigt die Seite "Grouped Items" mit mehreren ausgewählten Elementen und einer App-Leiste mit dem Kontextbefehl Mark as read und dem Standardbefehl Increase label size:

Screenshot der Seite "Grouped Items" mit mehreren ausgewählten Elementen und einer App-Leiste mit einem Kontextbefehl und einem Standardbefehl

Implementierung

In den folgenden Schritten aktivieren wir die Auswahl von Rasterelementen. Wir fügen auch einen Ereignislistener hinzu, der eine App-Leiste anzeigt, die Kontextbefehle für das ausgewählte Element enthält.

  1. Legen Sie in GroupedItems.html die GridView-Elemente als auswählbar fest, indem Sie den Auswahlmodus des ListView-Steuerelements von 'none' in 'multi' ändern.

    
    data-win-options="{ selectionMode: 'multi' }"
    
    
    
  2. Fügen Sie in Default.html den folgenden App-Leisten-Kontextbefehl nach den anderen Befehlen der App-Leiste hinzu.

    
    <button id="markItem" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'markItem', section:'selection', label:'Mark as read', icon:'accept'}"></button>
    
    
  3. Fügen Sie in Default.js im app.onactivated-Handler die folgenden Ereignislistener nach den anderen Ereignislistenern der App-Leiste hinzu.

    
    document.getElementById("markItem").onclick = markItem;
    
    
  4. Fügen Sie in Default.js die Funktion markItem nach den anderen Befehlsfunktionen der App-Leiste hinzu.

    
    function markItem() {
        var titles = document.getElementsByClassName("item-title");
        var subtitles = document.getElementsByClassName("item-subtitle");
        var listView = document.querySelector(".groupeditemslist").winControl;
        var items = listView.selection.getItems();
        var i;
        for (i = 0; i < items._value.length; i++) {
            var key = parseFloat(items._value[i].key);
            if (titles[0].innerHTML != "") {
                if (key == 0) continue;
                key--;
            }
            var prevTitleAttributes = titles[key].getAttribute("style");
            var prevSubtitleAttributes = subtitles[key].getAttribute("style");
            if (prevTitleAttributes != null)
                titles[key].setAttribute("style", prevTitleAttributes + "color:gray");
            else
                titles[key].setAttribute("style", "color:gray");
    
            if (prevSubtitleAttributes != null)
                subtitles[key].setAttribute("style", prevSubtitleAttributes + "color:gray");
            else
                subtitles[key].setAttribute("style", "color:gray");
        }
        listView.selection.clear();
    }
    
    
  5. Ändern Sie in ItemDetail.js den Aufruf der hideCommands-Funktion, damit die Schaltfläche Mark Item auch ausgeblendet wird.

    
    appbar.winControl.hideCommands([labelSize, markItem]);
    
    
  6. Ändern Sie in GroupedItems.js den Aufruf der hideCommands-Funktion, damit die Schaltfläche Mark Item auch ausgeblendet wird.

    
    appbar.winControl.hideCommands([textSize, markItem]);
    
    
  7. Fügen Sie in GroupedItems.js die folgenden Funktionen vor der ui.Pages.define-Funktion ein. Diese Funktionen blenden die App-Leiste programmgesteuert ein und aus.

    
    function showAppBar(currentItem) {
        // Get the app bar.
        var element = document.activeElement;
        var appbar = document.getElementById("appbar");
        
        // Keep the app bar open after it's shown.
        appbar.winControl.sticky = true;
     
        // Set the app bar context.
        showItemCommands();
    
        // Show the app bar.
        appbar.winControl.show();
    
        // Return focus to the original item which invoked the app bar.
        if (element != null) element.focus();
    }
    
    function hideAppBar() {
        var element = document.activeElement;
        var appbar = document.getElementById("appbar");
        appbar.winControl.sticky = false;
        appbar.winControl.hide();
        hideItemCommands();
        if (element != null) element.focus();
    }
    
    
  8. Fügen Sie in GroupedItems.js die folgenden Funktionen nach den vorhergehenden Funktionen hinzu. Die folgenden Funktionen blenden die Befehle der App-Leiste ein und aus.

    
    function showItemCommands() {
        appbar.winControl.showCommands([markItem]);
    }
    
    function hideItemCommands() {
        appbar.winControl.hideCommands([markItem]);
    }
    
    
  9. Fügen Sie in GroupedItems.js Code hinzu, um die App-Leiste programmgesteuert zu öffnen und zu schließen. Fügen Sie in die ready-Funktion einen Ereignishandler für die geänderte Auswahl für das ListView-Steuerelement auf der Seite ein.

    
    listView.onselectionchanged = this.itemSelected.bind(this);
    
    
  10. Fügen Sie in GroupedItems.js die folgenden Funktionen zur Behandlung der Auswahl in dem ListView-Steuerelement hinzu.

    
    itemSelected: function (eventObject) {
        var listView = document.querySelector(".groupeditemslist").winControl;
    
        // Check for selection.
        if (listView.selection.count() === 0) {
            hideAppBar();
        } else {
            listView.selection.getItems().then(function (items) {
                showAppBar(items[0]);
           	});
        }
    },
    
    
  11. Fügen Sie in GroupedItems.js einen Aufruf der hideItemCommands-Funktion aus updateLayout hinzu. Dieser Aufruf blendet den Kontextbefehl auf der App-Leiste aus, wenn die App angedockt ist. Der Kontextbefehl sollte nicht angezeigt werden, wenn die App angedockt ist, da das Element im angedockten Zustand nicht ausgewählt angezeigt wird.

    
    updateLayout: function (element, viewState, lastViewState) {
        /// <param name="element" domElement="true" />
        /// <param name="viewState" value="Windows.UI.ViewManagement.ApplicationViewState" />
        /// <param name="lastViewState" value="Windows.UI.ViewManagement.ApplicationViewState" />
    
        var listView = element.querySelector(".groupeditemslist").winControl;
        if (lastViewState !== viewState) {
            if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
                var handler = function (e) {
                    listView.removeEventListener("contentanimating", handler, false);
                    e.preventDefault();
                }
            listView.addEventListener("contentanimating", handler, false);
    
            // Add the following five lines of code.        
            this.initializeLayout(listView, viewState);
            hideItemCommands();
            if (viewState === appViewState.snapped)
                listView.selectionMode = "none";
            else
                listView.selectionMode = "multi";
            }
        }
    }
    
    

Hinzufügen des SemanticZoom-Steuerelements

In diesem Abschnitt fügen wir ein SemanticZoom-Steuerelement hinzu, um eine semantische Ansicht für die Elemente in dem ListView-Raster bereitzustellen. Jedes Element in der verkleinerten Ansicht entspricht einer Gruppe von Elementen im Raster.

Screenshot mit Elementen im ListView-Raster

Weitere Informationen zum SemanticZoom-Steuerelement finden Sie im HTML-Beispiel für ListView-Gruppierung und SemanticZoom.

Grund

Die Vorlage "Grid Application" verwendet ein hierarchisches Navigationsmuster. Das bedeutet, dass interessanter Inhalt aus jedem Hauptabschnitt einer App auf die Startseite hochgestuft werden kann. Im Laufe der Zeit kann diese Startseite anwachsen und viele Gruppen oder Elemente enthalten. Obwohl der Benutzer die Ansicht verschieben kann, um den Inhalt zu durchsuchen, sollten Sie einen semantischen Zoom hinzufügen, damit der Benutzer schnell zu verschiedenen Abschnitten auf der Seite wechseln kann.

Mit dem SemanticZoom-Steuerelement können Benutzer aus dem Raster eine semantische, anstatt einer optischen Ansicht ihrer Gruppen verkleinert anzeigen. In dieser Ansicht können Benutzer eine Gruppe auswählen, die dann wieder vergrößert angezeigt wird. Benutzer können mit dem semantischen Zoom große Gruppen von Elementen ohne Verschieben anzeigen, und sie erhalten außerdem einen Gesamtüberblick über die Gruppen im Raster.

Die verkleinerte Ansicht kann auch Metainformationen zu den Gruppen enthalten, um Benutzer zu interessanten Abschnitten auf der Seite zu leiten. In der verkleinerten Ansicht könnte zum Beispiel die Anzahl der Elemente in der Gruppe angezeigt werden, die eine Zahlenüberlagerung haben.

Praxis

Die Fallstudie: Vom iPad zur Windows 8-Windows Store-App zeigt, wie Benutzer in Apps mit dem semantischen Zoom schnell zwischen Gruppen von Elementen wechseln können. Die folgende exemplarische Vorgehensweise zeigt, wie der semantische Zoom zum Anzeigen einer semantischen Ansicht von Gruppen verwendet wird. Auf der linken Seite ist das schrittweise Vorgehen dafür auf dem iPad dargestellt. Auf der rechten Seite ist dasselbe Szenario mit dem Microsoft-Designstil dargestellt.

Screenshot mit einem Vergleich des Wechselns zwischen Gruppen von Elementen mit dem semantischen Zoom und dem iPad

In der iPad-App kann der Benutzer auf die Schaltfläche Years auf der oberen Navigationsleiste tippen, um ein Popup mit einer Liste von Jahren anzuzeigen. In der Windows Store-App kann der Benutzer über eine Zusammendrückbewegung den semantischen Zoom zum Verkleinern der Gruppen verwenden. In diesem Beispiel wurde die semantische Ansicht so konfiguriert, dass sie die Anzahl der Kommentare in der Gruppe "Comments" und die Monate, für die Fotos vorhanden sind, anzeigt.

Implementierung

In den folgenden Schritten fügen wir der Seite "Grouped Items" den Container für den semantische Zoom und eine Vorlage für die semantischen Zoomgruppen hinzu.

Wir verbinden die semantischen Gruppen mit der Gruppendatenquelle und wenden Cascading Style Sheets (CSS) an, um die Gruppen entsprechend zu formatieren.

  1. Suchen Sie in GroupedItems.html im "main content"-Abschnitt das ListView-Steuerelement:

    
    <section aria-label="Main content" role="main">
        <div class="groupeditemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'multi' }"></div>
    </section>
    
    

    Im Grunde ist das SemanticZoom-Steuerelement ein Container, der abhängig vom aktuellen Skalierungsfaktor eins seiner untergeordneten Elemente anzeigt. Hier fügen wir das SemanticZoom-Steuerelement als "Stamm" des Abschnitts und zwei ListView-Steuerelemente in das SemanticZoom-Steuerelement ein.

    Ändern Sie zuerst den "main content"-Abschnitt wie folgt:

    
    <section aria-label="Main content" role="main">
        <div class="sezoDiv" data-win-control="WinJS.UI.SemanticZoom" data-win-options="{ zoomFactor: 0.5, initiallyZoomedOut: false }">
            <div class="groupeditemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{selectionMode: 'multi'}"></div>
            <div class="groupeditemslistZoomOut groupeditemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{selectionMode: 'none'}"></div>
        </div>
    </section>
    
    
    
    • Sie haben nun Steuerelemente auf der Seite eingerichtet. Als Nächstes müssen Sie Code hinzufügen, der sicherstellt, dass der richtige Inhalt angezeigt wird.

      Ändern Sie in GroupedItems.js die Funktion ready wie folgt. Im Wesentlichen wird dabei einfach der Code dupliziert, der bereits für die erste Listenansicht vorhanden ist, und für die neue verkleinerte Listenansicht übernommen.

      
      ready: function (element, options) {
          var listView = element.querySelector(".groupeditemslist").winControl;
      
          // Add the following two lines of code.
          var listViewZoomOut = element.querySelector(".groupeditemslistZoomOut").winControl;
          var semanticZoom = element.querySelector(".sezoDiv").winControl;
      
          listView.groupHeaderTemplate = element.querySelector(".headerTemplate");
          listView.itemTemplate = element.querySelector(".itemtemplate");
      
          // Add the following line of code.
          listViewZoomOut.itemTemplate = element.querySelector(".itemtemplate");
      
          listView.oniteminvoked = this.itemInvoked.bind(this);
      
          // Add the following line of code.
          listViewZoomOut.oniteminvoked = this.groupInvoked.bind(this)
      
          // Change the second and third parameters of the following call as shown.
          this.initializeLayout(listView,listViewZoomOut, semanticZoom, appView.value);
      },
      
      
  2. Aktualisieren Sie in GroupedItems.js die inializeLayout-Funktion, damit sie die zweite Listenansicht akzeptiert. Die Funktion behandelt auch das SemanticZoom-Steuerelement in der angedockten Ansicht.
    
    
    // Add the listViewZoomOut and semanticZoom parameters as shown.
    initializeLayout: function (listView, listViewZoomOut, semanticZoom, viewState) {
        /// <param name="listView" value="WinJS.UI.ListView.prototype" />
    
        if (viewState === appViewState.snapped) {
            listView.itemDataSource = Data.groups.dataSource;
            listView.groupDataSource = null;
            listView.layout = new ui.ListLayout();
    
            // Add the following three lines of code.
            semanticZoom.zoomedOut = false;
            semanticZoom.forceLayout();
            semanticZoom.locked = true;
        } else {
            listView.itemDataSource = Data.items.dataSource;
            listView.groupDataSource = Data.groups.dataSource;
            listView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });
    
            // Add the following four lines of code.
            listViewZoomOut.itemDataSource = Data.groups.dataSource;
            listViewZoomOut.layout = new ui.GridLayout({ maxRows: 1 });
            semanticZoom.forceLayout();
            semanticZoom.locked = false;
        }
    },
    
    
  3. Aktualisieren Sie in GroupedItems.js die updateLayout-Funktion, um das neue ListView-Steuerelement so zu konfigurieren, dass es die Liste der Gruppen anzeigt, die die gruppierte Datenquelle verwenden.

    
    updateLayout: function (element, viewState, lastViewState) {
        /// <param name="element" domElement="true" />
        /// <param name="viewState" value="Windows.UI.ViewManagement.ApplicationViewState" />
        /// <param name="lastViewState" value="Windows.UI.ViewManagement.ApplicationViewState" />
        var listView = element.querySelector(".groupeditemslist").winControl;
    
        // Add the following two lines of code.
        var listViewZoomOut = element.querySelector(".groupeditemslistZoomOut").winControl;
        var semanticZoom = element.querySelector(".sezoDiv").winControl;
    
        if (lastViewState !== viewState) {
            if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
                var handler = function (e) {
                    listView.removeEventListener("contentanimating", handler, false);
                        e.preventDefault();
                }
                listView.addEventListener("contentanimating", handler, false);
    
                // Add the listViewZoomOut and semanticZoom parameters as shown.
                this.initializeLayout(listView, listViewZoomOut, semanticZoom, viewState);
            }
    
            // Add the following four lines of code.
            if (lastViewState === appViewState.snapped) {
                semanticZoom.zoomedOut = true;
                semanticZoom.forceLayout();
            }
        }
    },
    
    
  4. Fügen Sie in GroupedItems.js die folgende Funktion hinzu, um das Tippen oder Klicken auf ein Element in der verkleinerten Ansicht zu behandeln.

    
    groupInvoked: function (args) {
       	var group = Data.groups.getAt(args.detail.itemIndex);
        nav.navigate("/pages/groupDetail/groupDetail.html", { groupKey: group.key });
    },
    
    
  5. Jetzt ist es an der Zeit, CSS hinzuzufügen, um die Elemente ansprechend zu gestalten.

    Hinweis  Verwenden Sie ein CSS-Raster mit nur einer Zeile und einer Spalte, um die Richtlinien für die Benutzerfreundlichkeit (UX) für den semantischen Zoom zu implementieren. In dieses Raster werden die Inhalte der Kopfzeile und des Abschnitts eingefügt, damit sie überlappt werden können. Das bedeutet, dass das SemanticZoom-Steuerelement den gesamten Bildschirm, einschließlich des Seitenkopfs, ausfüllen kann.

    Fügen Sie in GroupedItems.css die folgenden Stile hinzu, damit das SemanticZoom-Steuerelement die verfügbare Fläche auf dem Bildschirm einnimmt. Dadurch ändern Sie das Layout des gesamten Fragments, sodass der Inhalt des Seitenkopfs unter den Abschnittsinhalt, der den SemanticZoom-Block ("sezoDiv") enthält, gesetzt wird.

    
    .groupeditemspage {
        /* Change the display type to have only one row */
        -ms-grid-rows: 1fr;
        display: -ms-grid;
        height: 100%;
        width: 100%;
    }
    
        .groupeditemspage header[role=banner] {
            /* Position this at the top of the screen */
            -ms-grid-row: 1;    
            -ms-grid-columns: 120px 1fr;
            display: -ms-grid;
        }
    
        .groupeditemspage section[role=main] {
            /* Position this at the top of the screen */
            -ms-grid-row: 1;
            height: 100%;
            width: 100%;
        }
    
    .sezoDiv
     {
        height: 100%;
        width: 100%;
    }
    
    
  6. Als Nächstes müssen einige Probleme gelöst werden, die auftreten, weil das SemanticZoom-Steuerelement mit einem negativen Rand positioniert wurde.

    Um den Seitenkopf anzuzeigen, verschieben Sie die Listenansicht um 133 Pixel nach unten.

    
    .groupeditemspage .groupeditemslist .win-horizontal.win-viewport .win-surface {
        margin-left: 45px;
        /* Add the following line. */
        margin-top: 133px;
        margin-bottom: 60px;
    }
    
    /* Add the following lines near the end of the CSS file. */
    .groupeditemspage .groupeditemslistZoomOut .win-horizontal.win-viewport .win-surface {
        margin-left: 116px;
        margin-top: 133px;
    }
    
    
  7. Nun müssen Sie das Element formatieren, damit es in der verkleinerten Ansicht angezeigt wird. Fügen Sie den folgende CSS-Code hinzu. Achten Sie dabei darauf, dass er nach der groupeditemslist.win-item-Definition deklariert wird, die bereits Teil der Datei ist:

    
    
        .groupeditemspage .groupeditemslistZoomOut .win-item {
            -ms-grid-columns: 1fr;   
            -ms-grid-rows: 1fr 90px;
            display: -ms-grid;
            height: 250px;
            width: 250px;
        }
    .groupeditemspage .groupeditemslistZoomOut .win-item {
        -ms-grid-rows: 1fr 180px;
        display: -ms-grid;
        height: 580px;
        width: 250px;
    }
    
    
  8. Da die vorgenommenen Änderungen Auswirkungen auf die angedockte und die Hochformatansichten haben, müssen Sie nun diese Ansichten korrigieren. Fügen Sie dem @media screen and (-ms-view-state: snapped)-Abschnitt von GroupedItems.css alle folgenden Stile hinzu.

    Fügen Sie den folgenden Stil hinzu, um den Kopfzeilenabschnitt neu auszurichten.

    
    .groupeditemspage header[role=banner] {
        -ms-grid-columns: auto 1fr;
        margin-left: 20px;
    }
    
    

    Fügen Sie der Oberfläche einen oberen Rand hinzu, damit die Liste nicht den Titel verdeckt.

    
    .groupeditemspage .groupeditemslist .win-vertical.win-viewport .win-surface {
        margin-bottom: 30px;
        /* Add the following line. */
        margin-top: 133px;
        margin-left: 6px;
    }
    
    
  9. Die Probleme in der angedockten Ansicht sind damit behoben. Als Nächstes muss die Hochformatansicht aktualisiert werden.

    Fügen Sie in GroupedItems.css dem @media screen and (-ms-view-state: fullscreen-portrait)-Abschnitt den folgenden Stil hinzu.

    
    
    .groupeditemspage .groupeditemslistZoomOut .win-horizontal.win-viewport .win-surface {
        margin-left: 96px;
    }
    
    

Darstellen von unterschiedlich großen Elementen in dem Raster

Ein Raster mit Elementen in unterschiedlicher Größe ist eine hervorragende Möglichkeit, das Raster anzupassen und eine App von anderen abzuheben. Mit unterschiedlich großen Elementen können Sie in einer App bestimmte Elemente hervorheben, indem Sie wichtigere Elemente größer darstellen.

Elemente mit unterschiedlicher Größe können auch unterschiedliche Vorlagen verwenden. Sie können zum Beispiel Bilder mit einer Textüberlagerung für größere Elemente anzeigen und nur Text für kleinere Elemente.

Praxis

Die Fallstudie: Vom iPad zur Windows 8-Windows Store-App zeigt, wie in Apps mit unterschiedlich großen Elementen und verschiedenen Vorlagen die Rastervorlage angepasst und das Branding der App unterstützt werden kann. In den folgenden Beispielen wird eine Startseite einer iPad-App mit einer Startseite einer Windows Store-App verglichen, in der die Rastervorlage angepasst wurde.

Screenshots zum Vergleich der Startseite einer iPad-App mit der einer Windows Store-App

In der iPad-App wird der gesamte Inhalt in einem einheitlichen Raster mit Bildern präsentiert. In der Windows Store-App werden Elemente in unterschiedlichen Größen mit verschiedenen Vorlagen präsentiert. Die erste Gruppe enthält Elemente mit einem kleinen Bild und beschreibendem Text daneben. Die übrigen Gruppen bestehen aus großen und kleinen Bildern, die mit Texten in unterschiedlichen Größen überlagert sind.

Übersicht über das Beispiel

Im Beispiel in diesem Abschnitt wird das Raster auf der Seite "Grouped Items" so angepasst, dass Elemente in drei unterschiedlichen Größen verwendet werden können. Das Standardraster verwendet Elemente mit der Größe 200 x 200 Pixel. In diesem Beispiel werden Elemente mit der Größe 310 x 310 Pixel, 310 x 150 Pixel und 150 x 150 Pixel verwendet. Für die größeren Elemente wird das Standardbild mit einem Textüberlagerungslayout verwendet, und die kleineren Elemente enthalten nur Text.

Hier ist die Seite "Grouped Items" mit den drei unterschiedlichen Elementgrößen:

Screenshot der Seite "Grouped Items" mit den drei unterschiedlichen Elementgrößen

Implementierung

Für die gewünschte Benutzerfreundlichkeit dieses Szenarios müssen Sie eine eigene Renderingfunktion für die Listenansicht definieren. Außerdem müssen Sie für die unterschiedlich großen Elemente CSS hinzufügen.

Für die Renderingfunktion lesen wir eine vordefinierte HTML-Vorlage ein, anstatt das Rendering in der Funktion manuell zu erstellen, aber beide Methoden sind in Ordnung.

Achten Sie bei der Auswahl unterschiedlicher Elementgrößen darauf, dass die Größen der folgenden Formel entsprechen: itemSize = ((slotSize + margin) x multiplier) – margin.

  1. Fügen Sie in GroupedItems.html die folgende Elementvorlage hinzu.

    
    <div class="multisizebaseitemtemplate" data-win-control="WinJS.Binding.Template">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
        </div>
    </div>
    
    
  2. Fügen Sie in GroupedItems.js die folgende Funktion vor der Seitendefinition (ui.Pages.define) hinzu.

    
    function multisizeItemTemplateRenderer(itemPromise) {
        return itemPromise.then(function (currentItem) {
            var content;
            // Grab the default item template used on the groupeditems page.
            content = document.getElementsByClassName("multisizebaseitemtemplate")[0];
            var result = content.cloneNode(true);
    
            // Change the CSS class of the item depending on the group, then set the size in CSS.
            switch (currentItem.groupKey) {
                case "group1":
                    {
                        // For the first item, use the largest template.
                        if (currentItem.index == 0) {
                            result.className = "largeitemtemplate"
                        }
                        else {
                            result.className = "mediumitemtemplate"
                        }
                        break;
                    }
                case "group2":
                    {
                        result.className = "mediumitemtemplate"
                        break;
                    }
                default:
                    {
                        result.className = "smallitemtemplate"
                    }
            }
            // Because we used a WinJS template, we need to strip off some attributes 
            // for it to render.
            result.attributes.removeNamedItem("data-win-control");
            result.attributes.removeNamedItem("style");
            result.style.overflow = "hidden";
    
            // Because we're doing the rendering, we need to put the data into the item.
            // We can't use databinding.
            result.getElementsByClassName("item-image")[0].src = currentItem.data.backgroundImage;
            result.getElementsByClassName("item-title")[0].textContent = currentItem.data.title;
            result.getElementsByClassName("item-subtitle")[0].textContent = currentItem.data.subtitle;
            return result;
        });
    }
    
    
  3. Fügen Sie in GroupedItems.js die folgende groupInfo-Funktion ebenfalls außerhalb der Seitendefinition hinzu. Diese Funktion weist das ListView-Steuerelement an, in der Ansicht unterschiedlich große Elemente zu verwenden und gibt die "Basisgröße" der Elemente an. Die Basisgröße ist die Größe des kleinsten in der Liste angezeigten Elements. Andere Elemente müssen ein Vielfaches dieser Größe sein, damit die Layouts richtig funktionieren.

    
    function groupInfo() {
        return {
            enableCellSpanning: true,
            cellWidth: 150,
            cellHeight: 150
        };
    }
    
    
  4. Jetzt müssen diese neuen Funktionen mit den ListView-Steuerelementen auf der Seite "Grouped Items" verbunden werden. Weil in der angedockten Ansicht keine unterschiedlich großen Elemente verwendet werden sollen, müssen Sie die Art und Weise, wie Vorlagen für den Listenansichtscode angewendet werden, in den Funktionen ready und updateLayout ändern.

    Ändern Sie in GroupedItems.js die initializeLayout-Funktion so, dass auf der Seite in der angedockten Ansicht eine flache Liste von Gruppen angezeigt wird. In der Querformatansicht werden aber unterschiedlich große Elemente verwendet.

    
    
    // Add the itemTemplate parameter as shown.
    initializeLayout: function (listView, listViewZoomOut, semanticZoom, viewState, itemTemplate) {
        /// <param name="listView" value="WinJS.UI.ListView.prototype" />
    
        if (viewState === appViewState.snapped) {
            listView.itemDataSource = Data.groups.dataSource;
            listView.groupDataSource = null;
    
            // Add the followign line of code.
            listView.itemTemplate = itemTemplate;
    
            listView.layout = new ui.ListLayout();
            semanticZoom.zoomedOut = false;
            semanticZoom.forceLayout();
            semanticZoom.locked = true;
        } else {
            listView.itemDataSource = Data.items.dataSource;
            listView.groupDataSource = Data.groups.dataSource;
    
            // Add the following two lines of code.
            listView.itemTemplate = multisizeItemTemplateRenderer;
            listView.layout = new ui.GridLayout({ groupInfo: groupInfo, groupHeaderPosition: "top" });
    
            listViewZoomOut.itemDataSource = Data.groups.dataSource;
            listViewZoomOut.layout = new ui.GridLayout({ maxRows: 1 });
            semanticZoom.forceLayout();
            semanticZoom.locked = false;
        }
    },
    
    

    Entfernen Sie die Zeile, in der dem ListView-Steuerelement eine Elementvorlage zugewiesen wird, und nehmen Sie die Änderungen vor, die in den Kommentaren im folgenden Code angegeben sind.

    
    ready: function (element, options) {
        var listView = element.querySelector(".groupeditemslist").winControl;
        var listViewZoomOut = element.querySelector(".groupeditemslistZoomOut").winControl;
        var semanticZoom = element.querySelector(".sezoDiv").winControl;
    
        // Add the following line of code.
        var itemTemplate = element.querySelector(".itemtemplate");
    
        listView.groupHeaderTemplate = element.querySelector(".headerTemplate");
    
        listView.oniteminvoked = this.itemInvoked.bind(this);
        listViewZoomOut.itemTemplate = element.querySelector(".itemtemplate");
        listViewZoomOut.oniteminvoked = this.groupInvoked.bind(this)
    
        // Change the last argument of the following function to itemTemplate.
        this.initializeLayout(listView,listViewZoomOut, semanticZoom, appView.value, itemTemplate);
        listView.element.focus();
     },
    
    // This function updates the page layout in response to viewState changes.
    updateLayout: function (element, viewState, lastViewState) {
        /// <param name="element" domElement="true" />
        /// <param name="viewState" value="Windows.UI.ViewManagement.ApplicationViewState" />
        /// <param name="lastViewState" value="Windows.UI.ViewManagement.ApplicationViewState" />
        var listView = element.querySelector(".groupeditemslist").winControl;
        var listViewZoomOut = element.querySelector(".groupeditemslistZoomOut").winControl;
        var semanticZoom = element.querySelector(".sezoDiv").winControl;
    
        // Add the following line of code.
        var itemTemplate = element.querySelector(".itemtemplate");
    
        if (lastViewState !== viewState) {
            if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
                var handler = function (e) {
                    listView.removeEventListener("contentanimating", handler, false);
                    e.preventDefault();
                }
                listView.addEventListener("contentanimating", handler, false);
    
                // Change this line to pass through the item template.
                this.initializeLayout(listView, listViewZoomOut, semanticZoom,viewState,itemTemplate);
            }
            if (lastViewState === appViewState.snapped) {
                semanticZoom.zoomedOut = true;
                semanticZoom.forceLayout();
            }
        }
    },
    
    
  5. Der Code für diesen Bereich ist jetzt fertig. Als Nächstes müssen Sie den Elementen Formate zuweisen.

    Fügen Sie in GroupedItems.css die folgenden Formate für die kleinen, mittleren und großen Elementvorlagen hinzu.

    
    
    .groupeditemspage .smallitemtemplate
    {
        width: 150px;
        height: 150px;
        overflow: hidden;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 0px 1fr;
        display: -ms-grid;
    }
    .smallitemtemplate .item-overlay .item-title {
        position: absolute; 
        padding-right: 6px;
        bottom: 10px; 
        font-size: 16pt;
    }
    .smallitemtemplate .item-overlay .item-subtitle {
        display: none;
    }
    .groupeditemspage .mediumitemtemplate
    {
        width: 310px;
        height: 150px;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 60px;
        display: -ms-grid;
        overflow: hidden;
    }       
    .groupeditemspage .largeitemtemplate
    {
        width: 310px;
        height: 310px;
        overflow: hidden;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
    }
    
    
    
  6. Entfernen Sie das folgende CSS, damit es Ihre Formatierung nicht überschreibt.

    
    .groupeditemspage .groupeditemslistZoomOut .win-item {
        -ns-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
        height: 250px;
        width: 250px;
    }
    
    

    Hinweis  Wenn Sie den SemanticZoom-Abschnitt nicht implementiert haben, löschen Sie das obige CSS aus der Datei, um zu verhindern, dass es das CSS überschreibt, das Sie gerade für die unterschiedlich großen Elemente hinzugefügt haben.

 

 

Anzeigen:
© 2014 Microsoft. Alle Rechte vorbehalten.