言語: HTML | XAML

アプリ バーの追加 (XAML)

Applies to Windows and Windows Phone

アプリ バーは、ナビゲーション、コマンド、ツールをユーザーに表示するために使います。 アプリ バーは既定では非表示になっていて、ユーザーが指で画面の下端または上端からスワイプするか、マウスで右クリックすると表示されます。また、アプリ バーはアプリケーションのコンテンツの上に表示されますが、ユーザーが端をスワイプするか、アプリケーションを操作すると非表示にできます。アプリ バーは、端をスワイプしたときに自動的に応答し、プログラムを使って表示または非表示にすることもできます。

下部のアプリ バー コントロール

XAML フレームワークに用意されている CommandBar コントロールと AppBar コントロールを使うと、画面の端がスワイプされたときにその上端や下端に UI を簡単に表示することができます。

AppBarButton コントロール、AppBarToggleButton コントロール、AppBarSeparator コントロールだけが含まれるアプリ バーが必要な場合は、CommandBar を使ってください。CommandBar には、次の機能が備わっているため基本的なアプリ バーを簡単に作成できます。

  • 右側のプライマリ コマンドと左側のセカンダリ コマンドを使ったコマンドの自動レイアウト
  • アプリのサイズが変化したときのアプリ バー コマンドの自動サイズ変更

より複雑なコンテンツ (画像、進行状況バー、テキスト ブロックなど) が必要な場合は、AppBar コントロールを使います。AppBar にカスタム コンテンツを組み合わせて、ツールやナビゲーション UI が並んだバーを作成できます。AppBar コントロールにコマンドを配置するときは、画面サイズの変更に合わせて、AppBar に表示されるコンテンツのサイズや位置を調整する必要があります。

アプリ バーの設計について詳しくは、「アプリ バーのガイドライン」をご覧ください。

アプリ バーなど Windows 8 の主要機能を試してみたい場合は、Windows 8 のハンズオン ラボをダウンロードしてください。このラボでは、任意のプログラミング言語 (JavaScript や HTML または C# や XAML) で Windows ストア アプリのサンプルを作成するためのモジュールや手順を提供しています。

このセクションの内容

トピック説明

クイック スタート: アプリ バーの追加

アプリ バーを使って、ナビゲーション機能、コマンド、ツールを表示します。これらは、不要なときには隠すことができます。

クイック スタート: アプリ バー ボタンの追加

アプリ バーのコマンドは、通常、丸いボタン、アイコン、テキスト ラベルを使った特別なスタイルで表示されます。AppBarButtonAppBarToggleButtonAppBarSeparator の各コントロールを使うと、適切な設計ガイドラインと動作を反映したアプリ バーを簡単に作成できます。

さまざまなサイズでアプリ バーを使う方法

アプリの幅がユーザーによって狭められると、コマンドを表示する水平方向のスペースが少なくなります。アプリ バーに多数のボタンが存在する場合には、幅が縮小されてもボタンが正しく表示されるように調整する必要があります。

アプリ バーに状況依存のコマンドを追加する方法

ユーザーの選択または移動に基づいてアプリ バーにコマンドを追加します。

アプリ バーにメニューを追加する方法

アプリ バーに関連するコマンドのセットを追加するにはメニューを使います。

複数のページでアプリ バーを共有する方法

アプリの関連する複数のページでアプリ バーを使います。

AppBar スタイルとテンプレート

このトピックでは、AppBar コントロールのスタイルとテンプレートについて説明します。

CommandBar スタイルとテンプレート

このトピックでは、CommandBar コントロールのスタイルとテンプレートについて説明します。

AppBarButton スタイルとテンプレート

このトピックでは、AppBarButton コントロールのスタイルとテンプレートについて説明します。

AppBarToggleButton スタイルとテンプレート

このトピックでは、AppBarToggleButton コントロールのスタイルとテンプレートについて説明します。

AppBarSeparator スタイルとテンプレート

このトピックでは、AppBarSeparator コントロールのスタイルとテンプレートについて説明します。

AppBar ボタン スタイルのイメージ

StandardStyles.xaml に含まれる AppBar ボタン スタイルのイメージ。

 

関連トピック

コントロールとコンテンツの追加
デザイナー向け
ナビゲーション パターン
コマンド パターン
レイアウト
ハブ
下部のアプリ バー
上部のアプリ バー
戻るボタン
アプリ バーのガイドライン
ハブ コントロールのガイドライン
アプリ バーをアクセシビリティ対応にする
開発者向け (XAML)
初めてのアプリ - パート 3: ナビゲーション、レイアウト、ビュー
初めてのアプリ - C++ Windows ストア アプリへのナビゲーションとビューの追加 (チュートリアル 3/4)
ページ間のナビゲーション
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
Windows.UI.Xaml.Controls Hub class
XAML AppBar コントロールのサンプルに関するページ
XAML ナビゲーションのサンプルに関するページ
XAML ハブ コントロールのサンプルに関するページ

 

 

表示:
© 2014 Microsoft