[Windowsストアアプリ開発]アプリバーにボタンを追加する

目次に移動

Windowsストアアプリにはアプリバーという機能があります。アプリバーにボタンを追加してみましょう。
アプリバーはマウスの場合は画面上で右クリック、基本タッチモードの場合は画面下部から上にフリックするとアプリバーが表示されます。

実装する

まずはプロジェクトを作成します。Visual C#で「新しいアプリケーション」を選択しました。

次にソリューションエクスプローラーからMainPage.xamlを選択してデザインを開きます。
ドキュメントアウトラインでPageを選択します。プロパティウインドウにPageのプロパティが表示されます。

「共通」の項目にあるBottomAppBarの新規作成ボタンを押します。
ドキュメントアウトラインのBottomAppBarにAppBarが追加されていると思います。

ドキュメントアウトラインの追加されたAppBarを選択します。

デザインにアプリバーが表示されるのでツールボックスからボタンをドラッグ&ドロップします。

スタイルを変更する

Windows8にプリインストールされているWindowsストアアプリを見ると、アプリバーのボタンには特徴があるようです。
ほとんどのボタンが丸いボタンでボタンの下に文字が書かれています。追加したボタンにスタイルを当てて同じような感じにしてみます。

デザインでボタンを選択してプロパティウインドウにボタンのプロパティを表示します。
「寄せ集め」というグループの中にStyleという項目があるので右側の□をクリックして下さい。メニュが表示されます。

「ローカルリソース」の「AppBarButtonStyle」を選択します。

以下の画面のようにデザイン上のボタンが丸くなります。ボタン上に表示できる文字数が１文字なのでプロパティウインドウでボタンのラベルを変更します。
「共通」グループの「Content」という項目がボタンのラベルになるので、ここを編集します。今回は"B"に変更しました。

最後にボタンの下に文字を入れます。ここからはXAMLを開いて修正する必要があります。
追加したボタンにAutomationProperties.Name="Button" というプロパティを追加します。
AutomationProperties.Nameで指定されている値がボタンの下に表示される文字列になります。

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.BottomAppBar>
        <AppBar>
            <Button Content="B" HorizontalAlignment="Left" Width="100" Style="{StaticResource AppBarButtonStyle}"
                    AutomationProperties.Name="Button"/>
        </AppBar>
    </Page.BottomAppBar>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    </Grid>
</Page>

ボタンの下に"Button"という文字列が表示されます。ボタンを押した時の処理は通常のボタンと同じなので省略します。

目次に移動