Share via

So wird's gemacht: Branding Ihrer ListView

  • 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 Branding für Windows Store-Apps wurde erläutert, wie Sie das Wesen Ihrer Marke in der App verkörpern und gleichzeitig die Microsoft-Entwurfsprinzipien einhalten. Sieben Aspekte des Markendesigns wurden behandelt: Farbe, Symbole, Bilder, Raster, Layout, Logo und Typografie.

In diesem Thema werden wir uns damit beschäftigen, wie Sie die Startseite Ihrer App mit den folgenden Techniken anpassen können:

In diesem Thema wird gezeigt, wie Sie die Visual Studio-Vorlage Raster-App ändern, um Startseiten wie die folgenden zu erstellen:

Startseite der Contoso Bakery

Contoso Food Truck-Beispiel

Voraussetzungen

Wann sollte eine ListView verwendet werden?

Als Erstes müssen Sie entscheiden, welche Steuerelemente Sie auf Ihrer Startseite verwenden möchten. Eine Liste von HTML-Steuerelementen und Steuerelementen der Windows-Bibliothek für JavaScript finden Sie unter Steuerelementliste.

Wenn Sie eine Datenauflistung als Reihe von Elementen anzeigen möchten (z. B. eine E-Mail-Liste, Suchergebnisse oder einen Katalog erhältlicher Artikel), verwenden Sie eine ListView.

Die ListView zeigt Elemente in einem Listen- oder Rasterlayout an. Die meisten Startseiten, auf denen Elemente angezeigt werden, verwenden das Rasterlayout des ListView-Steuerelements, da Überlauf und horizontaler Bildlauf bei diesem Layout automatisch erfolgen. Sie können die Elemente in der ListView anpassen, indem Sie die zum Anzeigen der Elemente verwendete itemTemplate ändern.

CSS3-Rasterlayout und Windows 8-Rastersystem

Das Rastersystem ist ein wichtiger Bestandteil des Windows 8-Erscheinungsbilds. Es sorgt dafür, dass unterschiedliche Apps und Features eine visuelle Einheit bilden. Beim Rasterlayout können Sie den Raum für Elemente auf der Seite unterteilen und Elemente mühelos am Raster ausrichten.

In unseren Beispielen verwenden wir das CSS3-Rasterlayout (Cascading Stylesheets, Level 3), das sich vom Rasterlayout des ListView-Steuerelements unterscheidet. Das CSS3-Rasterlayout ist ein Universalrasterformat für unterschiedlichste Verwendungszwecke, während die ListView nur zum Anzeigen von Datenauflistungen dient. Mit dem CSS3-Rasterlayout können Sie Elemente am Raster ausrichten und so ein sauberes und übersichtliches App-Layout schaffen.

Contoso French Bakery-Beispiel

Werfen wir nun einen Blick auf die Visual Studio-Standardvorlage Grid App und vergleichen sie mit dem Beispiel der Contoso French Bakery aus Branding für Windows Store-Apps. Dieser Screenshot zeigt die Vorlage Grid App:

App mit der Vorlage "Rasteranwendung"

Vergleichen wir dies mit der Startseite der Contoso French Bakery aus Branding für Windows Store-Apps. Die Contoso French Bakery verwendet für ihre Elemente ein angepasstes Layout, das die Marke Contoso in den Vordergrund rückt.

Startseite der Contoso Bakery

Obwohl die Startseite der Contoso French Bakery ganz anders aussieht als die Vorlage Grid App, sind nur einige wenige HTML-/CSS-Änderungen nötig, um dieses individuelle Erscheinungsbild zu schaffen. In diesem Beispiel gehen wir davon aus, dass die Elemente interaktiv sind und der Benutzer zu einer Gruppendetailseite mit einer Auswahl von Macarons, Cupcakes usw. gelangt, wenn er ein Element auswählt. Für diese Startseite eignet sich eine ListView mit dem Rasterlayout.

Um die Vorlage Grid App in die Contoso-Startseite zu verwandeln, müssen wir die Größe der Elementvorlagen ändern, die Bilder vergrößern und Elementbeschreibungen hinzufügen.

  1. Erstellen Sie in Visual Studio eine neue App mit der Vorlage Grid App.

  2. Aktualisieren Sie die HTML-itemtemplate in groupedItems.html. Die wichtigste Änderung gegenüber der standardmäßigen itemtemplate ist ein drittes Überschriftelement, das hinzugefügt wird, um die einzelnen Elementbeschreibungen anzuzeigen.

        <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <img class="item-image" src="#" 
                 data-win-bind="src: backgroundImage; alt: title" />
            <div class="item-text">
                <h3 class="item-title" data-win-bind="textContent: title"></h3>
                <h6 class="item-subtitle win-type-ellipsis" 
                    data-win-bind="textContent: subtitle"></h6>
                <h6 class="item-detail" data-win-bind="textContent: description"></h6>
            </div>
        </div>
    </div>

  3. Jetzt aktualisieren wir die Formate in groupedItems.css. Die wichtigsten Änderungen an groupedItems.css sind das Verschieben des Text-div-Elements unter das Bild, anstatt es dem Bild zu überlagern, und das Hinzufügen einer weiteren Rasterzeile für das Detailelement.

    .groupeditemspage .groupeditemslist .win-horizontal.win-viewport .win-surface {
        margin-bottom: 60px;
        /* Decreased margin */
        margin-left: 35px;
        margin-right: 115px;
}   
.groupeditemspage .groupeditemslist .item {
       /* Changed row size and item size, centered text and changed text color */ 
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 1280px;
        display: -ms-grid;
        height: 600px500px;
        width: 350px;
        text-align: center;
        color: rgb(160,160,160);

    }

        .groupeditemspage .groupeditemslist .item .item-image {
               /* Increased image size and altered padding */
            height: 340px;
            width: 340px;
            padding: 0px 5px 20px 5px;
        }

        .groupeditemspage .groupeditemslist .item .item-text {
            /* Added a row to the grid and changed height and padding */
            -ms-grid-row: 2;
            -ms-grid-rows: 30px 21px 1fr;
            display: -ms-grid;
            padding: 30px 15px 2px 15px;
            height: 150px;
        }

            .groupeditemspage .groupeditemslist .item .item-text .item-title {
                /* Changed font color */
                -ms-grid-row: 1;
                overflow: hidden;
                font-size: 16pt;
                color: rgb(200,200,200);
            }

            .groupeditemspage .groupeditemslist .item .item-text .item-subtitle {
                -ms-grid-row: 2;
            }
            .groupeditemspage .groupeditemslist .item .item-text .item-detail {
                /* All new CSS for the detail text */
                -ms-grid-row: 3;
                overflow:hidden;
                padding-top: 20px;
                height: 60px;
                margin-left: 30px;
                margin-right: 30px;
            }

  4. Entfernen Sie die Gruppenköpfe aus data.js. (Am besten löschen Sie dazu einfach den Titel jeder Gruppe.)

Nach diesen Änderungen sieht Ihre App wie folgt aus:

Aktualisierte App

Sie müssen nur ein paar Bilder hinzufügen, den Hintergrund und den Titel ändern, und schon haben Sie die Startseite der Contoso French Bakery erstellt!

Contoso Food Truck-Beispiel

Im nächsten Beispiel erstellen wir die Startseite des Contoso Food Truck anhand der Vorlage Grid App.

Contoso Food Truck-Beispiel

Auf der Startseite des Contoso Food Truck werden auffällige Bilder in verschiedenen Größen verwendet, um den Benutzer auf die App aufmerksam zu machen.

Anders als beim vorhergehenden Beispiel sind hier einige JavaScript-Ergänzungen an der Vorlage erforderlich, die in erster Linie dazu dienen, die Logik für die unterschiedlichen Elementgrößen in der ListView hinzuzufügen. Auch hier gehen wir davon aus, dass die Elemente auf der Startseite interaktiv sind und der Benutzer zu einer Detailansicht gelangt, wenn er ein Element auswählt. Für diese Startseite eignet sich eine ListView mit dem Rasterlayout. Wir verwenden wieder die Vorlage Grid App als Ausgangspunkt.

Wenn wir unterschiedlich große Elemente verwenden möchten, müssen wir zunächst eine Mindestbasisgröße bzw. Basiseinheit festlegen. Da diese Einheit zum Erstellen aller Rasterelemente verwendet wird, müssen alle Rasterelemente aus Vielfachen dieser Rastergröße bestehen. Das kleinste Maß eines der Elemente in der nächsten Abbildung ist die Höhe der Elemente im Abschnitt "Near Me", die ungefähr 80 Pixel beträgt. Beim horizontalen Maß sind wir flexibler. Aus Gründen der Einfachheit verwenden wir für das horizontale Maß auch 80 Pixel.

Diese Abbildung zeigt, wie die Basiseinheit (rotes Quadrat) im Vergleich mit einigen tatsächlichen Elementen aussieht.

Basiselementgröße

Beim Berechnen der Elementgrößen muss jede Elementgröße einem Vielfachen der Basiseinheit plus dem Abstand zwischen Einheiten entsprechen. Die Formel lautet wie folgt:

item sizeₓ = m * base unit sizeₓ + (m -1) * item paddingₓ

item sizey = m * base unit sizey + (m -1) * item paddingy

Dabei ist m eine positive ganze Zahl, und x und y geben die x- und y-Maße der Elementgröße und den Elementabstand an.

Ist die Basisgröße im Verhältnis zu den Elementen zu klein, beeinträchtigt dies die Leistung Ihrer App. Als Faustregel gilt, dass die Größe eines Elements in beide Richtungen nicht mehr als einige Basiseinheiten betragen sollte.

  1. Erstellen Sie in Visual Studio eine neue App mit der Vorlage Grid App.

  2. Erstellen Sie in groupedItems.html eine neue Elementvorlage mit dem Namen multisizebaseitemtemplate. Diese Elementvorlage ist mehr oder weniger identisch mit der Standardelementvorlage, enthält aber einen "item-description"-Kopf, sodass wir zusätzlich zum Titel und Untertitel die Elementbeschreibung auf der Startseite hinzufügen können.

      <!-- Template tutorial HTML -->
    <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>
            <h6 class="item-description" data-win-bind="textContent: description"></h6>
        </div>
    </div>

  3. Erstellen Sie in groupedItems.js eine Vorlagenfunktion mit dem Namen multisizeItemTemplateRenderer vor der PageControl-Definition (ui.Pages.define).

    Wir verwenden diese Funktion, um die ListView-Elemente zu rendern. Sie bestimmt, welche Elementvorlage von den einzelnen Elementen verwendet wird. In einem späteren Schritt weisen wir die Funktion der itemTemplate-Eigenschaft des ListView-Steuerelements zu.

     function multisizeItemTemplateRenderer(itemPromise) {
        return itemPromise.then(function (currentItem) {
            var content;
            // Grab the default item template used on the groupeditems page.
            content = document.querySelector(".multisizebaseitemtemplate");
            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"
                        }
                        // Use the mediumlarge template for the second item
                        else if (currentItem.index == 2) {
                            result.className = "mediumlargeitemtemplate"
                        }
                        // Use the medium template for the third item, and any other items
                        else {
                            result.className = "mediumitemtemplate"
                        }
                        break;
                    }
                default:
                    {
                        // Use the small template for the second group
                        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 data binding.
            result.querySelector(".item-image").src = currentItem.data.backgroundImage;
            result.querySelector(".item-title").textContent = currentItem.data.title;
            result.querySelector(".item-subtitle").textContent = currentItem.data.subtitle;
            result.querySelector(".item-description").textContent = currentItem.data.description;
            return result;
        });
    }

  4. Fügen Sie in groupedItems.js die groupInfo-Funktion hinzu (ebenfalls außerhalb der Seitendefinition). 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: 80,
        cellHeight: 80
    };
 }

  5. Jetzt müssen wir diese neuen Funktionen mit dem ListView-Steuerelement verbinden.

    1. Ändern Sie in groupedItems.js die _initializeLayout-Funktion so, dass eine flache Liste von Gruppen angezeigt wird.

      // Add the itemTemplate parameter as shown.
_initializeLayout: function (listView, viewState, itemTemplate) {
    if (viewState === appViewState.snapped) {
        listView.itemDataSource = Data.groups.dataSource;
        listView.groupDataSource = null;

        // Add the following line of code.
        listView.itemTemplate = itemTemplate;

        listView.layout = new ui.ListLayout();
    } else {

                listView.itemDataSource = Data.items.dataSource;
                listView.groupDataSource = Data.groups.dataSource;
                listView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });

        // Add the following two lines of code.
        listView.itemTemplate = multisizeItemTemplateRenderer;
        listView.layout = new ui.GridLayout({ groupInfo: groupInfo, groupHeaderPosition: "top" });
    }
},

    2. Entfernen Sie die Zeile, in der der ListView 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;

    // Add the next line of code to retrieve the item template. 
    var itemTemplate = element.querySelector(".itemtemplate");

    listView.groupHeaderTemplate = element.querySelector(".headerTemplate");

    listView.oniteminvoked = this.itemInvoked.bind(this);
        listView.itemTemplate = element.querySelector(".itemtemplate");

    // Change the last argument of the _initializeLayout function to itemTemplate.
    this._initializeLayout(listView, appView.value, itemTemplate);
    listView.element.focus();
 },

// This function updates the page layout in response to viewState changes.
updateLayout: function (element, viewState, lastViewState) {
    var listView = element.querySelector(".groupeditemslist").winControl;

    // Add the next line of code to retrieve the item template.
    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, viewState, itemTemplate);
        }
    }
},

  6. Als Nächstes müssen wir groupedItems.css das Format für die Elemente hinzufügen. Um die Elemente wie in der vorhergehenden Abbildung gezeigt zu formatieren, benötigen wir vier CSS-Klassen für die vier verschiedenen Elementvorlagen auf der Startseite. Verwenden Sie für die vier Klassen die Namen smallitemtemplate, mediumitemtemplate, mediumlargeitemtemplate und largeitemtemplate. Der nächste CSS-Code dient hauptsächlich dazu, die Überlagerung und den Text in Bezug zum Bild zu positionieren und die Größe jedes Elements entsprechend zu ändern. In einigen Fällen werden bestimmte Elemente reduziert, da nicht alle Vorlagen sämtliche Elemente in der Elementvorlage verwenden. Fügen Sie diesen CSS-Code direkt vor der ersten @media screen-CSS-Zeile hinzu.

    /* Generic styling */
.groupeditemspage .groupeditemslist .item-overlay {
    -ms-grid-row: 2;
}
.groupeditemspage .groupeditemslist .item-overlay .item-description {
    visibility:collapse;
}

/* Small item template */
.groupeditemspage .groupeditemslist .smallitemtemplate {
    width: 440px;
    height: 80px;
    overflow: hidden;

}
.groupeditemspage .groupeditemslist .smallitemtemplate .item-image {
    height: 80px;
    width: 80px;
}
.groupeditemspage .groupeditemslist .smallitemtemplate .item-overlay {
   opacity: 0;
}
.groupeditemspage .groupeditemslist .smallitemtemplate .item-overlay .item-title {
    position: absolute; 
    top: -5px;
    padding-left: 90px;
    font-size: 11pt;
}
.groupeditemspage .groupeditemslist .smallitemtemplate .item-overlay .item-subtitle {
    position: absolute; 
    top: 15px;
    padding-left: 90px;
    font-size: 9pt;
}
.groupeditemspage .groupeditemslist .smallitemtemplate .item-overlay .item-description {
    position: absolute; 
    top: 35px;
    padding-left: 90px;
    font-size: 9pt;
    visibility: visible;
    width: 360px;
    overflow-wrap: normal;
    text-overflow: initial;
}

/* Medium item template */
.groupeditemspage .groupeditemslist .mediumitemtemplate {
    width: 260px;
    height: 170px;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 30px;
    display: -ms-grid;
    overflow: hidden;
}      
.groupeditemspage .groupeditemslist .mediumitemtemplate .item-overlay .item-title {
    padding-top: 5px;
    padding-left: 10px;
}
.groupeditemspage .groupeditemslist .mediumitemtemplate .item-overlay .item-title {
    font-size: 14px;
}
.groupeditemspage .groupeditemslist .mediumitemtemplate .item-overlay .item-subtitle {
    visibility: collapse;
}   

/* Medium-large item template */
.groupeditemspage .groupeditemslist .mediumlargeitemtemplate {
    width: 260px;
    height: 350px;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 30px;
    display: -ms-grid;
    overflow: hidden;
}
.groupeditemspage .groupeditemslist .mediumlargeitemtemplate .item-overlay .item-title {
    padding-top: 5px;
    padding-left: 10px;
    font-size: 14px;
}

.groupeditemspage .groupeditemslist .mediumlargeitemtemplate .item-overlay .item-subtitle {
    visibility: collapse;
}   

/* Large item template */
.groupeditemspage .groupeditemslist .largeitemtemplate {
    width: 440px;
    height: 530px;
    overflow: hidden;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 90px;
    display: -ms-grid;
}
.groupeditemspage .groupeditemslist .largeitemtemplate .item-overlay {
    -ms-grid-row: 2;
    -ms-grid-rows: 1fr 21px;
    display: -ms-grid;
    padding: 6px 15px 2px 15px;
}
.groupeditemspage .groupeditemslist .largeitemtemplate .item-subtitle{
    -ms-grid-row: 2;
}

  7. Ändern Sie in der @media screen and (-ms-view-state: fullscreen-landscape), screen and (-ms-view-state: fullscreen-portrait), screen and (-ms-view-state: filled)-Regel das erste CSS-Format wie folgt. Dieser CSS-Code macht die Überlagerung undurchsichtig und entfernt die "item"-Klasse.

     .groupeditemspage .groupeditemslist .item-overlay {
        background: rgba(0,0,0,1);
    }

  8. Ändern Sie das erste .groupeditemspage .groupeditemslist .win-horizontal.win-viewport .win-surface-Format in groupedItems.css wie folgt.

        .groupeditemspage .groupeditemslist .win-horizontal.win-viewport .win-surface {
        margin-bottom: 60px;
        margin-left: 45px;
        margin-right: 115px;
    }

    Dieser CSS-Code ändert "margin-bottom" in "50px", damit auch für etwas größere Elemente ausreichend Platz ist.

Starten Sie Ihre App, nachdem Sie diese Änderungen vorgenommen haben. Sie sieht jetzt so aus:

Aktualisierte App

Sie müssen nur Bilder hinzufügen, Hintergrund, Text und Überlagerungsfarbe ändern, und schon haben Sie die Startseite des Contoso Food Truck.

Kreativere Größen und Vorlagen

Zum Anpassen Ihrer Elementvorlagen stehen Ihnen weitere Möglichkeiten zur Verfügung, die wir hier nicht gezeigt haben. Das harmonische Erscheinungsbild dieser Startseite wird z. B. durch zwei Elementgrößen und drei unterschiedliche Vorlagen erzielt.

Eine weitere angepasste Startseite

Die Basiseinheit dieser Startseite ist die Größe des kleinsten Elements. Das erste Element in jeder Gruppe ist 2 x 3 Basiseinheiten groß, und durch die Vorlage werden Titel und Beschreibung unter dem Bild platziert. Die nächsten Elemente in der Gruppe sind 1 x 1 Einheiten groß und überlagern den Titel und die Beschreibung auf dem Bild. Die dritte Vorlage ist für Elemente ohne Bilder vorgesehen.

Hinzufügen von ListView-Elementanimationen

Auf der Windows-Startseite zeigen Livekacheln aktuelle Bilder und Texte an, die dem Benutzer auf einen Blick Informationen liefern. Dieser Ansatz kann mithilfe der WinJS-Animationsbibliothek ggf. auch für die Startseite einer App verwendet werden.

In diesem Beispiel wird das erste Element auf der App-Startseite alle vier Sekunden mit einem neuen Bild aktualisiert, d. h. mit dem gleichen Aktualisierungsintervall, das auf der Windows-Startseite verwendet wird. Wir verwenden wie für Kacheln auf der Windows-Startseite die WinJS-Vorschauanimation.

  1. Erstellen Sie in Visual Studio eine neue App mit der Vorlage Grid App.

  2. Fügen Sie in groupedItems.html der Elementvorlage ein zweites Bild hinzu, das für die Animation verwendet wird.

        <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
            <img class="item-image-new" 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>
    </div>

  3. Ändern Sie in groupedItems.css den CSS-Code, sodass das zweite Bild unter dem ersten Bild positioniert wird. So können wir das neue Bild per Animation vom unteren Rand des Elements an seine Position bewegen. Für beide Elemente muss eine relative Positionierung verwendet werden, damit wir ihre Position vor dem Starten der Animation ändern können. Das erste und das dritte CSS-Format sind bereits in groupedItems.css vorhanden und müssen nur geändert werden. Das zweite CSS-Format ist neu.

            /* Update this CSS style. */
        .groupeditemspage .groupeditemslist .item .item-image {
            -ms-grid-row-span: 2;
            position:relative;
        }

        /* Add this CSS style. */
        .groupeditemspage .groupeditemslist .item .item-image-new {
            -ms-grid-row-span: 2;
            position:relative;
            top: 250px;
        }

        /* Update this CSS style. */
        .groupeditemspage .groupeditemslist .item .item-overlay {
            -ms-grid-row: 2;
            -ms-grid-rows: 1fr 21px;
            display: -ms-grid;
            padding: 6px 15px 2px 15px;
            position:relative;
        }

  4. Fügen Sie in groupedItems.js der ready-Funktion den folgenden Code hinzu, um alle vier Sekunden eine neue Elementanimation auszulösen.

                setInterval(function () { changeImage() } , 4000);

  5. Fügen Sie in groupedItems.js den folgenden Code außerhalb der Seitendefinition hinzu. Die ersten Variablendefinitionen verweisen auf die unterschiedlichen Bilder, die von der Vorlage Grid App verwendet werden. Fügen Sie die peekTile-Funktion hinzu, um die Vorschauanimation der Windows-Bibliothek für JavaScript wiederzugeben. Fügen Sie die changeImage-Funktion hinzu, um die Bilder vor der Wiedergabe der Animation zu aktualisieren. In diesem Beispiel geben wir die Animation nur für das erste Element in der ListView wieder.

        // Define images
    var darkGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC";
    var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC";
    var mediumGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ/AAY/AsAlWFQ+AAAAAElFTkSuQmCC";

    // Play the Peek animation
    function peekTile(tile1, tile2) {
        // Create peek animation
        var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]);

        // Reposition tiles to their desired post-animation position
        tile1.style.top = "-250px";
        tile2.style.top = "0px";

        // Execute animation
        peekAnimation.execute();
    }

   function changeImage() {
        // Get the two image elements
        var images = document.querySelector(".item-image");
        var imagesNew = document.querySelector(".item-image-new"); 

        // Swap out the old image source and choose the new image source
        images.src = imagesNew.src;
        if (images.src == lightGray)
            imagesNew.src = mediumGray;
        else if (images.src == mediumGray)
            imagesNew.src = darkGray;
        else
            imagesNew.src = lightGray;

        // Reset the elements for the pre-animation position and trigger the animation
        images.style.top = "0px";
        imagesNew.style.top = "250px";
        peekTile(images, imagesNew);
    };

    Herzlichen Glückwunsch! Sie haben Ihrer ListView benutzerdefinierte Elementanimationen hinzugefügt.

Verwandte Themen

ListView

Schnellstart: Hinzufügen einer ListView

Formatieren der ListView und der zugehörigen Elemente