Verwenden von App-Leisten mit „ListViews”

Artikel
03/04/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

In dieser Anleitung wird die Interaktion zwischen ListView- und AppBar-Steuerelementen zur Unterstützung der Szenarien unter Berücksichtigung der bewährten Methoden für das AppBar-Steuerelement erläutert. Normalerweise können Benutzer mit der „ListView” eine Sammlung von Objekten horizontal verschieben und eines oder mehrere der Objekte auswählen, um Aktionen auszuführen. Diese Aktionen werden häufig auf der App-Leiste verfügbar gemacht.

Voraussetzungen

Lesen Sie Richtlinien für AppBar-Steuerelemente und Richtlinien für ListView-Steuerelemente.

Anweisungen

Schritt 1: Einhalten der AppBar-Zusagen

Aufruf: Wenn eine App-Leiste vorhanden ist, sollten Benutzer sie jederzeit mit den Standardmechanismen aufrufen oder ausblenden können.
Wenn erst bei Auswahl eines Objekts ein Befehl verfügbar gemacht wird, sollte keine App-Leiste angezeigt werden.
Befehle, die unabhängig von der Auswahl angezeigt werden, sollten sich im Aktionsbereich der App-Leiste befinden. Nur einige wenige Ausnahmen können rechts auf der App-Leiste platziert werden.

Schritt 2: Unterstützen der Auswahl und der Mehrfachauswahl

Zeigen Sie die App-Leiste bei Auswahl programmgesteuert an.
Zeigen Sie auswahlspezifische Befehle im Kontextabschnitt der App-Leiste an (bis auf wenige Ausnahmen links).
Zeigen Sie bei Bedarf weitere Befehle an, wenn mehrere Objekte ausgewählt werden (z. B. zum Aufheben der Auswahl).
Blenden Sie Kontextbefehle für die Auswahl aus.

Hier sehen Sie den HTML-Code für eine App-Leiste mit Befehlen.

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

Wenn die App-Leiste initialisiert wird, werden die Kontextbefehle für die Auswahl ausgeblendet.

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

Diese Funktion zeigt die App-Leiste und bei Auswahl Kontextbefehle an.

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

Schritt 3: Anpassen der Position der Bildlaufleiste

Zur Unterstützung des Bildlaufs bei sichtbarer App-Leiste (z. B. bei einer Mehrfachauswahl) muss die Bildlaufleiste oberhalb der App-Leiste platziert werden. Rechnen Sie damit, dass die Beschriftungen der Schaltflächen auf der App-Leiste durch Lokalisierung eine Zeile länger werden als die englischen Beschriftungen. Berücksichtigen Sie diese zusätzliche Zeile beim Platzieren der Bildlaufleiste. So sollte beispielsweise eine App-Leiste mit einer einzeiligen Beschriftung und einer Höhe von 88px in der englischen Version eine Höhe von 108px und zweizeilige Beschriftungen aufweisen.

Gestalten Sie die „ListView” so, dass zwischen der Bildlaufleiste und der App-Leiste ein Spielraum von 108px bleibt. Passen Sie dann die Position der Bildlaufleiste so an, dass sie abhängig vom Vorhandensein der App-Leiste sichtbar ist und sich an der richtigen Position befindet.

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

Schritt 4: Unterstützen von Bildlauf und Zoomen

Zur Unterstützung von Zoomen und vertikalem Bildlauf sollten Sie die AppBar- und ListView-Steuerelemente in Peer-DIVs platzieren und sicherstellen, dass Zoomen nur für das ListView-DIV und nicht für die gesamte Seite gilt.

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

Anmerkungen

Interaktionen zwischen ListView- und AppBar-Steuerelementen können für einige Apps von Vorteil sein. Wenn Sie sich an diese einfachen bewährten Methoden halten, können Sie Ihre Apps auf die Empfehlungen für die Benutzeroberfläche abstimmen.

Freigeben über