良いWindowsストア アプリの作り方 vol.02 ~アプリバーの使い方~


マイクロソフトの田中達彦です。
本連載では、良いWindowsストア アプリを作るために、知っておくべきポイントを紹介します。


[アプリバーの概要]
Windowsストア アプリでは、ユーザーがコンテンツに集中できるように、極力画面上から余分なボタン等を排除します。
そのため、コマンド類をアプリバーと呼ばれるバーの中に配置します。
アプリバーは、画面の下端または上端からスワイプするか、マウスを右クリックすると表示されます。

以下の図はアプリバーの例です。
ここでは、[画像追加]と[思い出追加]の2つのコマンドが配置されています。



アプリバーは、このように下から出てくるバーと、上から出てくるバーがあります。

下のバーには選択しているアイテムやページ全体に関するコマンド類を配置し、上のバーにはナビゲーション系のコマンドを配置します。
ナビゲーション系のコマンドとは、そのコマンドを選択することにより別のページに飛ぶようなコマンドです。
上から出てくるアプリバーを、ナビゲーションバーまたはナビバーと呼ぶこともあります。

下のアプリバーには、左端または右端からコマンドを配置します。

左側には、選択したアイテムに関するコマンドを配置します。
右側には、ページ全体にかかわるようなコマンドを配置します。


[アプリバーの実装]
アプリバーを実装するときは、C#/XAMLを使用しているときはXAMLの中に以下のようなコードを追加します。

<Page.BottomAppBar>
    <AppBar x:Name="BottomAppBar1" Padding="10,0,10,0" Background="DarkGreen">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*"/>
                <ColumnDefinition Width="50*"/>
            </Grid.ColumnDefinitions>
            <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                <Button x:Name="Add1"  Style="{StaticResource AddAppBarButtonStyle1}" Tag="Add1" Click="Add1_Click"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

Buttonの部分で、AddAppBarButtonStyleというものを指定しています。
これは、common\StandardStyles.xamlの中で定義されているアプリバー用のボタンのスタイルです。
しかし、デフォルトの状態ではStandardStyles.xamlの中でスタイル部分がコメントアウトされていますので、その部分のコメントを外すか、コメントアウトされていない部分にコピー&ペーストしておきます。
以下のスタイルは、コメントアウトされていない部分にコピー&ペーストして、内容を少し書き換えたものです。

<Style x:Key="AddAppBarButtonStyle1" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="AddAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="画像追加"/>
    <Setter Property="Content" Value=""/>
</Style>

ここでは、アプリバーに表示される文字列を変更しています。
Visual Studio 2012で作成したC#のプロジェクトでは、アプリバーにボタンを2つ以上つけたときに、スナップしたときに2つめのボタンが半分に切れてしまうという現象が発生します。
この現象は、XAMLの中でボタンの配置位置の左右を分けるためのコードがあるため発生します。
デフォルトの状態では、アプリバーのちょうど真ん中の部分で左右に分けています。
ボタンが2つしかないような場合は、以下の黄色でマーカーしてある部分をコメントアウトすると、この現象が発生しなくなります。
<Page.BottomAppBar>
    <AppBar x:Name="BottomAppBar1" Padding="10,0,10,0" Background="DarkGreen">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*"/>
                <ColumnDefinition Width="50*"/>
            </Grid.ColumnDefinitions>
            <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                <Button x:Name="Add1"  Style="{StaticResource AddAppBarButtonStyle1}" Tag="Add1" Click="Add1_Click"/>
                <Button x:Name="Add2"  Style="{StaticResource AddAppBarButtonStyle2}" Tag="Add2" Click="Add2_Click"/>
            </StackPanel>

        </Grid>
    </AppBar>
</Page.BottomAppBar>


[アプリバーについての詳細情報]
アプリバーについてのさらに詳しい情報は、下記サイトをご覧ください。

アプリバーのガイドライン
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465302.aspx

アプリバーの追加 (XAML)

http://msdn.microsoft.com/ja-jp/library/windows/apps/xaml/hh781232.aspx

アプリバーの追加 (JavaScript)

http://msdn.microsoft.com/ja-jp/library/windows/apps/Hh465309(v=win.10).aspx

[前後の記事]

vol.01 : 余白の取り方の決まり
vol.03 : 共有チャームで情報共有


マイクロソフト
田中達彦
※ 「Metroスタイル アプリ」は、「Windowsストア アプリ」に名前が変わりました。
Skip to main content