Application d’un style au contrôle ListView et à ses éléments (HTML)

Article
03/04/2016

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

Vous pouvez personnaliser un objet ListView de nombreuses façons. Vous pouvez styliser l’objet ListView lui-même, les éléments qu’il contient ou les modèles qui composent ces éléments.

Utilisation des classes CSS de la bibliothèque Windows pour JavaScript

Comme les autres contrôles de la bibliothèque Windows pour JavaScript , l’objet ListView fournit un ensemble de classes que vous pouvez redéfinir pour personnaliser son apparence. Les sections suivantes expliquent comment utiliser ces classes pour personnaliser l’objet ListView.

Stylisation de l’objet ListView lui-même

Avant d’aborder la stylisation des éléments de l’objet ListView, penchons-nous sur la stylisation de l’objet ListView lui-même. Voici les principales classes que vous utilisez pour styliser l’objet ListView :

win-listview : stylise la totalité de l’objet ListView.
win-viewport : stylise la fenêtre d’affichage. Il s’agit de l’endroit où la barre de défilement apparaît le cas échéant.
win-surface : stylise la zone avec défilement de l’objet ListView. Lorsque la surface est plus grande que la fenêtre d’affichage, celle-ci affiche des barres de défilement.

Voici un exemple classique d’objet ListView contenant des éléments groupés.

Objet ListView contenant des éléments groupés.

L’illustration suivante montre le même objet ListView en mettant en évidence ses parties win-listview, win-viewport et win-surface :

Composants d’un objet ListView

Recommandations générales pour la stylisation

Affectez un ID à l’objet ListView et placez cet ID au début du sélecteur CSS, comme dans cet exemple :

#myListView .win-listview {
    background-image: url('../images/icecream.png'); 
    border: 2px solid red;
}

Le contrôle ListView a plusieurs styles par défaut. Si vous tentez de remplacer l’un des styles et ne constatez aucun effet, cela est peut-être dû au fait que le sélecteur CSS n’est pas suffisamment spécifique pour remplacer les styles par défaut.

Stylisation de la totalité du contrôle ListView

Si vous souhaitez ajouter une image d’arrière-plan fixe au contrôle ListView qui apparaît derrière les éléments à l’intérieur ou appliquer une bordure à la totalité du contrôle, redéfinissez la classe win-listview. L’exemple suivant définit un arrière-plan d’image et une bordure rouge pour l’objet ListView.

#myListView .win-listview {
    background-image: url('../images/icecream.png'); 
    border: 2px solid red;
}

Voici à quoi ressemble désormais l’objet ListView :

Objet ListView avec une bordure et une image d’arrière-plan

Stylisation des marges sur le contrôle ListView

Utilisez la classe win-surface pour appliquer des marges et un remplissage sur le contrôle ListView. N’appliquez pas des marges à l’élément div qui héberge le contrôle ListView, car il ne sera pas stylisé correctement. Utilisez plutôt win-surface. Si vous ajoutez une marge à win-surface, ajustez en conséquence la hauteur du contrôle ListView. Pour définir la hauteur, stylisez l’élément div qui héberge le contrôle ListView.

N’ajoutez aucune marge ni aucun remplissage à win-surfacesi vous utilisez une list layout.

Par défaut, les en-têtes des groupes ont une marge gauche de 70px. Si vous redéfinissez win-surface en affichant des groupes, nous vous recommandons de définir la marge de gauche avec une valeur de 70px + quelle que soit la marge que vous voulez ajouter.

Stylisation de la fenêtre d’affichage en fonction du sens de son défilement

Vous pouvez utiliser les classes win-horizontal et win-vertical pour appliquer des styles à l’objet ListView lorsque l’utilisateur le fait défiler horizontalement ou verticalement. L’exemple suivant ajoute une marge gauche à la fenêtre d’affichage si l’utilisateur fait défiler l’objet ListView horizontalement.

#myListView .win-listview .win-viewport.win-horizontal {
    margin-left: 10px;  
}

L’exemple suivant supprime la marge gauche si l’utilisateur fait défiler l’objet ListView verticalement. Il est courant d’attribuer à l’objet ListView une orientation verticale lorsque l’état d’affichage est ancré.


#myListView .win-listview .win-viewport.win-vertical {
    margin-left: 0px; 
}

Stylisation de la totalité de la zone avec défilement

Pour styliser la portion avec défilement de l’objet ListView, redéfinissez la classe win-surface. Cet exemple applique à l’objet ListView une image d’arrière-plan qui défile lorsque l’utilisateur parcourt les éléments.


#myListView .win-listview .win-surface {
    background-image: url('../images/icecream.png'); 
}

Objet ListView dont l’aire est stylisée

Stylisation de l’indicateur de la progression du chargement

L’objet ListView affiche un indicateur progress pendant le chargement des éléments. Vous pouvez styliser cet indicateur en redéfinissant la classe win-progress. L’exemple suivant masque l’indicateur progress.

#myListView .win-listview .win-progress{
    display: none;
}

Stylisation des éléments et des groupes

L’objet ListView contient des groupes et des éléments.

Chaque groupe se trouve dans un en-tête de groupe, représenté par la classe win-groupheader.
Chaque élément se trouve dans un conteneur d’élément, représenté par la classe win-container.

Composants en-tête de groupe et conteneur d’un objet ListView

Stylisation d’un élément

Vous pouvez styliser les éléments de l’objet ListView de deux façons. Vous pouvez appliquer des styles au modèle d’élément ou redéfinir la classe win-container. Dans le modèle, vous devez systématiquement définir la taille des éléments. Si vous ne définissez pas la taille des éléments, vous risquez d’obtenir une disposition différente de celle souhaitée.

Pour définir la taille des éléments :

Si vous utilisez un objet WinJS.Binding.Template, définissez la taille de l’enfant de l’élément WinJS.Binding.Template, comme indiqué dans l’exemple suivant :

<!-- The WinJS.Binding.Template element. -->
<div id="templateExample" data-win-control="WinJS.Binding.Template">

    <!-- This is the root element. Be sure to set its width and height. -->
    <div style="width: 120px; height: 125px;">


        <img src="#" data-win-bind="alt: title; src: picture"
            style="width: 60px; height: 60px;" />
        <div>
            <h4 data-win-bind="innerText: title">
            </h4>

            <h6 data-win-bind="innerText: text">
            </h6>
        </div>
    </div>
</div>

Si vous utilisez une fonction de modélisation, définissez la largeur et la hauteur de tout élément DOM retourné par cette fonction.

Stylisation du conteneur de l’élément

Pour styliser le conteneur de l’élément, redéfinissez la classe win-container. Cet exemple ajoute une marge au conteneur de chaque élément.

#myListView .win-listview .win-container{
    margin: 2px;
}

Vous pouvez uniquement styliser deux propriétés sur win-container : margin et background.

Pour rendre un élément transparent, définissez la couleur de l’arrière-plan sur transparent. Cet exemple rend un élément transparent :

#myListView .win-container:not(.footprint):not(.hover)
{
    background-color: transparent;
}

Stylisation des marges et du remplissage sur les éléments

Pour ajouter du remplissage entre les éléments, définissez une marge sur la classe win-container. Nous vous déconseillons d’ajouter du remplissage entre les éléments pour les espacer ; utilisez de préférence une marge. Tous les éléments dans le même contrôle ListView doivent avoir la même marge.

Ne changez ni la marge ni le remplissage sur win-container après que le contrôle ListView a commencé à afficher des éléments.

Stylisation de l’en-tête de groupe

Pour styliser l’en-tête de groupe, redéfinissez la classe win-groupheader. L’exemple suivant ajoute un arrière-plan gris aux en-têtes de groupe.

#myListView .win-listview .win-groupheader {                        
        background-color: #bfbfbf;           
}

Objet ListView dont les en-têtes de groupe sont stylisés

Stylisation des interactions avec un élément

Stylisation d’un élément dans l’état « survol »

Lorsque l’utilisateur déplace le pointeur au-dessus d’un élément, celui-ci se trouve dans l’état « survol ». Pour modifier le style d’un élément qui se trouve dans l’état « survol », utilisez la pseudo-classe hover. L’exemple suivant modifie l’arrière-plan et le contour d’un élément survolé.

#myListView .win-container:hover {
    background-color: red; 
    outline: orange solid 5px;
}

Objet ListView dont un élément se trouve dans l’état « survolé »

Stylisation des éléments qui ont le focus

Pour styliser un élément qui a le focus, utilisez la classe win-focus dans le cadre du sélecteur de style lorsque vous stylisez le conteneur de l’élément. Pour styliser le contour qui a le focus, utilisez la classe win-focusedoutline. L’exemple suivant transforme le contour qui a le focus en une ligne rouge en pointillé.

#myListView .focusExample.win-listview .win-focusedoutline {
    outline: red dashed 2px;
                     
}

Stylisation des éléments sélectionnés

Par défaut, les éléments sélectionnés sont entourés d’une bordure. Si vous voulez que les éléments sélectionnés aient un aspect « rempli », joignez la classe CSS win-selectionstylefilled au contrôle ListView.

Pour personnaliser davantage l’apparence des éléments sélectionnés, vous pouvez redéfinir ces classes :

win-selectionborder

Stylise la bordure d’un élément sélectionné.
win-selectionbackground

Stylise l’arrière-plan des éléments sélectionnés.
win-selectionhint

Stylise l’indicateur de sélection, seconde coche qui apparaît derrière l’élément sélectionné. Le balayage de l’élément fait apparaître l’indicateur de sélection.
win-selectioncheckmark

Coche associée à un élément sélectionné.
win-selectioncheckmarkbackground

Arrière-plan de la coche associée à un élément sélectionné.

Vous pouvez également ajouter la classe win-selected dans le cadre de votre sélecteur de style pour personnaliser d’autres composants, tels que le conteneur de l’élément, lorsqu’un élément est sélectionné.