Schnellstart: Hinzufügen von ListView-Steuerelementen (HTML)

  • 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 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 einer JSON-Datenquelle stammen. WinJS stellt ein ListView-Steuerelement bereit, das Sie zum Anzeigen von Daten verwenden können.

Voraussetzungen

Sie sollten mit der Erstellung einer einfachen Windows-Runtime-App mit JavaScript vertraut sein, die WinJS-Steuerelemente verwendet. Anweisungen zu den ersten Schritten mit WinJS-Steuerelementen finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.

Was ist ein ListView-Steuerelement?

Das ListView-Steuerelement ist ein WinJS-Steuerelement, mit dem Daten aus einem IListDataSource-Objekt in einer anpassbaren Liste oder einem Raster angezeigt werden. Für WinJS werden mehrere Arten von IListDataSource-Objekten bereitgestellt:

  • 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).gifSo erstellen Sie ein ListView-Objekt

  1. Fügen Sie der HTML-Datei, sofern noch nicht vorhanden, Verweise auf WinJS hinzu.

    So verwenden Sie die neueste Version von WinJS:

    1. Laden Sie die aktuelle Version unter WinJS herunterladen herunter, und kopieren Sie sie in das Verzeichnis für Ihre App oder Website.
    2. Fügen Sie WinJS-CSS- und Skriptverweise zu allen Seiten Ihrer App oder Website hinzu, die WinJS-Features verwendet.
    
<!-- WinJS references -->
<link href="/WinJS/css/ui-dark.css" rel="stylesheet">
<script src="/WinJS/js/WinJS.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 ein neues Projekt vom Typ Leere Anwendung erstellen.

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

    <!-- WinJS references -->
    <link href="/WinJS/css/ui-dark.css" rel="stylesheet">
    <script src="/WinJS/js/WinJS.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>

  2. Erstellen Sie in der HTML-Datei ein div-Element, und legen Sie dessen data-win-control-Eigenschaft auf WinJS.UI.ListView fest.

    <div id="basicListView" 
    data-win-control="WinJS.UI.ListView">  
</div>

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

    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.

    
(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.

  1. Verwenden Sie Visual Studio, 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.

  2. 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 erstellt eine leere JavaScript-Datei mit dem Namen dataExample.js.

  3. Ö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.

    (function () {
    "use strict"; 





})();

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

    (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.) Das Beispiel wird auch ohne Hinzufügen der Bilder ausgeführt.

     

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

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

})();

  6. 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.

    (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

  1. 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:

    <head>
    <!-- Other file references ... -->

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

</head>

  2. Verwenden Sie die im letzten Abschnitt erstellten Daten für das Festlegen der itemDataSource-Eigenschaft des ListView-Steuerelements.

    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:

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

  1. 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.

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

     

  2. 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.

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

        </div>
    </div>

  3. 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.
        <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>

  4. Um Layoutprobleme zu vermeiden, geben Sie immer die Größe des Stammelements einer Vorlage und die Größe von img-Elementen in der Vorlage an.

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

  5. 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:

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

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

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

        <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. Die WinJS-Stylesheets legen die Höhe des ListView -Steuerelements auf 400 Pixel fest, Sie können jedoch einfach eine beliebige andere Höhe festlegen, indem Sie das Standarddesign mit Ihrem eigenen CSS überschreiben. 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:

ListView-Gestaltung für Windows

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

ListView-Gestaltung für Windows Phone 8.1

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

"win-listview" ist eine von WinJS 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:

Spezifische ListView-Gestaltung für Windows

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

Spezifische ListView-Gestaltung für Windows Phone 8.1

#basicListView .win-listview 
{
    height: 400px; 
    width: 300px; 
    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 WinJS-Stylesheets sind CSS-Klassen definiert, die Sie überschreiben können, um das Erscheinungsbild eines WinJS-Steuerelements 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.


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

Formatierte Elemente in einer ListView

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

#basicListView .win-listview .win-container:hover {
    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 WinJS-Klassen verwendet, um das ListView-Steuerelement 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.

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

.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;
    }

So sieht das ListView-Steuerelement jetzt aus:

Eine ListView mit gestalteten Elementen

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, Rastern und Zellenlayouts

Das ListView-Element weist drei Layoutmodi auf: Liste, Raster und Zelle.

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

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

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

  • (nur Windows) Wenn Sie das Zellenlayout verwenden möchten, legen Sie die Layouteigenschaft auf WinJS.UI.CellSpanningLayout fest, wie im Folgenden gezeigt:

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

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

 

Auswählen und Abrufen von "ListView"-Elementen

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 ein Steuerelement Eingaben empfangen kann, müssen Sie die win-interactive-CSS-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.

Hinzufügen von Funktionen für Neuanordnung, Ziehen und Ablegen zu einem ListView-Steuerelement (nur Windows)

Mit dem ListView-Steuerelement können Benutzer einzelne Elemente neu anordnen, ziehen und ablegen. Beispielsweise können Sie die Ziehfunktion deklarieren, indem Sie die itemsDraggable-Eigenschaft der ListView auf "true" festlegen. Ähnlich verhält es sich, wenn Sie Benutzern ermöglichen möchten, die Elemente im ListView-Steuerelement neu anzuordnen. Legen Sie hierfür die itemsReorderable-Eigenschaft der ListView auf "true" fest.

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

Mit der itemsDraggable-Eigenschaft ist es möglich, einzelne Elemente sichtbar aus dem ListView-Steuerelement zu ziehen. Zieht ein Benutzer ein Element aus der ListView, wird das itemdragstart-Ereignis verursacht. (Dieses Ereignis wird ebenfalls zum Beginn eines Neuanordnungsvorgangs verursacht.) Wird ein Element in der ListView abgelegt, verursacht die ListView ein itemdragdrop-Ereignis.

Weitere Informationen zum Hinzufügen der Neuanordnungs-, Zieh- und Ablegefunktionen zu einem ListView-Steuerelement oder Möglichkeiten zum Herunterladen finden Sie unter So wird's gemacht: Ermöglichen des Neuanordnens, Ziehens und Ablegens in einem ListView-Steuerelement, oder laden Sie das HTML-ListView-Beispiel für Drag & Drop und Neuanordnung herunter.

ListView-Beispiele

Live-Codebeispiele zu fast allen WinJS-Steuerelement und einen Online-Editor finden Sie unter try.buildwinjs.com.

Diese zusätzlichen 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.