如何讓 AppBar 與 ListView 搭配使用

發行項
03/04/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

這篇作法說明 ListView 與 AppBar 在遵循 AppBar 最佳做法來支援這些案例時，彼此之間的互動。 ListView 通常會讓使用者水平移動瀏覽物件集合，以及選取一或多個前述物件來執行某些動作。這些動作通常會在 AppBar 中公開。

先決條件

請閱讀 AppBar 的指導方針及 ListView 控制項的指導方針。

指示

步驟 1: 維護 AppBar Promise

叫用：如果有 AppBar，則使用者應該能夠隨時透過標準機制叫用或隱藏它。
如果選取物件之前沒有需要公開的命令，則不應該顯示 AppBar
與選取項目無關的命令應該放在 AppBar 的動作區域中，極少例外則位於 AppBar 的右側

步驟 2: 支援選取項目及複選

在選取時以程式設計方式顯示 AppBar。
在 AppBar 的內容區段中 (極少例外則在 AppBar 的左側) 顯示選取項目的特定命令。
在選取多個物件時，視需要顯示其他命令 (例如清除選取範圍)。
隱藏與選取項目相關聯的命令。

以下是包含命令之 AppBar 的 HTML。

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

初始化 AppBar 時，會隱藏與選取項目相關聯的命令。

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

這個功能會顯示 AppBar，並且在選取時顯示關聯式命令。

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

步驟 3: 調整捲軸位置

若要在 AppBar 出現時支援捲動 (例如用於複選)，捲軸就必須位於 AppBar 上方。由於當地語系化的緣故，因此您會看到 AppBar 按鈕標籤比只有英文的標籤長一行。放置捲軸時，應該考量多出來的那一行。例如，高度為 88 像素的單行英文標籤 AppBar，應該會變成有兩行且高度為 108 像素的標籤。

設計 ListView 時，請讓捲軸有 108 像素的距離以搭配 AppBar。然後調整捲軸列位置，使其根據是否出現 AppBar 而顯示於正確位置。

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

步驟 4: 支援捲動和縮放。

為了支援縮放和垂直捲動，您應該將 AppBar 及 ListView 放在對等 div，並確認縮放只套用到 ListView div 而非整個頁面。

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

備註

ListView 與 AppBar 之間的互動可以讓某些應用程式受益。只要遵循這些簡單的最佳做法，就能符合建議的使用者體驗。

Share via