Come creare barre dell'app utilizzabili con controlli ListView

Articolo
03/04/2016

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Questa procedura descrive l'interazione tra il controllo ListView e la barra dell'app per supportare questi scenari applicando le procedure consigliate per la barra dell'app. Normalmente, il controllo ListView permette agli utenti di eseguire la panoramica orizzontale della raccolta di oggetti e di selezionare uno o più oggetti per eseguire alcune azioni. Queste azioni sono spesso esposte nella barra dell'app.

Prerequisiti

Leggi Linee guida per le barre dell'app e Linee guida per i controlli ListView.

Istruzioni

Passaggio 1: Mantenere le promesse delle barre dell'app

Chiamata: se è presente una barra dell'app, gli utenti devono poterla chiamare o nascondere in qualsiasi momento tramite meccanismi standard.
Se non sono disponibili comandi da esporre fino alla selezione di un oggetto, la barra dell'app non deve essere visualizzata.
I comandi presenti indipendentemente dalla selezione devono essere inseriti nell'area delle azioni della barra dell'app o, con pochissime eccezioni, nella sua parte destra

Passaggio 2: Supportare selezione e selezione multipla

Mostra la barra dell'app a livello di codice in seguito alla selezione.
Mostra comandi specifici per la selezione nella sezione contestuale della barra dell'app, nella parte sinistra a parte pochissime eccezioni.
Mostra comandi aggiuntivi se necessario quando viene selezionato più di un oggetto, ad esempio per cancellare la selezione.
Nascondi i comandi contestuali alla selezione.

Ecco il codice HTML per una barra dell'app con comandi.

<!-- 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 -->

Quando la barra dell'app viene inizializzata, i comandi contestuali della selezione sono nascosti.

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;
}

Questa funzione mostra la barra dell'app e i comandi contestuali in seguito alla selezione.

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'));
    }
}

Passaggio 3: Regolare la posizione della barra di scorrimento

Per supportare lo scorrimento quando la barra dell'app è visibile, ad esempio per la selezione multipla, la barra di scorrimento deve essere posizionata in modo da essere sopra la barra dell'app. A causa della localizzazione, devi prevedere che le etichette dei pulsanti della barra dell'app siano più lunghe di una riga rispetto a quelle solo in inglese. Di conseguenza, devi tenere conto di questa riga aggiuntiva quando inserisci la barra di scorrimento. Ad esempio, una barra dell'app con etichette singole alta 88 px per l'inglese deve essere alta 108 px per le etichette su due righe.

Progetta il tuo controllo ListView in modo da prevedere uno spazio vuoto di 108 px nella barra di scorrimento per la barra dell'app. Regola quindi la posizione della barra di scorrimento in modo che sia visibile e si trovi nella posizione corretta a seconda che la barra dell'app sia o meno presente.

/* 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;
    }
}

Passaggio 4: Supporta scorrimento e zoom.

Per supportare zoom e scorrimento verticale, devi posizionare la barra dell'app e il controllo ListView in div di pari livello e assicurarti che lo zoom venga applicato solo al div ListView e non all'intera pagina.

<!-- 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 -->

Osservazioni

Le interazioni tra il controllo ListView e la barra dell'app possono essere utili per alcune applicazioni. Se seguirai queste semplici procedure consigliate, potrai allinearti all'esperienza utente consigliata.

Condividi tramite