[Windows ストア アプリ] アプリバーに表示するボタンをグループ化する

アプリバーに表示するボタンはグループ化することができます。

グループ化を行うと、画面の左側の右側に表維持するボタンを分けることができます。

ボタンをグループ化するには、最初にAppBarにGridを配置して左右2つに分割します。次に、分割した左側と右側にそれぞれStackPanelを配置し、その中にボタンを配置します。

下記はアプリバーに表示するボタンをグループ化する例です。

左側には[Edit][Remove][Add]の3つのボタンを、右側には[Refresh][Help]の2つのボタンを配置しています。

ボタンをグループ化する例

<Page.BottomAppBar>
    <AppBar IsOpen="True">
		<Grid>
			<Grid.ColumnDefinitions>
				<ColumnDefinition/>
				<ColumnDefinition/>
			</Grid.ColumnDefinitions>
			<StackPanel Orientation="Horizontal">
				<Button Style="{StaticResource EditAppBarButtonStyle}" />
				<Button Style="{StaticResource RemoveAppBarButtonStyle}" />
				<Button Style="{StaticResource AddAppBarButtonStyle}" />
			</StackPanel>
			<StackPanel Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal">
				<Button Style="{StaticResource RefreshAppBarButtonStyle}" />
				<Button Style="{StaticResource HelpAppBarButtonStyle}" />
			</StackPanel>
		</Grid>
	</AppBar>
</Page.BottomAppBar>

[Windows ストア アプリ] アプリバーの表示/非表示を切り替える

アプリバーの表示/非表示はコードから操作することが可能です。

アプリバーの表示/非表示はIsOpenプロパティで設定し、Trueにするとアプリバーが表示されます。

下記はコードからアプリバーの表示/非表示を行う例です。

画面に貼り付けられたToggleButtonの状態(押されているかどうか)で、アプリバーの表示/非表示を切り替えます。

アプリバーの表示/非表示を切り替える例

XAMLの例

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
	<ToggleButton x:Name="ToggleButton1" Content="AppBarの表示/非表示" HorizontalAlignment="Left" Margin="10,644,0,0" VerticalAlignment="Top" Checked="ToggleButton1_Checked"/>
</Grid>
<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" IsOpen="True">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Horizontal">
                <Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/>
                <Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/>
            </StackPanel>
            <StackPanel Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal"/>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

C#のコード例(ToggleButtonクリック時)

// ToggleButtonチェック時の処理
private void ToggleButton1_Checked(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
	bottomAppBar.IsOpen = (bool)ToggleButton1.IsChecked;
}

[Windows ストア アプリ] アプリバーを追加する

アプリバーは、Windows ストア アプリケーションに、ナビゲーション機能やコマンド、ツールを表示します。

アプリバーはページの上部か下部、もしくはその両方に表示することが可能で、不要な時には非表示にすることができます。

アプリケーションにアプリバーを追加するにはAppBarコントロールをPageに貼り付けます。

まず、Blendを起動して[アセット]タブにある[コントロール]からAppBarコントロールを見つけます。

見つけたら、AppBarコントロールを[オブジェクトとタイムライン]の[Page]にある[BottomAppBar]か[TopAppBar]にドラッグ&ドロップします(図1)。

ページの上部に配置する場合は[TopAppBar]、ページの下部に配置する場合は[BottomAppBar]です。

図1 AppBarの追加

[BottomAppBar]にAppBarを配置すると、ページは図2のようになります。

図2 AppBarの追加例

AppBar追加後のXAMLはリスト1のようになり、AppBarはPageのBottomAppBarプロパティに追加されていることを確認できます。

リスト1 AppBar追加後のXAML

<Page.BottomAppBar>
	<AppBar>
		<Grid>
			<Grid.ColumnDefinitions>
				<ColumnDefinition/>
				<ColumnDefinition/>
			</Grid.ColumnDefinitions>
			<StackPanel Orientation="Horizontal"/>
			<StackPanel Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal"/>
		</Grid>
	</AppBar>
</Page.BottomAppBar>

アプリバーに表示できるボタンはあらかじめ準備されているものがあります(もちろん自作のボタンも表示可能です)。

アプリバーに追加できるボタンは、プロジェクトのCommonフォルダのStandardStyles.xamlファイルに格納されています。

既定ではコメントになっているため、必要に応じて解除をします。

例としてEditAppBarButtonStyleとRemoveAppBarButtonStyleのコメントを解除して、PageのAppBarへボタンを追加してみます(リスト2)。

StandardStyles.xamlに定義されているボタンを使用するときは、ButtonコントロールのStyleプロパティで指定します。

リスト2 ボタンを追加する例

<Page.BottomAppBar>
	<AppBar>
		<Grid>
			<Grid.ColumnDefinitions>
				<ColumnDefinition/>
				<ColumnDefinition/>
			</Grid.ColumnDefinitions>
			<StackPanel Orientation="Horizontal">
			    <Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/>
                <Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/>
			</StackPanel>
			<StackPanel Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal"/>
		</Grid>
	</AppBar>
</Page.BottomAppBar>

ボタンを追加するとPageは図3のようになります。

図3 ボタン追加後のPage

StandardStyles.xamlに定義されているボタンの画像は

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

で確認することができます。

興味がある人はぜひのぞいてみてください。