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

[ 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 FlipView de nombreuses façons. Vous pouvez styliser l’objet FlipView lui-même, les éléments qu’il contient ou les modèles qui composent ces éléments.

Prérequis

• Démarrage rapide : ajout d’un contrôle FlipView

Éléments d’un objet FlipView que vous pouvez styliser

À l’instar de la plupart des contrôles de la bibliothèque Windows pour JavaScript, l’objet FlipView fournit également un ensemble de classes CSS que vous pouvez utiliser pour styliser des éléments spécifiques du contrôle. Par exemple, pour styliser le bouton de navigation gauche du contrôle FlipView, vous remplacez la classe CSS win-leftnav.

Voici un diagramme des éléments d’un contrôle FlipView que vous pouvez styliser.

Stylisation du contrôle FlipView lui-même

Pour créer un contrôle FlipView, créez un élément div et définissez sa propriété data-win-control sur "WinJS.UI.FlipView". Vous pouvez appliquer des styles CSS à cet élément div (élément hôte) tout comme vous les appliqueriez à tout autre élément. En fait, spécifiez toujours les propriétés width et height de l’élément div hôte.

 <div id="basicFlipView" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>  

Vous pouvez également utiliser la classe win-flipview pour styliser la totalité de l’objet FlipView. Lorsque votre objet FlipView est créé, cette classe est ajoutés à l’élément div hôte.

Stylisation des boutons de navigation du contrôle FlipView

Le contrôle FlipView comporte quatre boutons de navigation. Lorsque la propriété orientation du contrôle FlipView est "horizontale", elle utilise les boutons de navigation gauche et droit. Lorsque la propriété orientation est "verticale", elle utilise les boutons de navigation haut et bas. Voici les éléments que vous pouvez utiliser pour styliser les boutons de navigation du contrôle FlipView.

• win-navbottom
  Stylise le bouton de navigation bas.

• win-navbutton
  Stylise tous les boutons de navigation.

• win-navleft
  Stylise le bouton de navigation gauche.

• win-navright
  Stylise le bouton de navigation droit.

• win-navtop
  Stylise le bouton de navigation haut.

Cet exemple permet de donner une couleur rouge et un contour noir au bouton de navigation gauche.

#styledHorizontalFlipview .win-navleft {
    background-color: red;
    border: 2px solid black;
}

<div id="styledHorizontalFlipview" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

Pseudo-classes pour styliser des boutons de navigation

Vous pouvez utiliser des pseudo-classes en tant que sélecteurs pour styliser les boutons de navigation quand ils se trouvent dans certains états. Voici certaines des pseudo-classes les plus utiles pour styliser les boutons de navigation :

• win-navbutton:hover
  Applique des styles aux boutons de navigation d’un contrôle FlipView quand l’utilisateur place le curseur sur un bouton de navigation, mais qu’il ne l’a pas activé en cliquant dessus.

  L’exemple suivant définit un style pour un bouton de navigation dans l’état « pointage ».

  #styledHorizontalFlipview .win-navbutton:hover {
      background-color: orange;
      border: 2px solid white;
  }
  

  <div id="styledHorizontalFlipview" 
      style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
      data-win-control="WinJS.UI.FlipView"
      data-win-options="{ 
          itemDataSource: DefaultData.bindingList.dataSource, 
          itemTemplate: select('#simpleItemTemplate'),
          orientation: 'horizontal' 
      }">
  </div>
  

• win-navbutton:active
  Applique des styles au bouton de navigation d’un contrôle FlipView quand le bouton est actif. Le bouton de navigation est actif entre le moment où l’utilisateur appuie sur le contrôle et le moment où il le relâche. Si l’utilisateur appuie sur le contrôle et fait glisser le pointeur hors du bouton, le contrôle reste actif jusqu’à ce que l’utilisateur relâche le pointeur.

  L’exemple suivant modifie la couleur d’arrière-plan d’un bouton de navigation actif.

  #styledHorizontalFlipview .win-navbutton:active {
      background-color: limegreen;
  }
  

  <div id="styledHorizontalFlipview" 
      style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
      data-win-control="WinJS.UI.FlipView"
      data-win-options="{ 
          itemDataSource: DefaultData.bindingList.dataSource, 
          itemTemplate: select('#simpleItemTemplate'),
          orientation: 'horizontal' 
      }">
  </div>
  

Stylisation d’éléments

Une manière de styliser des éléments consiste à utiliser des feuilles de style en cascade (CSS) pour styliser les éléments HTML dans le modèle lui-même.

Cet exemple utilise des feuilles de style en cascade pour styliser le modèle lui-même.

.itemStyling p {
    margin-left: 120px;
}

.simpleItemTemplateRoot {
    width: 480px; 
    height: 310px;
}

.simpleItemTemplateImage {
    height: 270px; 
    width: 480px;
}

.simpleItemTemplateText {
    height: 40px; 
    padding: 5px;
}

 <div id="simpleItemTemplate" 
     data-win-control="WinJS.Binding.Template" 
     style="display: none">
    <div class="simpleItemTemplateRoot">
        <img class="simpleItemTemplateImage"
             src="#" 
             data-win-bind="src: picture; alt: title"
             />       
        <div class="simpleItemTemplateText" 
            data-win-bind="innerText: title" >
        </div>     
    </div>
</div>
  
 <div id="basicFlipView" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>  

Vous pouvez également utiliser la classe CSS win-item pour styliser l’élément div qui contient l’élément.

Rubriques associées

Recommandations en matière de contrôles de vue symétrique