Share via

AppBar と ListView を連携させる方法

  • [アーティクル]

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

ここでは、AppBar のベスト プラクティスに従いながら、これらのシナリオをサポートするための ListView と AppBar の相互作用について説明します。 通常、ListView を使うと、ユーザーは、オブジェクトのコレクションを横方向にパンし、これらのオブジェクトから 1 つまたは複数を選んで一部の操作を実行できます。ほとんどの場合、これらの操作は AppBar に表示されます。

必要条件

手順

ステップ 1: AppBar の取り決めに従う

  1. 呼び出し: AppBar が存在する場合、ユーザーは、次のような標準のメカニズムでいつでも AppBar を表示したり非表示にしたりできます。
  2. オブジェクトを選ぶまで表示されるコマンドがない場合、AppBar は表示されません。
  3. 選択内容に関係なく存在するコマンドは、AppBar の動作領域 (ほとんど例外なく AppBar の右側) にあります。

ステップ 2: 選択と複数選択をサポートする

  1. 選択時に、プログラムによって AppBar を表示します。
  2. 選択内容に固有のコマンドを、AppBar の状況依存セクション (ほとんど例外なく左側) に表示します。
  3. 複数のオブジェクトが選択された場合、必要に応じて追加のコマンド (選択のクリアなど) を表示します。
  4. 選択内容に関連するコマンドを非表示にします。

コマンドを表示する 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 ボタンのラベルは、英語のみのラベルよりも 1 行長くなることが予想されます。スクロール バーを配置する際は、その余分な行について考慮する必要があります。たとえば、英語では高さが 88 ピクセルの単一ラベルの AppBar は、2 行のラベルを使って高さが 108 ピクセルになります。

AppBar に対応してスクロール バーの間隔が 108 ピクセルになるように 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 をピア 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 の相互作用により、一部のアプリケーションにとって利点が生まれます。これらのシンプルなベスト プラクティスに従うと、推奨されるユーザー エクスペリエンスに合わせることができます。