Language: JavaScript and HTML | VB/C#/C++ and XAML

0 von 1 fanden dies hilfreich - Dieses Thema bewerten.

Schnellstart: Hinzufügen einer "ListView" (Windows Store-Apps mit JavaScript und HTML)

Inhalt dieses Artikels

Voraussetzungen
Was ist ein ListView-Steuerelement?
Erstellen eines ListView-Objekts
Definieren der Daten
Verbinden der Daten mit dem ListView-Steuerelement
Definieren einer Elementvorlage
Formatieren des ListView-Steuerelements
Formatieren von Elementen
Wechseln zwischen Listen- und Rasterlayouts
Gruppieren der Daten
Hinzufügen von interaktiven Elementen zu einer Elementvorlage
ListView-Beispiele
Zusammenfassung und nächste Schritte

In den meisten Apps werden Listen mit Daten, beispielsweise eine Kontaktliste, Bilder in einem Katalog oder der Inhalt eines E-Mail-Posteingangs, angezeigt. Die Daten in diesen Listen können aus einer Datenbank, dem Web oder eine JSON-Datenquelle stammen. Die Windows-Bibliothek für JavaScript stellt ein ListView-Steuerelement bereit, das Sie zum Anzeigen von Daten verwenden können.

Voraussetzungen

Es wird davon ausgegangen, dass Sie eine einfache Windows Store-App mit JavaScript für Windows erstellen können, die Steuerelemente der Windows-Bibliothek für JavaScript verwendet. Anweisungen für den Einstieg in die Arbeit mit Steuerelementen der Windows-Bibliothek für JavaScript finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.

Was ist ein ListView-Steuerelement?

Das ListView-Steuerelement ist ein Steuerelement der Windows-Bibliothek für JavaScript, mit dem Daten aus einem IListDataSource-Objekt in einer anpassbaren Liste oder einem Raster angezeigt werden. Die Windows-Bibliothek für JavaScript stellt verschiedene Arten von IListDataSource-Objekten bereit:

Sie können ein List-Objekt verwenden, um aus einem Array von Daten ein IListDataSource-Objekt zu erstellen.
Sie können ein StorageDataSource-Objekt verwenden, um auf Informationen zu Dateien und Verzeichnissen zuzugreifen.

Außerdem können Sie eine eigene benutzerdefinierte Datenquelle erstellen, die Verbindungen mit einem anderen Typ von Datenanbieter herstellt, beispielsweise einem Webdienst oder einer Datenbank. Anweisungen finden Sie unter So wird's gemacht: Erstellen einer benutzerdefinierten Datenquelle.

Erstellen eines ListView-Objekts

Hh465496.wedge(de-de,WIN.10).gif So erstellen Sie ein ListView-Objekt

Fügen Sie der HTML-Datei, sofern noch nicht vorhanden, Verweise auf die Windows-Bibliothek für JavaScript hinzu.

HTML



<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

In diesem Beispiel wird der HTML-Code für die Datei default.html gezeigt, die generiert wird, wenn Sie in Microsoft Visual Studio Express 2012 für Windows 8 ein neues Projekt vom Typ Leere Anwendung erstellen.

HTML



<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ListViewExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- ListViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

In diesem Beispiel wird anstelle des dunklen Stylesheets das helle verwendet. Wenn Ihre App wie in diesen Beispielen aussehen soll, ändern Sie also diesen Verweis

HTML


    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">

in:

HTML


     <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">

Erstellen Sie in der HTML-Datei ein div-Element, und legen Sie dessen data-win-control-Eigenschaft auf "WinJS.UI.ListView" fest.
HTML
Kopieren
<div id="basicListView" data-win-control="WinJS.UI.ListView"> </div>

Rufen Sie in dem zur HTML-Datei gehörenden JavaScript-Code die WinJS.UI.processAll-Funktion auf, wenn der HTML-Code geladen wird.

JavaScript


WinJS.UI.processAll();

Im nächsten Beispiel wird die Datei "default.js" gezeigt, die zu der Datei "default.html" gehört, die beim Erstellen eines neuen Projekts vom Typ Leere Anwendung für Sie erstellt wird.

JavaScript



(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = 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.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    app.start();
})();

Dieses Beispiel funktioniert, wenn Sie das ListView-Objekt der Startseite ("default.html") hinzufügen. Wenn Sie das ListView-Objekt einem Seitensteuerelement hinzufügen, müssen Sie WinJS.UI.processAll nicht aufrufen, da das Seitensteuerelement dies für Sie übernimmt. Wenn Sie das ListView-Objekt benutzerdefiniertem HTML-Code hinzufügen, können Sie WinJS.UI.processAll mit dem DOMContentLoaded-Ereignis aufrufen. Weitere Informationen zum Aktivieren von Steuerelementen finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Formaten.

Mit diesem Code wird ein leeres ListView-Objekt erstellt. Wenn Sie die App jetzt ausführen, wird noch nichts angezeigt. Im nächsten Abschnitt erstellen Sie Daten, die vom ListView-Steuerelement angezeigt werden sollen.

Definieren der Daten

Sie können sich die Verwaltung des Codes für die Erstellung der Datenquelle erleichtern, indem Sie den Code in einer separaten JavaScript-Datei speichern. In diesem Abschnitt erfahren Sie, wie Sie eine JavaScript-Datei für die Daten erstellen, ein List-Objekt erstellen und mithilfe der WinJS.Namespace.define-Funktion die Daten für die restliche App zugänglich machen.

Verwenden Sie Visual Studio Express 2012 für Windows 8, um dem Projekt eine Datendatei hinzuzufügen. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner js des Projekts, und wählen Sie Hinzufügen > Neues Element aus. Das Dialogfeld Neues Element hinzufügen wird angezeigt.
Wählen Sie JavaScript-Datei aus. Geben Sie als Namen "dataExample.js" ein. Klicken Sie auf Hinzufügen, um die Datei zu erstellen. Visual Studio Express 2012 für Windows 8 erstellt eine leere JavaScript-Datei mit dem Namen dataExample.js.
Öffnen Sie dataExample.js. Erstellen Sie eine anonyme Funktion, und aktivieren Sie den Strict-Modus.
Wie unter Programmieren einfacher Apps beschrieben, hat es sich im Rahmen der Programmierung bewährt, JavaScript-Code zu kapseln, indem er von einer anonymen Funktion umschlossen wird. Die Verwendung des Strict-Modus ist ebenfalls empfehlenswert.
JavaScript
Kopieren
(function () { "use strict"; })();

Erstellen Sie ein Array mit Daten. Dieses Beispiel erstellt ein Array mit Objekten. Jedes Objekt verfügt über drei Eigenschaften: "title", "text" und "image".

JavaScript


(function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

})();

Hinweis Wenn Sie selbst Code zu diesem Beispiel erstellen, können Sie die Bilder in Dateien auf dem lokalen Computer ändern. Sie können auch Bilder beziehen, indem Sie das Beispiel für erste Schritte mit dem ListView-Steuerelement herunterladen. (Dies ist nicht das gleiche Beispiel, die Bilder sind jedoch identisch.) Sie können den Beispielcode auch ausführen, ohne Bilder hinzuzufügen. Er funktioniert trotzdem.

Verwenden Sie das Array, um ein List-Objekt zu erstellen.

JavaScript


(function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

    var dataList = new WinJS.Binding.List(dataArray); 

})();

Stellen Sie die List bereit, indem Sie einen Namespace deklarieren und die List als öffentlichen Member hinzufügen.

Da der gerade geschriebene Code in einer anonymen Funktion eingeschlossen ist, kann darauf nicht öffentlich zugegriffen werden. Das ist ein Grund für die Verwendung der anonymen Funktion: Die Daten sollen vertraulich bleiben. Damit die ListView auf die List zugreifen kann, müssen Sie einen öffentlichen Zugriff ermöglichen. Eine Möglichkeit hierfür ist die WinJS.Namespace.define-Funktion. Hiermit können Sie einen Namespace erstellen und die List als einen der Member hinzufügen.

Die WinJS.Namespace.define-Funktion akzeptiert zwei Parameter: den Namen des zu erstellenden Namespace und ein Objekt, das mindestens ein Eigenschaft/Wert-Paar enthält. Jede Eigenschaft ist der öffentliche Name des Members, und jeder Wert ist eine zugrunde liegende Variable, Eigenschaft oder Funktion in Ihrem privaten Code, die Sie verfügbar machen möchten.

In diesem Beispiel wird der Namespace "DataExample" erstellt, mit dem der öffentliche Member "itemList" verfügbar gemacht wird. Hiermit wird die List zurückgegeben.

JavaScript


(function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

    var dataList = new WinJS.Binding.List(dataArray);

    // Create a namespace to make the data publicly
    // accessible. 
    var publicMembers =
        {
            itemList: dataList 
        };
    WinJS.Namespace.define("DataExample", publicMembers); 

})();

Sie haben eine Datenquelle erstellt, auf die das ListView-Steuerelement zugreifen kann. Sie erstellen nun die Daten für das ListView-Steuerelement.

Verbinden der Daten mit dem ListView-Steuerelement

Fügen Sie im head-Abschnitt der HTML-Datei, in der sich das ListView-Objekt befindet, einen Verweis auf die gerade erstellte Datendatei (dataExample.js) hinzu:

JavaScript


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

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- ListViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>

    <!-- Your data file. -->
    <script src="/js/dataExample.js"></script>

</head>

Legen Sie mit den im letzten Abschnitt erstellten Daten die itemDataSource-Eigenschaft des ListView-Steuerelements fest.
Die itemDataSource-Eigenschaft akzeptiert ein IListDataSource-Objekt. Das List-Objekt ist keine IListDataSource, verfügt aber über eine dataSource-Eigenschaft, die eine IListDataSource-Version von sich selbst zurückgibt.

Um eine Verbindung mit Ihren Daten herzustellen, legen Sie die itemDataSource-Eigenschaft des ListView-Steuerelements auf DataExample.itemList.dataSource fest:
JavaScript
Kopieren
<div id="basicListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource : DataExample.itemList.dataSource }"> </div>

Führen Sie die App aus. Das ListView-Objekt zeigt die Eigenschaften und Werte in der Datenquelle an:

Anzeigen des Datenquelleninhalts ohne Vorlage

Das ist noch nicht ganz das Aussehen, das wir uns vorgestellt hatten. Es sollen nur die Werte des Titel- und des Textfelds angezeigt werden. Außerdem sollen die eigentlichen Bilder und nicht der Pfad zu den Bilder zu sehen sein. Um das gewünschte Rendering zu erzielen, muss ein Template-Objekt definiert werden. Wie das geht, sehen Sie im nächsten Schritt.

Definieren einer Elementvorlage

Das ListView-Objekt hat jetzt zwar die benötigten Daten, aber es weiß nicht, wie es sie anzeigen soll. Hierfür benötigen Sie eine eine Elementvorlage, die das Markup enthält, das Sie zum Anzeigen jedes Listenelements verwenden möchten. Die Elementvorlage kann die meisten anderen Steuerelemente enthalten (weitere Informationen finden Sie im Abschnitt Hinzufügen von interaktiven Elementen), jedoch keine FlipView oder eine weitere ListView.

Es gibt zwei Möglichkeiten, eine Vorlage zu erstellen: Sie können mit Markup ein WinJS.Binding.Template-Objekt definieren oder eine Vorlagenfunktion erstellen. In diesem Beispiel wird eine Vorlage in Markup erstellt. Informationen zum Erstellen einer Vorlagenfunktion finden Sie im Thema zur itemTemplate-Eigenschaft.

Ein WinJS.Binding.Template-Objekt ist leicht zu erstellen: Sie definieren das Markup, das Sie zum Anzeigen der einzelnen Listenelemente verwenden möchten, und geben dann an, wo die einzelnen Datenfelder angezeigt werden.

Erstellen Sie in Ihrem HTML-Code ein WinJS.Binding.Template-Steuerelement, und weisen Sie ihm eine ID zu. In diesem Beispiel wird die ID "mediumListIconTextTemplate" verwendet.
HTML
Kopieren
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template"> </div>
Hinweis Sie müssen die Vorlage definieren, bevor Sie sie verwenden können. Fügen Sie deshalb den HTML-Code für die Vorlage vor dem HTML-Code für das ListView-Objekt hinzu.
WinJS.Binding.Template muss ein einziges Stammelement haben. Erstellen Sie ein DIV-Element, das als übergeordnetes Element für den Inhalt der Vorlage dienen soll.
HTML
Kopieren
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template"> <div> </div> </div>

Erstellen Sie das Markup, das vom ListView-Objekt für die einzelnen darin enthaltenen Datenelemente erzeugt wird. Die im vorherige Schritt erstellten Daten enthalten den Speicherort eines Bilds, einen Titel und etwas Text. Erstellen Sie deshalb die folgenden Elemente:

Ein img-Element zum Anzeigen des Bildfelds.
Ein h4-Element zum Anzeigen des Titelfelds.
Ein h6-Element zum Anzeigen des Textfelds.

HTML


    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div>

            <!-- Displays the "picture" field. -->
            <img src="#"  />
            <div>

                <!-- Displays the "title" field. -->
                <h4></h4>

                <!-- Displays the "text" field. --> 
                <h6></h6>
            </div>
        </div>
    </div>

Um das richtige Layout sicherzustellen, geben Sie immer die Größe des Stammelements einer Vorlage und die Größe von img-Elementen in der Vorlage an.

HTML


    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">

            <!-- Displays the "picture" field. -->
            <img src="#" style="width: 60px; height: 60px;" />
            <div>

                <!-- Displays the "title" field. -->
                <h4></h4>

                <!-- Displays the "text" field. --> 
                <h6></h6>
            </div>
        </div>
    </div>

Legen Sie das data-win-bind-Attribut für jedes Element fest, das Daten anzeigt. Das data-win-bind-Attribut verwendet die folgende Syntax:

data-win-bind="propertyName: dataFieldName"

Wenn Sie beispielsweise die src-Eigenschaft von img an das "picture"-Feld binden möchten, verwenden Sie die folgende Syntax:

HTML


<img data-win-bind="src : picture" />

Wenn Sie mehrere Eigenschaften festlegen möchten, trennen Sie diese durch ein Semikolon:

data-win-bind="property1Name: dataField1Name; property2Name: dataField2Name"

In diesem Beispiel werden die Elemente der Vorlage an die entsprechenden Datenfelder gebunden.

HTML


    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">

            <!-- Displays the "picture" field. -->
            <img src="#" style="width: 60px; height: 60px;" 
                 data-win-bind="alt: title; src: picture" />
            <div>

                <!-- Displays the "title" field. -->
                <h4 data-win-bind="innerText: title"></h4>

                <!-- Displays the "text" field. --> 
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>

Wenn Sie die Elementvorlage verwenden möchten, legen Sie mit der select-Syntax die itemTemplate-Eigenschaft der ListView auf die Elementvorlage fest.

HTML


    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">

            <!-- Displays the "picture" field. -->
            <img src="#" style="width: 60px; height: 60px;" 
                 data-win-bind="alt: title; src: picture" />
            <div>

                <!-- Displays the "title" field. -->
                <h4 data-win-bind="innerText: title"></h4>

                <!-- Displays the "text" field. --> 
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>       

    <div id="basicListView" data-win-control="WinJS.UI.ListView" 
        data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate')}">
    </div>

Wenn Sie nun die App ausführen, werden die gebundenen Daten in der Liste angezeigt.

Ein datengebundenes ListView-Steuerelement, das Bilder und Text anzeigt.

Formatieren des ListView-Steuerelements

Die Höhe des ListView-Steuerelements wird nicht automatisch an die gewünschten Inhalte angepasst. Damit ein ListView-Steuerelement gerendert wird, müssen Sie einen absoluten Wert für die Höhe angeben. In den Stylesheets der Windows-Bibliothek für JavaScript ist die Höhe des ListView-Steuerelements auf 400px festgelegt. Sie können jedoch sehr leicht eine andere Höhe festlegen, indem Sie das Standardformat durch ein eigenes CSS außer Kraft setzen. Fügen Sie dieses CSS zur CSS-Datei der App hinzu, um Höhe und Breite des ListView-Steuerelements festzulegen und ihm einen Rahmen zuzuweisen:

CSS


.win-listview 
{
    height: 500px; 
    width: 500px; 
    border: 2px solid gray;
}

"win-listview" ist eine von der Windows-Bibliothek für JavaScript definierte Klasse, mit der Sie das ListView-Steuerelement formatieren können. Im vorherigen Beispiel wurden Höhe, Breite und Rahmen jedes ListView-Steuerelements geändert. Um nur das eine ListView-Steuerelement zu ändern, fügen Sie dem Selektor die ID des das ListView-Steuerelement hostenden div-Elements hinzu:

CSS


#basicListView.win-listview 
{
    height: 500px; 
    width: 500px; 
    border: 2px solid gray;
}

Führen Sie die App aus. Das ListView-Steuerelement ist nun groß genug, um alle Elemente anzuzeigen.

Ein 500px-ListView-Steuerelement.

In den Stylesheets der Windows-Bibliothek für JavaScript sind CSS-Klassen definiert, die Sie überschreiben können, um die Darstellung eines Steuerelements aus der Windows-Bibliothek für JavaScript anzupassen. Mit ListView werden u. a. die folgenden CSS-Klassen verwendet:

win-listview
Gibt Formatvorlagen für das ListView-Steuerelement selbst an.
win-container
Gibt Formatvorlagen für einen ListView-Elementcontainer oder einen FlipView-Elementcontainer an. Jedes Element hat einen eigenen Container.
win-progress
Gibt Formatvorlagen für das Statussteuerelement an, das angezeigt wird, wenn Elemente im ListView-Steuerelement geladen werden.

Eine vollständige Liste finden Sie auf der ListView reference page.

Im folgenden Beispiel wird ein Format definiert, das zu jedem Elementcontainer im ListView-Steuerelement einen Rand hinzugefügt.

CSS



#basicListView.win-listview .win-container {
    margin: 10px; 
}

Im nächsten Beispiel wird ein Format definiert, das sich auf Listenelemente in einem ListView-Steuerelement bezieht, auf das gezeigt wird.

CSS


#basicListView.win-listview .win-container:hover {
    background-color: red;
    border-color: red; 
}

Hinweis

Das ListView-Steuerelement unterstützt Ränder an seiner linken, oberen und unteren Seite. Es ist aber nicht möglich, eine Rand für die rechte Seite anzugeben. Eine Möglichkeit, diese Einschränkung zu umgehen, besteht darin, ein Element hinzuzufügen, das so breit wie der gewünschte Rand ist, dessen style.visibility-Eigenschaft auf "none" festzulegen und das Element dann rechts vom ListView-Steuerelement hinzuzufügen.

Formatieren von Elementen

In den vorherigen Beispielen wurden Inlineformatvorlagen und die Klassen der Windows-Bibliothek für JavaScript verwendet, um das ListView-Steuerelemente und dessen Elemente zu formatieren. Sie können CSS-Klassen aber auch verwenden, um die Elementvorlage zu formatieren. Im nächsten Beispiel wird die Vorlage aktualisiert, die Sie im Abschnitt Definieren einer Elementvorlage definiert haben. Die definierten Inlineformatvorlagen werden entfernt und einige CSS-Klassen hinzugefügt.

JavaScript


    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
        <div class="mediumListIconTextItem">
            <img src="#" class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
            <div class="mediumListIconTextItem-Detail">
                <h4 data-win-bind="innerText: title"></h4>
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>

Fügen Sie die folgenden Formate zum CSS der App hinzu:

CSS


.mediumListIconTextItem
{
    width: 282px;
    height: 70px;
    padding: 5px;
    overflow: hidden;
    display: -ms-grid;
}

    .mediumListIconTextItem img.mediumListIconTextItem-Image 
    {
        width: 60px;
        height: 60px;
        margin: 5px;
        -ms-grid-column: 1;
    }

    .mediumListIconTextItem .mediumListIconTextItem-Detail
    {
        margin: 5px;
        -ms-grid-column: 2;
    }

Das ListView-Steuerelement sieht jetzt folgendermaßen aus:

Es ist nicht nötig, die Vorlagenformate vollständig neu zu erstellen. Eine Zusammenstellung häufig verwendeter Vorlagen und der entsprechenden CSSs finden Sie unter Elementvorlagen für Listenlayouts und Elementvorlagen für Rasterlayouts.

Wechseln zwischen Listen- und Rasterlayouts

Für das ListView-Element gibt es zwei Layoutmodi: Liste und Raster.

Wenn Sie das Listenlayout verwenden möchten, legen Sie die layout-Eigenschaft auf WinJS.UI.ListLayout fest, wie im Folgenden gezeigt:

HTML


    <div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            layout: {type: WinJS.UI.ListLayout}}">
    </div>

Wenn Sie das Rasterlayout verwenden möchten, legen Sie die layout-Eigenschaft auf WinJS.UI.GridLayout fest, wie im Folgenden gezeigt:

HTML


    <div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            layout: {type: WinJS.UI.GridLayout}}">
    </div>

Sie können das Layout eines ListView-Steuerelements jederzeit ändern, und zwar auch nach seiner Erstellung.

Gruppieren der Daten

Sie können Elemente im ListView-Steuerelement gruppieren. Die folgende Abbildung zeigt alphabetisch gruppierte Elemente:

Eine ListView mit gruppierten Elementen

Eine Beschreibung des Verfahrens finden Sie unter So wird's gemacht: Gruppieren von Elementen in einem ListView-Steuerelement.

Hinzufügen von interaktiven Elementen zu einer Elementvorlage

Die Elementvorlage kann die meisten anderen Steuerelemente enthalten, jedoch keine FlipView oder eine weitere ListView.

Wenn der Benutzer mit einem Element interagiert, erfasst die ListView gewöhnlich diese Interaktion und verwendet sie, um festzustellen, ob der Benutzer ein Element ausgewählt oder aufgerufen hat oder durch die Elemente schwenkt. Damit ein interaktives Element wie etwa ein Steuerelement Eingaben erhält, müssen Sie die win-interactive-Klasse an das interaktive Element oder eines seiner übergeordneten Elemente anfügen. Dieses Element und seine untergeordneten Elemente erhalten die Interaktion und lösen keine Ereignisse für die ListView mehr aus.

Wenn Sie win-interactive an ein Element in einer Elementvorlage anfügen, darf das Element nicht das ganze Element ausfüllen, da andernfalls der Benutzer keine Möglichkeit hat, das Element auszuwählen oder aufzurufen.

Um Ihrer Elementvorlage interaktive Elemente hinzuzufügen, sollten Sie eine Vorlagenfunktion anstelle einer WinJS.Binding.Template verwenden. Weitere Informationen zu Vorlagenfunktionen finden Sie unter So wird's gemacht: Erstellen einer Vorlagenfunktion.

ListView-Beispiele

Die folgenden Beispiele sollen Ihnen helfen, sich mit dem ListView-Steuerelement weiter vertraut zu machen.

Zusammenfassung und nächste Schritte

In diesem Schnellstart haben Sie erfahren, wie Sie ein ListView-Objekt erstellen und Daten an das Objekt binden. Sie haben außerdem erfahren, wie Elementvorlagen erstellt und formatiert werden.

Eine Liste vordefinierter Elementvorlagen, die Sie in Apps verwenden können, finden Sie unter Elementvorlagen für Listenlayouts und Elementvorlagen für Rasterlayouts. Eine Beschreibung des Verfahrens zum Gruppieren von Elementen finden Sie unter So wird's gemacht: Gruppieren von Elementen in einem ListView-Steuerelement.