Windows 8ストア・アプリでは、右ボタンをクリックすると画面の上部や下部にアイコンの並んだバーが現れます。これは「アプリバー」と呼ばれるもので、メニューバーを持たないWindows 8ストア・アプリで細かな操作を行うための基本UIとなっています。

このアプリバーは、XAMLにタグを追加することで簡単に実装することができます。これは、<Page>タグ内に<AppBar>というタグを使って記述をします。

ただし、この<AppBar>タグ、それ一個をぽつんと書いておけばいいわけではありません。その中にきれいにボタンをレイアウトして配置するためにいくつかのタグを組み合わせて使うことになります。基本的なタグの書き方をまとめると以下のようになるでしょう。

<AppBar>
    <Grid>
        <StackPanel>
            ……ここに表示するボタンの情報を書く……
        </StackPanel>
    <Grid>
</AppBar>

最初に使われている<Grid>というタグは「レイアウトパネル」と呼ばれるものの一種で、コントロール類を縦横に整列配置するためのものです。これは<Page>タグのすぐ中にも使われていますね。

この<Grid>タグを配置し、その中にタグを記述すれば、それらのコントロールがきれいに縦横に配置されます。コントロールを配置する位置を指定したい場合には、そのコントロールに「Grid.Column」「Grid.Row」といった属性を使って指定することができます。例えば、

<Button Grid.Column="1" Grid.Row="3">

こんなタグを<Grid>内に書けば、Buttonを左から２番目、上から３列目のグリッドにはめ込んで表示します（Grid.ColumnとGrid.Rowはインデックス番号――すなわちゼロから割り振られる番号で指定されます）。

グリッドの幅などは、<Grid.ColumnDefinitions>、<Grid.RowDefinitions>というタグを<Grid>内に追加して設定できます。これはその中に<ColumnDefinition>、<RowDefinition>というタグを使って幅などの情報を指定します。

例えば、縦横100ドット幅でグリッドを用意したいような場合には、以下のようにタグを用意すればよいでしょう。

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="*/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="100"/>
    <RowDefinition Height="100"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>

もう１つのレイアウトパネル<StackPanel>は、コントロール類を縦や横に一列に並べるのに用いられるものです。これはOrientationという属性に「Horizontale」「Vertical」のいずれかを指定することで、横一列か縦一列にコントロールを並べます。アプリバーでは、

<StackPanel Orientation="Horizontal">

このようにして横一列にアイコンが並ぶように設定します。そしてこの<StackPanel>内に、具体的な表示内容が記述されていきます。