8から8.1への更新で、面倒だったアプリ・バーの実装がより手軽になった。新たに用意されたコントロールを使う方法を説明する。8)ではかなり面倒だった。8]」で解説したように、結構な手間と知識が必要だ。ビューの幅が狭いときはコンパクトな表示にしたいとか、タップ時にフライアウトを出したいなどと思うと、ちょっと遠慮したくなるレベルで煩雑な実装が要求される。8.1アプリ)のために新しく用意されたアプリ・バーのためのコントロールが、それらの問題を解決してくれる。本稿では、それらの新しいコントロールを使う方法を解説する*1。8.1版)」からダウンロードできる。本稿はPreview版に基づいて記述しているため、製品版では異なる可能性がある。ご承知おきいただきたい。(3/4)」でも簡単に紹介している。併せてお読みいただければ幸いである。2013)が必要である。Windowsを使用している。8.1]」の記事をご参照いただきたい。単純なコマンド・ボタンを作るには?AppBarButtonコントロール(Windows.UI.Xaml.Controls名前空間)を使う。AppBarButtonコントロールの例それぞれ、円内の絵の指定方法が異なっている(後述)。円内の絵はAppBarButtonコントロールのIconプロパティ(=Windows.UI.Xaml.Controls名前空間のIconElementクラス)に指定し、円の下の文字列はLabelプロパティに指定する。IsCompactプロパティにtrue/Trueをセットすると、円の下の文字列が消え、円もやや小さくなって、コントロールの占有サイズが小さくなる。IconプロパティにはIconElementクラスのオブジェクトを設定するのだが、通常はIconElementクラスを継承した次の4つのいずれかを使用する(いずれも、Windows.UI.Xaml.Controls名前空間)。説明SymbolIconSymbol列挙体(Windows.UI.Xaml.Controls名前空間)を使って指定する。Symbol」フォントのグリフの定義済みの一覧に基づく。2013のプロパティ・ペインでは、ドロップダウンから選択できる。ドロップダウンにはグリフも表示されており、目的のグリフを探しやすいFontIcon指定されたフォント・ファミリのグリフに基づく。文字は直接指定してもよいし、文字コードでも指定できるBitmapIcon指定されたURIのビットマップ画像ファイルに基づくPathIcon指定されたPathオブジェクト(Windows.UI.Xaml.Shapes名前空間)に基づく。XAMLでは「パス・マークアップ構文」を用いてPathオブジェクトを生成できる(次のサンプル・コードで使用している記法)Iconプロパティに設定できる4種類のオブジェクト上の画像のAppBarButtonコントロールは、この表の順に並んでいる。そのコードは次のようになる。HorizontalAlignment="Right">......省略......</StackPanel></Grid></AppBar></Page.BottomAppBar>4通りの記述方法を用いたAppBarButtonコントロール(XAML)前掲の画像の4つのAppBarButtonコントロールのソースである。Resources」要素(それが無いときは、ファイル先頭の「Page」開始タグ)の直後に記述する。8アプリでは一般的であった。AppBarコントロールの中にGridコントロールを置き、そのグリッドを左右に分割し、それぞれにStackPanelコントロールを置いて、その中にコマンド・ボタンを配置するという手間を掛けていた。8.1アプリでは、上述したように丸いコマンド・ボタンをAppBarButtonコントロールで簡単に作れるようになっただけでなく、新しいコントロールを使うことでこの面倒なレイアウト作業も楽にできる。後ほど「コマンド・ボタンの間隔を調整するには?」の項で説明する。トグル・ボタンやセパレータを使うには?トグル・ボタンとは、1回タップするとONになり、もう1回タップするとOFFになるボタンだ。アプリ・バーのコマンド・ボタンでトグル動作を実装するには、AppBarToggleButtonコントロール(Windows.UI.Xaml.Controls名前空間)を使う。IconプロパティとLabelプロパティの設定方法は、前述のAppBarButtonコントロールと同じだ。コマンド・ボタンをグループ分けするためのセパレータ(=縦の分割線)には、AppBarSeparatorコントロール(Windows.UI.Xaml.Controls名前空間)を使う。AppBarSeparatorコントロールにIconプロパティとLabelプロパティは無いが、IsCompactプロパティはある。フライアウトを出すには?AppBarButtonコントロールのFlyoutプロパティ(=Windows.UI.Xaml.Controls.Primitives名前空間のFlyoutBaseクラス)にフライアウトを設定する。8.1アプリ用に新設されたもので、Windows.UI.Xaml.Controls名前空間のButtonコントロール(および、それを継承したコントロール)が持っている。Flyoutプロパティに設定できるのは、FlyoutBaseクラスを継承しているFlyoutコントロールかMenuFlyoutコントロール(ともに、Windows.UI.Xaml.Controls名前空間)である。どちらも、Flyoutプロパティに設定するだけで、ボタンのタップ時に自動的にフライアウトが出てくるようになる。MenuFlyoutコントロールであるが、これはメニューに特化したフライアウトで、次のコードのようにメニュー項目としてMenuFlyoutItemコントロールまたはToggleMenuFlyoutItemコントロール(ともにWindows.UI.Xaml.Controls名前空間)を設定するだけだ。メニュー項目がタップされると、フライアウトは自動的に閉じる。メニュー項目をグループ化するためにMenuFlyoutSeparatorコントロール(Windows.UI.Xaml.Controls名前空間)が使える。次のコードには記述していないが、メニュー項目がタップされたときのイベント・ハンドラは各メニュー項目のTapped属性に指定する。/></MenuFlyout></AppBarButton.Flyout></AppBarButton>MenuFlyoutを持つAppBarButtonコントロールの例(XAML)これを実行すると、次の画像のようになる。MenuFlyoutを持つAppBarButtonコントロールの例(中央のボタン)トグル動作をする[メニュー3(トグル)]は、この画像ではON状態。次に、Flyoutコントロールは汎用的なフライアウトだ。その内容は自由に実装できる。次のコードでは、文字列と[OK]/[CANCEL]ボタンを持たせてみた。MenuFlyoutコントロールとは異なり、ボタンをタップしてもFlyoutコントロールは閉じないので、必要ならば自前でFlyoutコントロールを閉じるコードを実装する(ボタンのイベント・ハンドラ中にフォーカスを移すことになる処理、例えばメッセージボックスを出す処理などがあれば自動的に閉じる)。/></StackPanel></StackPanel></Flyout></AppBarButton.Flyout></AppBarButton>Flyoutを持つAppBarButtonコントロールの例(XAML)これを実行すると、次の画像のようになる。8.1アプリではビューの最小幅はデフォルトで500pxであり、最小幅ではコマンド・ボタンが5個を超えると全てを表示できなくなる。左側に6個、右側に2個、合計8個のコマンド・ボタンを配置すると次の画像のようになる。8個のコマンド・ボタンを配置した例ビューの幅が広いときは問題ない(上の画像)。幅を狭くすると表示しきれなくなる(下の画像)。これを解決するには、ビューの幅を見て、コマンド・ボタンのIsCompactプロパティを全てfalse/Falseに切り替えてやればよいのだが、それは面倒だ。何とかならないだろうか?コマンド・ボタンだけを持つシンプルなアプリ・バーの場合には、AppBarコントロールの代わりにCommandBarコントロール(ともにWindows.UI.Xaml.Controls名前空間)を利用すればよい。次のコードのようにとても簡潔に書ける。/></CommandBar.PrimaryCommands></CommandBar></Page.BottomAppBar>CommandBarコントロールを使ったアプリ・バーの例(XAML)CommandBarコントロールには、コマンド・ボタンを配置できるエリアが左右に2つ用意されている。右側がPrimaryCommandsプロパティで、左側がSecondaryCommandsプロパティだ。AppBarコントロールでは、その内部にGridコントロールやStackPanelコントロールなどを配置してコマンド・ボタンのレイアウトを構成する必要があったが、CommandBarコントロールではPrimaryCommands/SecondaryCommandsプロパティにコマンド・ボタンを記述するだけで済む。ビューの幅が十分にあるときはAppBarコントロールの場合と同様に表示され、ビューの幅が狭いときは自動的にコンパクトな表示に変えてくれるのだ(次の画像)。CommandBarコントロールはビューの幅に応じてコマンド・ボタンのサイズと間隔を調整してくれるこの画像では、ビューの幅は最小値の500pxになっている。CommandBarコントロールは、全てのコマンド・ボタンを表示しきれなくなったときには、SecondaryCommands(左側のコマンド・ボタン群)が表示されなくなる。8.1アプリのために新しく用意されたコントロールを活用すると、アプリ・バーの実装が楽になるだけでなく、ボタンのタップ時にフライアウトを出すことも非常に簡単にできる。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。