スナップ時にアプリ・バーを2段にするには？［Win 8］：WinRT／Metro TIPS

スナップ表示時、Windowsストア・アプリ標準ではボタンが3つしか表示できない。そこでアプリ・バーのボタンを2段重ねにして多数のボタンを表示する方法を紹介。

» 2013年02月28日 13時34分公開

[山本康彦，BluewaterSoft]

　アプリ・バーに配置したコマンド・ボタンが増えてくると、スナップ（＝画面を左右分割してその4分の1ほどを使う）状態をどうするか、悩むことになる。ボタンの間隔が標準のままだと、スナップ時には3つしか並ばない。頑張って間隔を詰めてみても5個くらいまでがせいぜいだ。

　そこでスナップ時には表示するコマンド・ボタンの数を減らしてしまうこともある。あるいは、2段重ね／3段重ねにすることも考えられる。本稿では、VariableSizedWrapGridコントロールを使って簡単に多段重ねのアプリ・バーを実現する方法を紹介する。

●事前準備

　Windows 8（以降、Win 8）向けのWindowsストア・アプリを開発するには、Win 8とVisual Studio 2012（以降、VS 2012）が必要である。これらを準備するには、第1回のTIPSを参考にしてほしい。本稿では64bit版Win 8 ProとVS 2012 Express for Windows 8を使用している。

●たくさんのコマンド・ボタンを配置したアプリ・バーをスナップすると？

　例として6つのコマンド・ボタンを配置したアプリ・バーを作成した（その手順は第2回と第3回で説明している）。左のStackPanelコントロールに4つ、右に2つのコマンド・ボタンを置いた（次の画像）。

アプリ・バーにコマンド・ボタンを6つ配置した画面（横置き全画面）
左側に「A」「B」「C」「D」の4つのボタン、右側に「E」「F」の2つのボタン、合わせて6個のボタンがある。

　この画面をスナップすると、アプリ・バーの表示は次の画像のようになる。

アプリ・バーにコマンド・ボタンを6つ配置した画面（スナップ状態）
6つのボタンのうち、「A」「E」「F」の3つしか表示されていない。

　6つあるはずのコマンド・ボタンのうち3つしか表示されていない。残りのコマンドにこの画面の操作に必須のものがあったりすると、Windowsストアの審査に落ちてしまうだろう。

　次の画像では、コマンド・ボタンの左右のマージンを減らして、スナップ時に表示される数を増やしてみた。わざと失敗させたのだが、三番目のボタン（［C］ボタン）が半分しか表示されていない*1。このようにコマンド・ボタンの一部が欠けていても、Windowsストアの審査には落ちてしまうだろう。

アプリ・バーのコマンド・ボタンの間隔を詰めた画面（スナップ状態）
［C］ボタンが半分切れてしまっている。［D］ボタンは表示されていない。

*1　コマンド・ボタンを格納している2つのStackPanelコントロールのうち、XAMLコード上で後から定義されている右側のStackPanelコントロールが画面の手前に来ている。そのため左側のStackPanelの一部が隠されているのだ。前に載せた3個しか表示されていない画像も同様で、右側の［E］［F］は表示されているが、左側は［A］だけしか見えていないのだ。

●アプリ・バーを2段にしている例

　この問題を、例えばMicrosoft製のアプリではどのように対処しているだろうか？

Microsoft製アプリのアプリ・バー（スナップ状態）
上はSkyDrive、下はInternet Explorerである。なお、SkyDriveは全画面時にはコマンド・ボタンの下にボタン名を表示し、スナップ時にはご覧のようにボタン名を消している。

　上の画像のように、アプリ・バーを2段にして多くのコマンドを表示している。これはどのように実装したらよいだろうか？スナップ状態用のアプリ・バーを別に定義しておいて切り替えたりすれば可能だろうが、もっと簡単にできないだろうか？

●VariableSizedWrapGridコントロールに替える

　そこで、コマンド・ボタンのコンテナをStackPanelコントロールからVariableSizedWrapGridコントロールに替えてみよう。なお、左右のボタンの数は4個と2個（＝2対1）と分かっているので、親のGridコントロールのカラム分割幅も2対1に変える*2。

　まず、元のXAMLコードは次のようになっていた。

アプリ・バーの変更前のコード（XAML）

　これを次のように変更する。

アプリ・バーの変更後のコード（XAML）

*2　デフォルトの左右1対1の分割のままでは、左側のコマンド・ボタンが2列にならず1列4段となってしまう。左側に2列、右側は1列に並ぶように左右2対1に分割する。

●実行結果

　これだけのことで、全画面表示のときは1段に、スナップ表示では2段になるアプリ・バーが出来上がる（次の画像）。

VariableSizedWrapGridコントロールに替えた画面（全画面とスナップ状態）
全画面では以前と見た目は変わらない。スナップすると2段に（コマンド・ボタンが多ければ3段／4段にも）なる。

　なお、スナップ時に一部のコマンド・ボタンを隠したい場合などは、変化分をVisualStateManagerコントロールに記述するとよい（「WinRT／Metro TIPS：ビューの切り替えを実装するには？［Win 8］」を参照）。

●まとめ

　スナップ状態の実装はついおろそかになりがちだが、Windowsストアの審査ではきちんとチェックされる。アプリ・バーのコマンド・ボタン配置はよく問題になるのだが、本稿で示したようにVariableSizedWrapGridコントロールに替えて簡単に解決できる場合も多いだろう。

　VariableSizedWrapGridコントロールの詳細や、ほかのレイアウト用コントロールとの相違などは、次のドキュメントを参考にしてほしい。

　ちなみに、VariableSizedWrapGridコントロールは、アイテムごとに占有する列数と行数（＝ColumnSpanプロパティとRowSpanプロパティ）を指定できる。VariableSizedWrapGridコントロールはGridViewコントロールの内部でも使われているので、GridViewコントロールの表示を変更するためにも利用できる。その方法が次のブログ記事で紹介されている。