UWPのAppBarの作り方

Win8/8.1のストアアプリなどと同じようにUWPにもAppBarがあります。
UWPでは、Win8系よりもいろいろと柔軟に実装できそう。

UWPでのAppBar定義場所

UWPでは、画面上部のTopAppBarと、画面下部のBottomAppBarの部分にAppBarを配置することができます。

また、ここにはAppBarクラスまたは、Win8.1で追加されたCommandBarクラスのインスタンスを配置することができます。
CommandBarの方が高機能なので、通常はCommandBarを使うことになるのかな。

また、TopAppBar/BottomAppBar以外のUI上の任意の位置にも定義できるみたいです。
(どんな使い方があるのか、イマイチ思いつきませんが。)

こんな感じ。

<Page x:Class="LayoutTest.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:LayoutTest"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">
    <Page.TopAppBar>
        <AppBar>
            <AppBarButton Label="TopAppBarのボタン" Icon="Edit"/>
        </AppBar>
    </Page.TopAppBar>
    <Page.BottomAppBar>
        <CommandBar >
            <AppBarButton Label="BottomAppBarのボタン" Icon="Edit"/>
        </CommandBar>
    </Page.BottomAppBar>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <!-- こんなところにも置ける -->
        <CommandBar HorizontalAlignment="Center" VerticalAlignment="Center" >
            <AppBarButton Label="こんなとこにも" Icon="Edit"/>
        </CommandBar>

    </Grid>
</Page>

CommandBarの各種プロパティ

ということで、続いてCommandBarの各種プロパティについてメモしときます。

プロパティ名	内容
PrimaryCommands	CommandBarの右側から順に表示される要素を定義
SecondaryCommands	「...」をクリックしたときにポップアップ表示されるメニューの要素を定義
Content	CommandBarの左から表示される要素を定義
ClosedDisplayMode	CommandBarの表示モードを設定。Compact, Minimal, Hiddenから選択

    <Page.BottomAppBar>
        <CommandBar ClosedDisplayMode="Minimal">
            <CommandBar.SecondaryCommands>
                <AppBarButton Label="Secondary1" Icon="Edit"/>
                <AppBarButton Label="Secondary2" Icon="Edit"/>
                <AppBarToggleButton Label="Secondary3" Icon="Edit"/>
            </CommandBar.SecondaryCommands>
            <CommandBar.Content>
                <!--ここには、AppBarButtonなど以外の任意のコントロールを配置できる-->
                <StackPanel Orientation="Horizontal">
                    <AppBarButton Label="Content1" Icon="Add"/>
                    <Slider Width="100"/>
                </StackPanel>
            </CommandBar.Content>

            <!--ここに定義したものはPrimaryCommandsプロパティになる-->
            <AppBarButton Label="Primary1" Icon="Font"/>
            <AppBarToggleButton Label="Primary2" Icon="Edit"/>
        </CommandBar>
    </Page.BottomAppBar>

CommandBarクラスのContentProperty属性について

CommandBarクラスの定義を見てみると、ContentProperty属性が「PrimaryCommands」となっています。
そのため、CommandBar直下に定義したXAML要素はPrimaryCommandsとなり、Contentプロパティは別途「CommandBar.Content」以下に定義する必要があります。