連載
» 2012年08月30日 00時00分 UPDATE

WinRT/Metro TIPS:メニューの代わりにアプリ・バーを使うには?[Win 8]

Windowsストア・アプリには、従来のデスクトップ・アプリのようなメニューバーがない。メニューを選択する機能として使える「アプリ・バー」の実装方法を説明する

[山本康彦,BluewaterSoft]
WinRT/Metro TIPS
業務アプリInsider

powered by Insider.NET

「WinRT/Metro TIPS」のインデックス

連載目次はこちら

 Windowsストア・アプリ(旧称: Metroスタイル・アプリ)には、従来のデスクトップ・アプリのようなメニューバーがない。メニューを選択する機能を提供するには、どうすればよいのだろうか?

 Windowsストア・アプリでは(基本的に)、従来のメニューバーに代わりに、「アプリ・バー(app bars)」(=AppBarコントロール)を使う。そこで本稿では、アプリ・バーの実装方法を説明する。

事前準備

 Windows 8(以降、Win 8)向けのWindowsストア・アプリを開発するには、Win 8とVisual Studio 2012(以降、VS 2012)が必要である。これらを準備するには、前回のTIPSを参考にしてほしい。本稿ではWin 8とVS 2012 Expを使用している。

 なお、アプリ・バーの追加などは、VS 2012 Expに付属するBlend for Visual Studio 2012(=Windowsストア・アプリのXAMLデザインを編集できるツール)を使っても作業できるが、その方法の説明は本稿では割愛する。

アプリ・バーとは?

 実物を見た方が、話が早いので、まずは次の画面を見てほしい。

dot-appbar_01.gif Win 8に標準でインストールされているIE10(Windowsストア・アプリ版)の画面

 上の画面の下端にある黒い帯(赤枠内)がアプリ・バーである。

 アプリ・バーは、タッチ操作では画面の下端から上へスワイプすると出てくる。マウス操作では画面の空いているところで右クリックすると、下から現れる。

 アプリ・バーには、丸い形をしたコマンド・ボタンなどが配置されていて、デスクトップ・アプリのメニューと同様の役割を担っている。

アプリ・バーとボタンを配置する

 アプリ・バーの実装にはAppBarコントロールを使用する。VS 2012 Expのプロジェクト・テンプレート「グリッド アプリケーション (XAML)」を使ってひな型コードを生成し、そのItemDetailPage.xamlファイル(=項目詳細ページ)にAppBarコントロールとButtonコントロールを配置してみよう。

 ここでは直接、XAMLコードを編集するが(以下の画面とコードを参照)、WPFやSilverlightの経験があれば、難しくはない。

dot-appbar_02.gif ItemDetailPage.xamlファイルの画面デザイン(XAMLデザイナ)
下部のXAMLエディタで、XAMLコードを直接書き換える。

 XAMLエディタ上で、「</Page.Resources>」の下に、次のコードを追記する。

<common:LayoutAwarePage.BottomAppBar>
  <AppBar>
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
      </Grid.ColumnDefinitions>
      <StackPanel Orientation="Horizontal">
        <Button Click="Button_Click" Content="編集" />
        <Button Click="Button_Click" Content="削除" />
      </StackPanel>
      <StackPanel Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal">
        <Button Click="Button_Click" Content="更新" />
        <Button Click="Button_Click" Content="ヘルプ" />
      </StackPanel>
    </Grid>
  </AppBar>
</common:LayoutAwarePage.BottomAppBar>


AppBarコントロールとButtonコントロールを配置するXAMLコード
「</Page.Resources>」タグの直後に追加する。


 VS 2012のテンプレートを使うときは、AppBarコントロールを配置できる場所は「<common:LayoutAwarePage.BottomAppBar>」の中になる。AppBarコントロールの中には、左右2分割したGridコントロールを置く。それぞれのセルにStackPanelコントロールを置いて、その中にコマンド・ボタンを配置するのが一般的である。

 ここではすべてのButtonコントロールの「Click」イベントに、同じ「Button_Click」イベント・ハンドラを指定したが、もちろん異なるハンドラを指定して構わない。

ボタンのイベント・ハンドラを実装する

 イベント・ハンドラを実装するには、XAMLコードに記述した「Click」イベントを右クリックして(表示されるコンテキスト・メニューから)[イベント ハンドラーへ移動]を選ぶ。「Button_Click」メソッドが自動生成されるので、中身を実装すればよい。ここでは、メッセージ・ダイアログを出してみよう(次のコードを参照)。

private async void Button_Click(object sender, RoutedEventArgs e)
{
  var btn = sender as Button;
  var msg = string.Format("{0}ボタンが押されました",
                          btn.Content.ToString());
  var msgBox = new MessageDialog(msg);
  await msgBox.ShowAsync();
}


Private Async Sub Button_Click(sender As Object, e As RoutedEventArgs)
  Dim btn = DirectCast(sender, Button)
  Dim msg = String.Format("{0}ボタンが押されました",
                          btn.Content.ToString())
  Dim msgBox = New MessageDialog(msg)
  Await msgBox.ShowAsync()
End Sub


ボタンのイベント・ハンドラ(上:C#、下:VB)
このほかに、Windows.UI.Popups名前空間のインポートが必要。


 MessageDialogクラス(Windows.UI.Popups名前空間)のShowAsyncメソッドは非同期実行されるので、その直前にawaitキーワードと、メソッドの宣言部にasyncキーワードが必要である。そのほかのコードには、説明の必要はないだろう。

実行してみる

 それでは実行してみよう。画面を表示させたら、アプリ・バーを出してみる。

dot-appbar_03.gif 実行結果1
下端からスワイプするか、画面の空いているところを右クリックすると、アプリ・バーが出てくる。
ここでは、見やすくするために画面全体の背景色を変えてある。

 アプリ・バーの中のボタンをタッチ、あるいはマウスでクリックして、イベント・ハンドラを呼び出してみる(次の画面を参照)。ボタンごとにメッセージが違っているはずである。

dot-appbar_04.gif 実行結果2
ボタンをクリックすると画面中央にメッセージ・ダイアログが出る。
このとき、自動的にアプリ・バーは隠れる。

ガイドラインを確認する

 上記の例では下部に配置したが、アプリ・バーは上部にも配置できる。また、アプリ・バーの中には、ボタン以外のコントロールも置ける。しかし好きなようにしてよいわけではなく、次のリンク先で説明されているガイドラインがあるので参考にしてほしい。

まとめ

 Windowsストア・アプリでは、メニューバーの代わりにアプリ・バーを使う。その記述はXAMLで行うが、WPFやSilverlightの経験があれば難しくはない。

 なお、今回はボタンの外観を四角いままとしたが、ガイドラインにあるように丸くする方法は、別の機会に説明したい。

「WinRT/Metro TIPS」のインデックス

WinRT/Metro TIPS

Copyright© 1999-2017 Digital Advantage Corp. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。