Ajout d’une barre d’application avec du contenu personnalisé (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 avez la possibilité d’ajouter une barre d’application avec du contenu personnalisé à votre application du Windows Store en JavaScript. Le contrôle AppBar et les contrôles AppBarCommand qu’il renferme peuvent être personnalisés de différentes manières : vous pouvez ajouter du contenu HTML personnalisé, créer des menus volants, insérer des commandes bascules et bien d’autres éléments encore.

Remarque Si vous cherchez à créer une barre de navigation persistante pour votre application, servez-vous du contrôle NavBar à la place. Pour plus d’informations sur la création d’une barre de navigation, voir Démarrage rapide : ajout d’une barre de navigation et de boutons Précédent.

Prérequis

Instructions

Créer un projet à l’aide du modèle Application vide

Démarrez Microsoft Visual Studio.
Sous l’onglet Page de démarrage, cliquez sur Nouveau projet. La boîte de dialogue Nouveau projet s’ouvre.
Dans le volet Installé, développez Modèles et JavaScript, puis sélectionnez le type de modèle Application du Windows Store. Les modèles de projets proposés pour JavaScript s’affichent dans le volet central de la boîte de dialogue.
Dans le volet central, choisissez le modèle de projet Application vide.
Dans la zone de texte Nom, tapez Démonstration barre d’appl. personnalisée.
Cliquez sur OK pour créer le projet.

2. Ajouter le contrôle de la barre et personnaliser ses commandes

Vous avez la possibilité de personnaliser la barre d’application au moyen de commandes personnalisables. Vous pouvez changer le type d’un contrôle AppBarCommand à l’aide de sa propriété type. Seuls certains éléments HTML peuvent héberger quelques types de commande de barre d’application.

La propriété AppBarCommand.type accepte l’une des cinq valeurs suivantes :

button : valeur par défaut du type. Elle définit un bouton standard et s’applique uniquement à un élément <button>.
flyout : crée un bouton révélant un fragment HTML adjacent (un menu volant). Pour créer un menu volant AppBarCommand, spécifiez le type "flyout" et définissez sa propriété flyout. La propriété flyout doit faire référence à un contrôle Flyout défini. Seul un élément <button> peut héberger un menu volant AppBarCommand.
toggle : crée un bouton que vous pouvez sélectionner ou supprimer. Lorsque vous sélectionnez le bouton, les couleurs de l’icône de l’objet AppBarCommand sont inversées (par exemple, de noir en blanc et de blanc en noir). Seul un élément <button> peut héberger un bouton bascule AppBarCommand.
separator : crée une ligne horizontale dans l’objet AppBar afin de créer une séparation visuelle entre d’autres contrôles AppBarCommand. Seul un élément <hr/> peut héberger un séparateur AppBarCommand.
content : crée un objet AppBarCommand capable d’héberger et d’intégrer d’autres balises HTML. Le balisage hébergé peut inclure du texte, des balises <input> et même un sous-ensemble de contrôles de la bibliothèque Windows pour JavaScript (WinJS). Seul un élément <div> peut héberger un objet AppBarCommand de contenu.

Vous pouvez créer des contrôles AppBar et AppBarCommand de manière déclarative dans HTML ou au moment de l’exécution en utilisant JavaScript. Cet exemple crée la barre d’application de façon déclarative dans le balisage HTML du fichier default.html. Cet exemple contient sept contrôles AppBarCommand.

Hh780658.wedge(fr-fr,WIN.10).gif Pour ajouter du contenu personnalisé à la barre d’application

Dans l’Explorateur de solutions, ouvrez le fichier default.html à partir de la racine de la solution.

Remplacez le balisage à l’intérieur des balises <body> par le balisage suivant.

<div data-win-control="WinJS.UI.AppBar"
    data-win-options="{
        placement: 'bottom'
    }">
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'default'
            icon: 'placeholder',
            label: 'Button',
            type: 'button'
    }">
    </button>
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'flyout', 
            icon: 'volume', 
            label: 'Volume', 
            type: 'flyout',
            flyout: select('#volumeFlyout')}">
    </button>
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'toggle', 
            icon: 'filter', 
            label: 'Filter', 
            type: 'toggle'}">
    </button>
    <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'separator' }"/>
    <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'content' }">
        <p>You can include a wide variety of HTML inside of a 'content' AppBarCommand, <br/>
        including HTML and some WinJS controls.</p>
    </div>
    <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'content' }">
        <div id="itemContainer"
             data-win-control="WinJS.UI.ItemContainer">
            <h3>Item Container</h3>
        </div>
    </div>
</div>
<div id="volumeFlyout"
     data-win-control="WinJS.UI.Flyout">
    <h3>Volume</h3> <input type="range" />
</div>

Récapitulatif

Dans ce guide de démarrage rapide, vous avez ajouté une barre d’application dotée de boutons personnalisés à votre application.

Cet article n’explique pas comment créer une barre de navigation. Pour savoir comment créer une barre de navigation, voir Démarrage rapide : ajout d’une barre de navigation et de boutons Précédent.

Rubriques associées

WinJS.UI.AppBar

WinJS.UI.AppBarCommand.type

WinJS.UI.AppBarCommand.flyout

Démarrage rapide : ajout d’un menu volant

Partager via