アプリ・バーを簡単に実装するには？［Windows 8.1ストア・アプリ開発］：WinRT／Metro TIPS

Windows 8から8.1への更新で、面倒だったアプリ・バーの実装がより手軽になった。新たに用意されたコントロールを使う方法を説明する。

» 2013年09月26日 12時19分公開

[山本康彦，BluewaterSoft]

　Windowsストア・アプリにアプリ・バーを実装するのは、Windows 8（以降、Win 8）ではかなり面倒だった。丸いコマンド・ボタンを作るだけでも、「WinRT／Metro TIPS：アプリ・バーの四角いボタンを丸くするには？［Win 8］」で解説したように、結構な手間と知識が必要だ。さらに、ビューの幅が狭いときはコンパクトな表示にしたいとか、タップ時にフライアウトを出したいなどと思うと、ちょっと遠慮したくなるレベルで煩雑な実装が要求される。何とかならないだろうか？

　Windows 8.1（以降、Win 8.1）用のWindowsストア・アプリ（以降、Win 8.1アプリ）のために新しく用意されたアプリ・バーのためのコントロールが、それらの問題を解決してくれる。本稿では、それらの新しいコントロールを使う方法を解説する*1。本稿のサンプルは「Windows Store app samples：MetroTips #53（Windows 8.1版）」からダウンロードできる。

*1　本稿はPreview版に基づいて記述しているため、製品版では異なる可能性がある。あらかじめご承知おきいただきたい。なお、本稿の内容は、「特集:次期Windows 8.1＆Visual Studio 2013 Preview概説（後編）：大きく変わるWindowsストア・アプリ開発～そのほかの変更点 (3/4)」でも簡単に紹介している。併せてお読みいただければ幸いである。

事前準備

　Win 8.1アプリを開発するには、Win 8.1とVisual Studio 2013（以降、VS 2013）が必要である。本稿執筆時点ではまだ製品版は一般公開されておらず、本稿ではOracle VirtualBox上で64bit版Windows 8.1 Pro PreviewとVisual Studio Express 2013 Preview for Windowsを使用している。これらを準備する方法や注意事項は、「WinRT／Metro TIPS：Win8用のソース・コードをWin8.1用に変換するには？［Win 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名前空間）。


クラス名	説明
SymbolIcon	Symbol列挙体（Windows.UI.Xaml.Controls名前空間）を使って指定する。「Segoe UI Symbol」フォントのグリフの定義済みの一覧に基づく。 VS 2013のプロパティ・ペインでは、ドロップダウンから選択できる。ドロップダウンにはグリフも表示されており、目的のグリフを探しやすい
FontIcon	指定されたフォント・ファミリのグリフに基づく。文字は直接指定してもよいし、文字コードでも指定できる
BitmapIcon	指定されたURIのビットマップ画像ファイルに基づく
PathIcon	指定されたPathオブジェクト（Windows.UI.Xaml.Shapes名前空間）に基づく。 XAMLでは「パス・マークアップ構文」を用いてPathオブジェクトを生成できる（次のサンプル・コードで使用している記法）
Iconプロパティに設定できる4種類のオブジェクト

　上の画像のAppBarButtonコントロールは、この表の順に並んでいる。そのコードは次のようになる。

<Page.BottomAppBar>

<AppBar Background="#cc080010">
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
      </Grid.ColumnDefinitions>

      
      <StackPanel Orientation="Horizontal">

        
        <AppBarButton Label="Symbol">
          <AppBarButton.Icon>
            <SymbolIcon Symbol="Forward" />
          </AppBarButton.Icon>
        </AppBarButton>
        
        

        
        <AppBarButton Label="FontIcon" >
          <AppBarButton.Icon>
            <FontIcon FontFamily="Segoe UI Symbol" Glyph=""/>
          </AppBarButton.Icon>
        </AppBarButton>

        
        <AppBarButton Label="BitmapIcon" >
          <AppBarButton.Icon>
            <BitmapIcon UriSource="Assets/Logo.png"/>
          </AppBarButton.Icon>
        </AppBarButton>

        
        <AppBarButton Label="PathIcon" >
          <AppBarButton.Icon>
            <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>
          </AppBarButton.Icon>
        </AppBarButton>
      </StackPanel>

      
      <StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
        ……省略……
      </StackPanel>
    </Grid>
</AppBar>
</Page.BottomAppBar>

4通りの記述方法を用いたAppBarButtonコントロール（XAML）
前掲の画像の4つのAppBarButtonコントロールのソースである。
このコードの全体（＝Page.BottomAppBar要素）は、「Page. Resources」要素（それが無いときは、ファイル先頭の「Page」開始タグ）の直後に記述する。

　コマンド・ボタンを配置するアプリ・バーは、上のコードのようにしてそのレイアウトを定義するのがWin 8アプリでは一般的であった。すなわち、AppBarコントロールの中にGridコントロールを置き、そのグリッドを左右に分割し、それぞれにStackPanelコントロールを置いて、その中にコマンド・ボタンを配置するという手間を掛けていた。Win 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クラス）にフライアウトを設定する。

　Flyoutプロパティは、Win 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コントロールの例（XAML）

　これを実行すると、次の画像のようになる。

MenuFlyoutを持つAppBarButtonコントロールの例（中央のボタン）
トグル動作をする［メニュー3（トグル）］は、この画像ではON状態。

　次に、Flyoutコントロールは汎用的なフライアウトだ。その内容は自由に実装できる。次のコードでは、文字列と［OK］／［CANCEL］ボタンを持たせてみた。なお、MenuFlyoutコントロールとは異なり、ボタンをタップしてもFlyoutコントロールは閉じないので、必要ならば自前でFlyoutコントロールを閉じるコードを実装する（ボタンのイベント・ハンドラ中にフォーカスを移すことになる処理、例えばメッセージボックスを出す処理などがあれば自動的に閉じる）。

Flyoutを持つAppBarButtonコントロールの例（XAML）

　これを実行すると、次の画像のようになる。

Flyoutを持つAppBarButtonコントロールの例（中央のボタン）

コマンド・ボタンの間隔を調整するには？

　Win 8.1アプリではビューの最小幅はデフォルトで500pxであり、最小幅ではコマンド・ボタンが5個を超えると全てを表示できなくなる。例えば、左側に6個、右側に2個、合計8個のコマンド・ボタンを配置すると次の画像のようになる。

8個のコマンド・ボタンを配置した例
ビューの幅が広いときは問題ない（上の画像）。しかし、幅を狭くすると表示しきれなくなる（下の画像）。

　これを解決するには、ビューの幅を見て、コマンド・ボタンのIsCompactプロパティを全てfalse／Falseに切り替えてやればよいのだが、それは面倒だ。何とかならないだろうか？

　コマンド・ボタンだけを持つシンプルなアプリ・バーの場合には、AppBarコントロールの代わりにCommandBarコントロール（ともにWindows.UI.Xaml.Controls名前空間）を利用すればよい。次のコードのようにとても簡潔に書ける。

<Page.BottomAppBar>
<CommandBar Background="#cc080010">

    
    <CommandBar.SecondaryCommands>
      <AppBarButton Icon="Back" Label="戻る" />
      ……省略（ボタン5個）……
    </CommandBar.SecondaryCommands>

    
    <CommandBar.PrimaryCommands>
      <AppBarToggleButton Label="オプション" Icon="Flag" />
      <AppBarButton Icon="Help" Label="ヘルプ" />
    </CommandBar.PrimaryCommands>
</CommandBar>
</Page.BottomAppBar>

CommandBarコントロールを使ったアプリ・バーの例（XAML）

　CommandBarコントロールには、コマンド・ボタンを配置できるエリアが左右に2つ用意されている。右側がPrimaryCommandsプロパティで、左側がSecondaryCommandsプロパティだ。AppBarコントロールでは、その内部にGridコントロールやStackPanelコントロールなどを配置してコマンド・ボタンのレイアウトを構成する必要があったが、CommandBarコントロールではPrimaryCommands／SecondaryCommandsプロパティにコマンド・ボタンを記述するだけで済む。そして、ビューの幅が十分にあるときはAppBarコントロールの場合と同様に表示され、ビューの幅が狭いときは自動的にコンパクトな表示に変えてくれるのだ（次の画像）。