如何协同使用应用栏和 ListView

项目
03/04/2016

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

此操作指南解释如何在遵循应用栏最佳实践的同时，通过 ListView 与应用栏之间的交互支持以下这些方案。通常，ListView 允许用户平移对象集合并从中选择一个对象来执行一些操作。这些操作通常显示在应用栏中。

先决条件

详见应用栏指南和 ListView 控件指南。

说明

步骤 1: 兑现应用栏承诺

调用：只要应用栏存在，用户就应能够通过如下标准机制随时调用应用栏或隐藏应用栏。
如果选择对象之前未显示任何命令，则也不应显示任何应用栏
对于无论是否选择对象始终存在的命令，应将其放置在应用栏的操作区域，极少数例外情况下，可放置在应用栏的右侧

步骤 2: 支持选择和多项选择

选择时以编程方式显示应用栏。
使特定于选定内容的命令显示在应用栏的上下文部分（极少数例外情况下可显示在应用栏左侧）。
选择多个对象（如清除选定内容）时，根据需要显示其他命令。
隐藏与选定内容具有上下文关系的命令。

以下是带有命令的应用栏对应的 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 -->

初始化应用栏时，选择上下文命令将处于隐藏状态。

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

此函数可显示应用栏，并在选择时显示上下文命令。

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: 调整滚动条位置

若要在应用栏可见时支持滚动，例如支持多项选择，则需要将滚动条放置在应用栏上方。出于本地化原因，应用栏按钮标签应比纯英文标签长一行。放置滚动条时，应将这额外的一行考虑在内。例如，高为 88px 的单个英文标签应用栏应改成标签为两行且高为 108 px 的应用栏。

设计 ListView，使滚动条与应用栏之间保留 108px 的间隙。然后，调整滚动条的位置，使其可见并位于右侧，具体取决于是否存在应用栏。

/* 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: 支持滚动和缩放。

若要支持缩放和垂直滚动，则应将应用栏和 LitView 放置在对等 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 和应用栏之间的交互可以使某些应用程序受益。遵循这些简单的最佳实践，即可提供推荐的用户体验。

Share via