AppBar と ListView を連携させる方法
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
ここでは、AppBar のベスト プラクティスに従いながら、これらのシナリオをサポートするための ListView と AppBar の相互作用について説明します。 通常、ListView を使うと、ユーザーは、オブジェクトのコレクションを横方向にパンし、これらのオブジェクトから 1 つまたは複数を選んで一部の操作を実行できます。ほとんどの場合、これらの操作は 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 ボタンのラベルは、英語のみのラベルよりも 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 の相互作用により、一部のアプリケーションにとって利点が生まれます。これらのシンプルなベスト プラクティスに従うと、推奨されるユーザー エクスペリエンスに合わせることができます。