Application d’un style aux barres de l’application et barres d’outils (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 ]

Fournit des exemples illustrant comment appliquer un style à une barre d’outils ou une barre d’application et à leurs contrôles.

Prérequis

Introduction

La rubrique Démarrage rapide : application de styles aux contrôles explique comment les feuilles de style de la Bibliothèque Windows pour JavaScript fournissent un ensemble de styles qui permettent de donner automatiquement à votre application une apparence Windows 10. Les exemples suivants démontrent l’utilisation de feuilles de style en cascade (CSS) pour personnaliser certains styles de barre d’application.

Thèmes à dominante claire et foncée

Lorsque vous choisissez la feuille de style à dominante claire ou foncée pour votre application, cela affecte l’apparence de la barre de l’application ainsi que des autres contrôles de votre application. Pour cet exemple de barre d’application :

<div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdAdd',disabled:'true',label:'Add',icon:'add',tooltip:'Add item',section:'primary',type:'flyout',
          flyout:select('#addFlyout'),onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',tooltip:'Remove item',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit',tooltip:'Edit item',section:'primary',onclick:Sample.outputCommand}">
          </button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',tooltip:'Take a picture',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdSettings',label:'Settings',icon:'settings',tooltip:'Settings',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdShare',label:'Share',icon:'reshare',tooltip:'Share',section:'primary',onclick:Sample.outputCommand}">
          </button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdPrint',label:'Print',section:'secondary',onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdNetwork',label:'Network',section:'secondary',onclick:Sample.outputCommand}"></button>
    </div>

Pour choisir la feuille de style à dominante foncée :

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

Ce qui produit une barre d’application qui ressemble à ceci :

Barre d’application de style à dominante foncée

Ou pour choisir la feuille de style à dominante claire :

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

Ce qui produit une barre d’application qui ressemble à ceci :

Barre d’application de style à dominante claire

Avec les mêmes feuilles de style, la barre d’outils aura une apparence semblable.

Propriétés CSS utiles

Les propriétés CSS suivantes sont couramment utilisées avec les contrôles AppBar et ToolBar :

Border-color : Contrôle la couleur de bordure de la barre de l’application.

Par exemple, border-color:rgb(255, 224, 100) ;
Background-color : Contrôle la couleur d’arrière-plan de la barre de l’application.

Par exemple, background-color:rgb(255, 224, 100) ;

Remarque Ces valeurs sont généralement prédéfinies par ui-light.css ou ui-dark.css.

Sélecteurs d’éléments et d’états courants

Voici certains sélecteurs CSS utiles pour appliquer un style aux éléments et états de vos contrôles :

.win-command permet d’appliquer un style à l’étiquette de commande de la barre d’application :
```
.win-appbar .win-command
{
    color: rgb(28, 160, 218);
}
```
Remarque L’utilisateur doit toucher ou cliquer sur les ellipses pour ouvrir la barre de l’application et voir cet effet. Les étiquettes de commande sont masquées par défaut.
.win-commandimage permet d’appliquer un style à l’image d’icône du bouton :
```
.win-appbar .win-commandimage
{
    color: rgb(28, 160, 218);
}
```

Pseudo-classes

Vous pouvez utiliser les pseudo_classes suivantes en tant que sélecteurs pour appliquer un style aux boutons de barre de l’application quand ils se trouvent dans certains états :

:hover : l’utilisateur place le curseur sur l’icône du bouton et ne l’active pas en cliquant dessus, ce qui change la couleur d’arrière-plan du bouton tant que le curseur reste positionné sur ce dernier. Une info-bulle pour le bouton est également affichée par défaut pendant le survol.
:active: le bouton est actif entre le moment où l’utilisateur appuie sur le contrôle et le moment où il choisit une option ou si le bouton est défini sur type="toggle".
:disabled : le changement de couleur de l’icône indique que le bouton ne peut pas accepter d’interaction utilisateur. La propriété disabled du bouton doit être définie sur "disabled" pour que cette pseudo-classe soit appliquée.

Application d’un style à une barre de l’application avec des couleurs personnalisées

Autre exemple d’application de style à une barre de l’application :

.win-appbar .win-appbar-actionarea
{
   background-color: yellow;
}


.win-appbar .win-commandimage
{
    color: red;
}

produit les couleurs suivantes pour la barre de l’application :

Barre de l’application jaune

Pour appliquer un style à la couleur d’arrière-plan de la zone de débordement, le code se présente comme suit :

.win-appbar .win-appbar-overflowarea
{
   background-color: green;
}

Et pour appliquer un style similaire à une barre d’outils, le code se présente comme suit :

.win-toolbar win-toolbar-overflowarea{
   background-color: green;
}

.win-toolbar .win-commandimage
{
    color: red;
}

.win-toolbar win-toolbar-overflowarea
{
   background-color: green;
}

Applications de styles à éviter

Il est possible d’utiliser CSS pour changer l’apparence des barres d’application et des barres d’outils. Cela est particulièrement vrai pour le fonctionnement fluide des animations de barre d’application et de barre d’outils. Voici les éléments à risque connus :

padding — ne modifiez pas les valeurs par défaut.
border — ne modifiez pas les valeurs par défaut.
margin — appliquez un style homogène aux marges, mais uniquement sur les éléments ToolBar et AppBar :
```
.win-toolbar, .win-appbar {
   margin: 3px;
}
```

background-color — les styles peuvent être appliqués sans problème sur les zones d’action et les zones de débordement :

.win-toolbar-actionarea, .win-appbar-actionarea {
   background-color: rgb(0,0,127);
}
.win-toolbar-overflowarea, .win-appbar-overflowarea {
   background-color: rgb(0,0,255);

position, float — n’appliquez pas de style à ces attributs CSS directement sur l’élément ToolBar, mais vous pouvez encapsuler ce dernier dans un élément parent qui leur applique un style. Remarque Cette restriction ne s’applique pas à l’élément AppBar.

Problèmes connus

Masquage de TooBar : le composant ToolBar ne doit être masqué qu’avec les API publics. S’il est courant d’utiliser une classe CSS « parapluie » pour masquer plusieurs composants, cette pratique est déconseillée pour la barre d’outils (ou la barre d’application). Le problème est que la barre d’outils a été optimisée en termes de performances pour mettre en cache l’état de ses commandes, plutôt que de s’appuyer sur le DOM pour savoir si une commande est visible ou non. Cela permet à la barre d’outils d’être adaptative et de faire déborder les commandes quand elles ne tiennent pas dans la zone active disponible, tout en éliminant les dispositions de navigateur coûteuses qui ont lieu lors de la lecture du DOM. Si CSS est utilisé pour appliquer un style masqué aux boutons, la barre d’outils ne reconnaît pas qu’une commande a été masquée et commence à faire déborder les commandes trop tôt, comme l’espace disponible dans la zone active de la barre d’outils diminue au cours du redimensionnement de la fenêtre.

Au lieu de cela, vous devez uniquement définir la propriété Command.hidden ou appeler la méthode ToolBar.showOnlyCommands() pour afficher et masquer les commandes dans la barre d’outils.
Échec de débordement adaptatif : le comportement de débordement adaptatif de la barre d’outils ne fonctionne pas correctement lorsque l’élément ToolBar est défini pour « s’ajuster au contenu ».

Par exemple, le composant ToolBar est conçu pour exister à l’intérieur d’autres composants (il est généralement imbriqué dans un autre élément div). Normalement, à l’intérieur de son propre élément div, la barre d’outils occupe 100 % de la largeur de son parent. Cependant, si la disposition CSS utilisée par le parent l’imbrique dans quelques zones flexibles et que la classe transportcontrols personnalisée du parent utilise align-items:center; pour limiter la barre d’outils à la largeur de ses commandes, un comportement inattendu se produira. Cela s’explique par le fait que la barre d’outils met en cache son paramètre width et essaie de faire déborder les commandes quand elle estime ne pas avoir suffisamment d’espace pour elles. La barre d’outils nécessite une largeur élément constante, mais les styles utilisés dans ce scénario lui donnent une largeur flexible.

La solution de contournement pour ce scénario (même conjointement avec la solution pour le masquage de la barre d’outils) implique la modification de la classe transportcontrols personnalisée du parent de manière à utiliser align-items:stretch;. Les tests ont montré qu’il s’agit d’une solution simple, mais si vous ne pouvez pas modifier align-items pour une raison quelconque, vous pouvez parvenir au résultat final en plaçant align-self:stretch directement dans l’élément ToolBar.

Récapitulatif et étapes suivantes

Dans cet article, nous avons montré quelques exemples d’application de styles à une barre d’application et une barre d’outils, ainsi qu’à leurs contrôles. Nous avons également fourni des informations sur des problèmes de conception à prendre en compte afin d’éviter des problèmes liés à l’utilisation de barres d’application et de barres d’outils dans votre application.

Découvrez —en pratique— l’application de styles aux barres d’application et aux barres d’outils sur le site web Essayer WinJS. Jouez avec le code et voyez immédiatement le résultat.