ListViews와 AppBars를 함께 작동하는 방법

아티클
03/04/2016

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

이 방법 항목에서는 AppBar의 모범 사례에 따르면서 이러한 시나리오를 지원하기 위한 ListView와 AppBar 간 조작에 대해 설명합니다. 일반적으로 ListView를 사용하여 개체 컬렉션이 가로로 걸쳐 있도록 하고 이러한 개체 중 하나 이상을 선택하여 일부 작업을 수행하도록 할 수 있습니다. 이러한 작업은 종종 AppBar에서 나타납니다.

사전 요구 사항

AppBar 지침 및 ListView 컨트롤 지침을 읽어보세요.

지침

단계 1: AppBar와 관련된 지침 유지

호출: AppBar가 존재할 경우 사용자는 언제든지 표준 메커니즘을 통해 AppBar를 호출하거나 숨길 수 있어야 합니다.
개체를 선택할 때까지 노출되는 명령이 없으면 AppBar가 표시되지 않아야 합니다.
선택과 관계없이 표시되는 명령은 AppBar 오른쪽의 몇 가지 예외를 제외하고 AppBar의 작업 영역에 있어야 합니다.

단계 2: 선택 및 다중 선택 지원

선택 영역에 따라 프로그래밍 방식으로 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 단추 레이블을 영어만 포함된 레이블보다 한 줄 더 길게 예측해야 합니다. 스크롤 막대를 배치할 때는 이러한 추가 줄을 고려해야 합니다. 예를 들어 영어에 대해 높이가 88px인 단일 레이블 AppBar는 2줄 레이블을 포함하는 108px 높이가 됩니다.

스크롤 막대가 AppBar와 108px 떨어져 있도록 ListView를 디자인합니다. 그런 후 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를 유사한 분할 영역에 배치하고 확대/축소가 전체 페이지가 아닌 ListView 부분에만 적용되도록 해야 합니다.

<!-- 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 사이의 상호작용을 통해 일부 응용 프로그램에 혜택을 줄 수 있습니다. 이러한 간단한 모범 사례를 따르면 권장되는 사용자 환경을 구현할 수 있습니다.

다음을 통해 공유