Comment faire fonctionner les barres d’application avec les contrôles ListView

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 ]

Cette procédure explique l’interaction entre le contrôle ListView et la barre d’application permettant de prendre en charge ces scénarios tout en suivant les pratiques recommandées en matière de barres d’application. Généralement, le contrôle ListView permet à l’utilisateur d’effectuer un panoramique horizontal de la collection d’objets et de sélectionner un ou plusieurs de ces objets pour effectuer des actions. Ces actions sont souvent exposées dans la barre d’application.

Prérequis

Lisez les Recommandations en matière de barres d’application et les Recommandations en matière de contrôles ListView.

Instructions

Étape 1: Tenir les promesses de la barre d’application

Appel : si une barre d’application existe, les utilisateurs doivent pouvoir l’appeler ou la masquer à tout moment par le biais des mécanismes standard.
Si aucune commande ne doit être exposée tant qu’un objet n’est pas sélectionnée, aucune barre d’application ne doit s’afficher.
Les commandes s’affichant sans qu’un objet soit sélectionné doivent se trouver dans la zone d’action de la barre d’application, avec quelques rares exceptions à droite de la barre d’application.

Étape 2: Prendre en charge la sélection et les sélections multiples

Affichez la barre d’application par programmation lors de la sélection.
Affichez les commandes propres à la sélection dans la section contextuelle de la barre d’application (à gauche, à quelques rares exceptions près).
Affichez des commandes supplémentaires le cas échéant lorsque plusieurs objets sont sélectionnés (par exemple, annuler la sélection).
Masquez les commandes contextuelles basées sur la sélection.

Voici le code HTML pour une barre d’application avec des commandes.

<!-- AppBar with contextual commands for a ListView -->
<!-- BEGINTEMPLATE: Template code for AppBar -->
<div id="scenarioAppBar" data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'primary',extraClass:'singleSelect',tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdSelectAll',label:'Select All',icon:'selectall',section:'primary',extraClass:'multiSelect',tooltip:'Select All'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdClearSelection',label:'Clear Selection',icon:'clearselection',section:'primary',extraClass:'multiSelect',tooltip:'Clear Selection'}"></button>
    <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator',section:'primary',extraClass:'multiSelect'}" />
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',section:'primary',extraClass:'multiSelect',tooltip:'Delete item'}"></button>
</div>
<!-- ENDTEMPLATE -->

Lorsque la barre d’application est initialisée, les commandes contextuelles de sélection sont masquées.

function initAppBar() {
    var appBarDiv = document.getElementById("scenarioAppBar");
    var appBar    = document.getElementById("scenarioAppBar").winControl;
    // Add event listeners
    document.getElementById("cmdAdd").addEventListener("click", doClickAdd, false);
    document.getElementById("cmdDelete").addEventListener("click", doClickDelete, false);
    document.getElementById("cmdSelectAll").addEventListener("click", doClickSelectAll, false);
    document.getElementById("cmdClearSelection").addEventListener("click", doClickClearSelection, false);
    appBar.addEventListener("beforeopen", doAppBarShow, false);
    appBar.addEventListener("beforeclose", doAppBarHide, false);        
    // Hide selection group of commands
    appBar.hideCommands(appBarDiv.querySelectorAll('.multiSelect'));
    // Disable AppBar until in full screen mode
    appBar.disabled = true;
}

Cette fonction affiche la barre d’application et les commandes contextuelles basées sur la sélection.

function doSelectItem() {
    var appBarDiv = document.getElementById("scenarioAppBar");
    var appBar =    document.getElementById('scenarioAppBar').winControl;
    var listView =  document.getElementById("scenarioListView").winControl;
    var count = listView.selection.count();
    if (count > 0) {
        // Show multi-select commands in AppBar
        appBar.showOnlyCommands(appBarDiv.querySelectorAll('.win-command'));
        appBar.open();
    } else {
        // Hide multi-select commands in AppBar
        appBar.close();
        appBar.showOnlyCommands(appBarDiv.querySelectorAll('.singleSelect'));
    }
}

Étape 3: Modifier la position de la barre de défilement

Pour prendre en charge le défilement lorsque la barre d’application est visible, comme pour la sélection multiple, la barre de défilement doit être placée de façon à se trouver au-dessus de la barre d’application. En raison de la traduction, attendez-vous à ce que les libellés des boutons de la barre d’application soient plus longs d’une ligne que les libellés en anglais uniquement. Lorsque vous placez la barre de défilement, prenez en compte cette ligne supplémentaire. Ainsi, par exemple, une barre d’application à libellé unique de 88 px de hauteur en anglais doit avoir une hauteur de 108 px avec des libellés de deux lignes.

Concevez votre contrôle ListView de façon à ce que la barre de défilement présente un espace libre de 108 px pour la barre d’application. Ensuite, modifiez la position de la barre de défilement de façon à ce qu’elle soit visible et se trouve à l’endroit approprié selon que la barre d’application est présente ou non.

/* This function slides the ListView scrollbar into view if occluded by the AppBar */
function doAppBarShow() {
    var listView = document.getElementById("scenarioListView");
    var appBar = document.getElementById("scenarioAppBar");
    var appBarHeight = appBar.offsetHeight;
    }
}

/* This function slides the ListView scrollbar back to its original position */
function doAppBarHide() {
    var listView = document.getElementById("scenarioListView");
    var appBar = document.getElementById("scenarioAppBar");
    var appBarHeight = appBar.offsetHeight;
    }
}

Étape 4: Prendre en charge le défilement et les zooms

Pour prendre en charge les zooms et le défilement vertical, placez la barre d’application et le contrôle ListView dans des divs homologues et vérifiez que le zoom s’applique uniquement au div du contrôle ListView, et non à la page entière.

<!-- Full screen container for ListView -->
<div id="scenarioFullscreen">
    <button id="scenarioHideListView">Hide ListView</button>
    <header aria-label="Header content" role="banner">
        <button id="scenarioBackButton" class="win-backbutton" aria-label="Back"></button>
        <div class="titlearea win-type-ellipsis">
            <h1 class="titlecontainer" tabindex="0">
                <span class="pagetitle">Ice cream</span>
            </h1>
        </div>
    </header>
    <section role="container">
        <div id="scenarioListView"
            data-win-control="WinJS.UI.ListView"
            data-win-options="{ itemTemplate: smallListIconTextTemplate, selectionMode: 'multi', tapBehavior: 'toggleSelect', swipeBehavior: 'select', layout: { type: WinJS.UI.GridLayout, maxRows: 4 }}" >
        </div>
    </section>
</div>    
<!-- AppBar with contextual commands for a ListView -->
<!-- BEGINTEMPLATE: Template code for AppBar -->
<div id="scenarioAppBar" data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'primary',extraClass:'singleSelect',tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdSelectAll',label:'Select All',icon:'selectall',section:'primary',extraClass:'multiSelect',tooltip:'Select All'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdClearSelection',label:'Clear Selection',icon:'clearselection',section:'primary',extraClass:'multiSelect',tooltip:'Clear Selection'}"></button>
    <hr     data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator',section:'primary',extraClass:'multiSelect'}" />
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',section:'primary',extraClass:'multiSelect',tooltip:'Delete item'}"></button>
</div>
<!-- ENDTEMPLATE -->

Remarques

Certaines applications peuvent bénéficier des interactions entre les contrôles ListView et la barre d’application. Suivez ces quelques pratiques recommandées pour vous aligner sur l’expérience utilisateur recommandée.