[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アプリケーションでフォームにコントロールをドラッグ&ドロップすると自動で名前がつけられます。

たとえばButtonコントロールをドラッグ&ドロップすると「button1」のように名前が付けられます。

しかしWindows ストア アプリで使用するコントロールはドラッグ&ドロップしても自動では名前がつけられません。

コードからコントロールを操作したい場合や、XAMLでコントロール同士の連携を取りたい場合には、コントロールに名前が付けられている必要があります。

コントロールに名前を付けるには、プロパティウィンドウで設定するか、XAMLの属性で指定を行います。

  • プロパティウィンドウで名前を付ける

ページ上に貼り付けられたコントロールを選択した後、プロパティウィンドウの名前欄にコントロールにつける名前を入力します。既定では「」となっています。

  • XAMLで名前を付ける

XAMLで名前を付ける場合は、該当するコントロールに属性 x:Name を挿入し、コントロールにつける名前をダブルクォーテーションで括ります。

<Button x:Name="button1" Content="Button" HorizontalAlignment="Left" Margin="34,26,0,0" VerticalAlignment="Top"/>