kazuakix の日記

Windows Phone とか好きです

Windows Phone 8.1 でアプリバーを作る

Windows Phone

Windows Phone 8.1 になって結構変わっていますね。Phone 7 の頃のアプリを持ってきている途中で一瞬悩んだのでメモを兼ねて。

Windows Phone 7.x/8.0 (Silverlight)

こんな感じでしたね。微妙に特殊な扱い方でややこしかった記憶があります。

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="メニュー項目"/>
            <shell:ApplicationBarMenuItem Text="メニュー項目"/>
        </shell:ApplicationBar.MenuItems>
        <shell:ApplicationBarIconButton IconUri="appbar_button.png" Text="ボタン"/>
        <shell:ApplicationBarIconButton IconUri="appbar_button.png" Text="ボタン"/>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

8.1 でも Silverlight を選ぶとこの形になります。
　

Windows Phone 8.1 (WinRT)

Visual Studio や Blend のドキュメント アウトラインで BottomAppBar を右クリックして「CommandBar の追加」をします。自動的にボタン 2 つのアプリバーが作られます。

f:id:kazuakix:20140831232533j:plain
　
ボタンを 4 つまで追加できるのは以前と同じですが、AppBarButton の他に AppBarToggleButton なるものが追加できるようになっています。

f:id:kazuakix:20140831232538j:plain

名前の通り ON/OFF の状態を持つことができます。

f:id:kazuakix:20140831232545j:plain,w373
　
次は以前のメニュー項目にあたる部分ですが、AppBarMenuItem みたいなものがあるのかと思っていたら、ボタンを追加した PrimaryCommand の下にある SecondaryCommand に同じく AppBarButton　を追加すればいいだけでした。

f:id:kazuakix:20140831232550j:plain

AppBarToggleButton も追加できますが、状態が変わっても特に表示は変わらないようです。もう少し調べてみないといけないですね。

f:id:kazuakix:20140831232555j:plain,w373
　
できあがった XAML はこんな感じ。

<Page.BottomAppBar>
    <CommandBar>
        <CommandBar.SecondaryCommands>
            <AppBarButton Label="appbarbutton"/>
            <AppBarToggleButton Label="appbartogglebutton" IsChecked="True"/>
        </CommandBar.SecondaryCommands>
        <AppBarButton Icon="Accept" Label="appbarbutton"/>
        <AppBarButton Icon="Cancel" Label="appbarbutton"/>
        <AppBarToggleButton Icon="Accept" Label="appbartogglebutton"/>
    </CommandBar>
</Page.BottomAppBar>

作り方が変わっただけではなく、他のコントロールと同じようにプロパティにバインドしたりできるようになっていて細かい制御ができるようになっています。
やはり時代は WinRT ですね。