Partager via

Démarrage rapide : ajout d’un contrôle ListView (HTML)

  • Article

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

La plupart des applications affichent des listes de données, par exemple une liste de contacts, les images d’une galerie ou le contenu d’une boîte de courrier électronique. Les données de ces listes peuvent provenir d’une base de données, du Web ou d’une source de données JSON. WinJS propose un contrôle ListView pour l’affichage des données.

Prérequis

Vous devez être en mesure de créer une application Windows Runtime de base en JavaScript qui utilise des contrôles WinJS. Pour obtenir des instructions sur l’utilisation des contrôles WinJS, voir Démarrage rapide : ajout de contrôles et de styles WinJS.

Qu’est-ce qu’un contrôle ListView ?

ListView est un contrôle WinJS qui affiche des données à partir d’un objet IListDataSource dans une liste ou une grille personnalisable. WinJS fournit plusieurs types d’objets IListDataSource :

  • Vous pouvez utiliser un objet List pour créer un objet IListDataSource à partir d’un tableau de données.
  • Vous pouvez utiliser un objet StorageDataSource pour accéder aux informations relatives aux fichiers et aux répertoires.

Vous pouvez également créer votre propre source de données personnalisée qui se connecte à un autre type de fournisseur de données, tel qu’un service Web ou une base de données. Pour obtenir des instructions, voir Comment créer une source de données personnalisée.

Création d’un contrôle ListView

Hh465496.wedge(fr-fr,WIN.10).gifPour créer un contrôle ListView

  1. Ajoutez des références à WinJS dans votre fichier HTML si elles ne s’y trouvent pas déjà.

    Pour utiliser la dernière version de WinJS :

    1. Téléchargez la dernière version depuis la page Obtenir WinJS (en anglais) et copiez-la dans le répertoire de votre application ou site web.
    2. Ajoutez des références de script et CSS WinJS à chaque page de votre application ou site web qui utilise des fonctionnalités WinJS.
    
<!-- WinJS references -->
<link href="/WinJS/css/ui-dark.css" rel="stylesheet">
<script src="/WinJS/js/WinJS.js"></script>

    Cet exemple montre le code HTML pour le fichier default.html qui est généré lorsque vous créez un projet Application vide dans Microsoft Visual Studio.

    
<!-- 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. Dans votre fichier HTML, créez un élément div et définissez sa propriété data-win-control sur WinJS.UI.ListView.

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

  3. Dans le code JavaScript qui accompagne votre fichier HTML, appelez la fonction WinJS.UI.processAll lorsque votre code HTML est chargé.

    WinJS.UI.processAll();

    L’exemple suivant montre le fichier default.js qui accompagne le fichier default.html créé automatiquement lorsque vous créez un projet Application vide.

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

    Cet exemple fonctionne si vous ajoutez l’objet ListView à votre page de démarrage (default.html). Si vous ajoutez ListView à un contrôle de page, vous n’avez pas besoin d’appeler WinJS.UI.processAll dans la mesure où le contrôle de page s’en charge à votre place. Si vous ajoutez ListView à vos fichiers HTML personnalisés, vous pouvez utiliser l’événement DOMContentLoaded pour appeler WinJS.UI.processAll. Pour plus d’informations sur l’activation des contrôles, voir Démarrage rapide : ajout de contrôles et de styles WinJS.

Ce code crée un objet ListView vide. Si vous exécutez l’application, vous ne verrez rien pour le moment. Dans la section suivante, vous créez des données que le contrôle ListView affichera.

Définition de vos données

Le fait de placer dans un fichier JavaScript distinct le code qui sert à créer votre source de données peut faciliter sa mise à jour. Dans cette section, découvrez comment créer un fichier JavaScript pour vos données, comment créer un objet List et comment utiliser la fonction WinJS.Namespace.define pour rendre les données accessible à l’ensemble de votre application.

  1. Utilisez Visual Studio pour ajouter un fichier de données dans votre projet. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier js du projet, puis sélectionnez Ajouter > Nouvel élément. La boîte de dialogue Ajouter un nouvel élément s’ouvre.

  2. Sélectionnez Fichier JavaScript. Attribuez-lui le nom de "dataExample.js". Cliquez sur Ajouter pour créer le fichier. Visual Studio crée un fichier JavaScript vide nommé dataExample.js.

  3. Ouvrez dataExample.js. Créez une fonction anonyme et activez le mode strict.

    Comme indiqué dans Codage d’applications de base, il est bon d’encapsuler le code JavaScript en l’englobant dans une fonction anonyme et il est judicieux d’utiliser le mode strict.

    (function () {
    "use strict"; 





})();

  4. Créez un tableau de données. Cet exemple permet de créer un tableau d’objets. Chaque objet possède trois propriétés : title, text et 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" }
    ];

})();

    Remarque  Si vous souhaitez personnaliser votre code, vous pouvez remplacer les images par des fichiers stockés sur votre ordinateur local, ou vous pouvez obtenir les images en téléchargeant l’exemple Prise en main de ListView (bien qu’il ne s’agisse pas du même exemple, il utilise les mêmes images). L’exemple s’exécute même si les images ne sont pas ajoutées.

     

  5. Utilisez le tableau pour créer un objet List.

    (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. Exposez l’objet List en déclarant un espace de noms et en ajoutant l’objet List en tant que membre public.

    Étant donné que le code que vous venez d’écrire se trouve dans une fonction anonyme, aucune de ces parties n’est inaccessible publiquement. En effet, l’utilisation de la fonction anonyme permet, en autres, de préserver la confidentialité des données privées. Pour que votre objet ListView puisse accéder à l’objet List, vous devez rendre celui-ci accessible publiquement. À cette fin, vous pouvez utiliser la fonction WinJS.Namespace.define pour créer un espace de noms et ajouter l’objet List en tant que membre de celui-ci.

    La fonction WinJS.Namespace.define prend les deux paramètres suivants : le nom de l’espace de noms à créer et un objet contenant une ou plusieurs paires propriété/valeur. La propriété indique le nom public du membre, tandis que la valeur désigne la variable, propriété ou fonction sous-jacente dans votre code privé que vous souhaitez exposer.

    Cet exemple permet de créer un espace de noms nommé DataExample exposant un membre public nommé itemList qui retourne votre objet List.

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

})();

Vous avez créé une source de données à laquelle votre contrôle ListView peut accéder. Vous allez ensuite connecter les données au contrôle ListView.

Connexion des données au contrôle ListView

  1. Dans la section head du fichier HTML contenant votre objet ListView, ajoutez une référence au fichier de données que vous venez de créer (dataExample.js) :

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

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

</head>

  2. Utilisez les données que vous avez créées dans la dernière section pour définir la propriété itemDataSource du contrôle ListView.

    La propriété itemDataSource indique un objet IListDataSource. L’objet List n’est pas un objet IListDataSource, mais il possède une propriété dataSource qui retourne une version IListDataSource de lui-même.

    Pour connecter vos données, définissez la propriété itemDataSource du contrôle ListView sur DataExample.itemList.dataSource :

    
<div id="basicListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource }">
</div>

Exécutez l’application. ListView affiche les propriétés et les valeurs de la source de données :

Affichage du contenu de la source de données sans modèle.

Le résultat ne ressemble pas à l’apparence recherchée. Nous voulons uniquement afficher les valeurs des champs de titre et de texte et nous souhaitons afficher les images elles-mêmes et non le chemin qui permet d’y accéder. Pour obtenir le rendu que nous voulons, nous devons définir un objet Template. La prochaine étape vous montre comment procéder.

Définition d’un modèle d’élément

À ce stade, le contrôle ListView dispose des données dont il a besoin, mais il ne sait pas comment les afficher. Pour cela, vous avez besoin d’un modèle d’élément qui contient le balisage nécessaire pour afficher chaque élément de liste. Le modèle d’élément peut contenir la plupart des autres contrôles (pour plus d’informations, voir la section Ajout d’éléments interactifs), mais il ne peut pas contenir un contrôle FlipView ou un autre contrôle ListView.

Il existe deux façons de créer un modèle : en utilisant un balisage pour définir un WinJS.Binding.Template, ou en créant une fonction de création de modèles. Cet exemple crée un modèle dans le balisage. Pour plus d’informations sur la création d’une fonction de création de modèles, voir la propriété itemTemplate.

Un objet WinJS.Binding.Template est facile à créer : vous définissez le balisage que vous voulez utiliser pour afficher chaque élément de liste, puis vous indiquez où s’affiche chaque champ de données.

  1. Dans votre code HTML, créez un contrôle WinJS.Binding.Template et affectez-lui un ID. Cet exemple utilise l’ID "mediumListIconTextTemplate".

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

    </div>

    Remarque  Le modèle devant être défini avant son utilisation, il convient d’ajouter le code HTML de votre modèle avant celui de votre contrôle ListView.

     

  2. WinJS.Binding.Template doit avoir un élément racine unique. Créez un élément div qui servira de parent au contenu du modèle.

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

        </div>
    </div>

  3. Créez le balisage que l’objet ListView produira pour chaque élément de données qu’il contient. Les données que vous avez créées à l’étape précédente contiennent un emplacement d’image, un titre et du texte. Il convient donc de créer les éléments suivants :

    • un élément img qui permet d’afficher le champ d’image,
    • un élément h4 pour l’affichage du champ du titre,
    • un élément h6 pour l’affichage du champ du texte.
        <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. Pour éviter les problèmes de disposition, spécifiez toujours la taille de l’élément racine d’un modèle et la taille des éléments img du modèle.

        <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. Définissez l’attribut data-win-bind pour chaque élément qui affiche des données. L’attribut data-win-bind utilise la syntaxe :

    data-win-bind="propertyName: dataFieldName"

     

    Par exemple, pour lier la propriété src d’un objet img au champ d’"image", utilisez la syntaxe :

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

    Pour définir plusieurs propriétés, séparez-les par un point-virgule :

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

     

    Cet exemple lie les éléments du modèle à leurs champs de données correspondants.

        <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. Pour utiliser le modèle d’élément, à l’aide de la syntaxe select, définissez la propriété itemTemplate de l’objet ListView sur le modèle.

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

    Désormais, lorsque vous exécutez l’application, les données liées apparaissent dans la liste.

    Contrôle ListView lié à des données affichant des images et du texte.

Application de styles au contrôle ListView

Le contrôle ListView n’adapte pas sa hauteur au contenu de manière dynamique. Pour assurer le rendu d’un contrôle ListView, vous devez spécifier une valeur absolue pour sa hauteur. Les feuilles de style WinJS définissent la hauteur du contrôle ListView à 400 pixels, mais il est facile de spécifier une autre hauteur en remplaçant le style par défaut par votre propre style CSS. Ajoutez ce style CSS au fichier CSS de votre application afin de définir la hauteur et la largeur du contrôle ListView et spécifiez une bordure :

Stylisation de ListView pour Windows

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

Stylisation de ListView pour Windows Phone 8.1

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

win-listview est une classe définie par WinJS et vous pouvez l’utiliser pour appliquer des styles au contrôle ListView. L’exemple que vous venez de voir modifie la hauteur, la largeur et la bordure de chaque contrôle ListView. Pour modifier uniquement l’un des contrôles ListView, ajoutez l’ID de l’élément ListView qui héberge le contrôle div au sélecteur :

Stylisation spécifique de ListView pour Windows

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

Stylisation spécifique de ListView pour Windows Phone 8.1

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

Exécutez l’application. Le contrôle ListView est maintenant suffisamment grand pour afficher tous les éléments.

Contrôle ListView de 500 pixels.

Les feuilles de style WinJS définissent des classes CSS que vous pouvez remplacer pour personnaliser l’apparence d’un contrôle WinJS. Les classes CSS que vous utilisez avec ListView sont les suivantes :

  • win-listview

    Spécifie les styles de l’objet ListView proprement dit.

  • win-container

    Spécifie les styles d’un conteneur d’élément ListView ou FlipView. Chaque élément possède son propre conteneur.

  • win-progress

    Spécifie les styles du contrôle de progression qui apparaît lorsque l’objet ListView charge des éléments.

Pour consulter une liste complète, voir ListView reference page.

Cet exemple définit un style qui ajoute une marge autour de chaque conteneur d’éléments dans le contrôle ListView.


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

Éléments stylisés dans un contrôle ListView

L’exemple suivant définit un style qui s’applique aux éléments d’une liste d’un contrôle ListView lorsque l’on pointe dessus.

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

Remarque  

Il est possible d’insérer une marge à gauche, en haut et en bas du contrôle ListView, mais pas à droite. Si vous voulez une marge à droite, vous pouvez ajouter un élément dont la largeur correspond à la marge que vous voulez insérer, définir sa propriété visibility sur « aucune », puis ajouter l’élément à droite du contrôle ListView.

 

Stylisation d’éléments

Les exemples précédents utilisaient les styles insérés et les classes WinJS pour appliquer un style à votre contrôle ListView et ses éléments. Vous pouvez aussi utiliser les classes CSS pour appliquer un style à votre modèle d’élément. L’exemple suivant met à jour le modèle défini à la section Définition d’un modèle d’élément. Il supprime les styles insérés définis et ajoute des classes CSS.

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

Ajoutez ces styles aux styles CSS de votre application :

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

Voici à quoi ressemble désormais le contrôle ListView :

ListView avec éléments personnalisés à l’aide d’un style

Vous n’êtes pas obligé de créer vos styles de modèles en partant de zéro. Pour obtenir un ensemble de modèles couramment utilisés avec les styles CSS correspondants, voir Modèles d’éléments pour les dispositions en liste et Modèles d’éléments pour les dispositions en grille.

Basculer entre les dispositions en liste, en grille et en cellule

L’élément ListView a trois modes de disposition : liste, grille et cellule.

  • Pour utiliser la disposition en liste, définissez la propriété layout sur WinJS.UI.ListLayout, comme illustré ci-dessous :

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

  • Pour utiliser la disposition en grille, définissez la propriété layout sur WinJS.UI.GridLayout, comme illustré ci-dessous :

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

  • (Windows uniquement) Pour utiliser la disposition en cellule, affectez la valeur WinJS.UI.CellSpanningLayout à la propriété layout, comme illustré ci-dessous :

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

Vous pouvez à tout moment modifier la disposition d’un contrôle ListView, même après sa création.

Regroupement de vos données

Vous pouvez regrouper des éléments dans votre objet ListView. Dans l’illustration suivante, les éléments sont regroupés dans l’ordre alphabétique :

ListView avec éléments groupés

Pour en savoir plus, voir Comment regrouper des éléments dans un contrôle ListView.

Ajout d’éléments interactifs à un modèle d’élément

Remarque  Le modèle d’élément peut contenir la plupart des autres contrôles, sauf un contrôle FlipView ou un contrôle ListView.

 

Sélection et appel d’éléments ListView

Normalement, lorsque l’utilisateur interagit avec un élément, le contrôle ListView prend en compte cette interaction et l’utilise pour déterminer si l’utilisateur a sélectionné ou appelé un élément ou s’il fait défiler les éléments. Pour qu’un élément interactif, tel qu’un contrôle, reçoive des informations, vous devez joindre la classe CSS win-interactive à cet élément interactif ou à l’un de ses éléments parents. Cet élément et ses enfants reçoivent l’interaction et ne déclenchent plus d’événements pour le contrôle ListView.

Lorsque vous joignez la classe win-interactive à un élément dans un modèle d’élément, veillez à ce que l’élément en question ne remplisse pas entièrement le modèle d’élément, sinon l’utilisateur ne pourra pas sélectionner ou invoquer ce dernier.

Pour ajouter des éléments interactifs à un modèle d’élément, nous vous recommandons d’utiliser une fonction de modélisation et non un modèle WinJS.Binding.Template. Pour plus d’informations sur les fonctions de création de modèle, voir Comment créer une fonction de modélisation.

Ajout de fonctionnalités de réorganisation, de glissement et de déplacement à un élément ListView (Windows uniquement)

Le contrôle ListView permet aussi aux utilisateurs de réorganiser, de faire glisser et de déplacer des éléments individuels. Par exemple, vous pouvez déclarer la fonctionnalité de glissement en affectant à la propriété itemsDraggable de l’élément ListView la valeur « true ». De même, pour permettre aux utilisateurs de réorganiser les éléments dans le contrôle ListView, vous affectez à la propriété itemsReorderable de ListView la valeur « true ».

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

La propriété itemsDraggable permet à des éléments individuels d’être déplacés visiblement à partir du contrôle ListView. Lorsque l’utilisateur fait glisser un élément à partir du ListView, l’événement itemdragstart est déclenché. (Cet événement est aussi déclenché au début d’une opération de réorganisation.) Quand un élément est déposé dans le ListView, le contrôle ListView déclenche un événement itemdragdrop.

Pour plus d’informations sur l’ajout de fonctionnalités de réorganisation, de glissement et de déplacement à un contrôle ListView, voir Comment activer les fonctionnalités de réorganisation, de glissement et de déplacement d’éléments dans un ListView ou télécharger l’exemple ListView HTML pour le glisser-déplacer et la réorganisation.

Exemples de contrôles ListView

Pour obtenir des exemples de code en direct de la quasi-totalité des contrôles WinJS et d’un éditeur en ligne, voir try.buildwinjs.com (en anglais).

Ces exemples supplémentaires vous permettent de mieux appréhender le contrôle ListView.

Récapitulatif et étapes suivantes

Vous avez appris à créer un contrôle ListView et à le lier à des données. Vous avez également appris à créer et à appliquer des styles à des modèles d’éléments.

Pour obtenir une liste de modèles d’éléments prédéfinis à utiliser dans votre application, voir Modèles d’éléments pour les dispositions en liste et Modèles d’éléments pour les dispositions en grille. Pour savoir comment regrouper des éléments, voir Comment regrouper des éléments dans un contrôle ListView.