Advanced ApplicationBarの紹介

このAdvanced ApplicationBarはかなりすぐれものです。Windows Phone SDKに含まれるApplicationBarには足りなかった機能が入っています。

1.Binding

ApplicationBarを構成するApplicationBarIconButtonやApplicationBarMenuItemはFrameworkElementを派生していないのでバインディングできません。
しかし、それらに代わるAdvancedApplicationBarIconButtonやAdvancedApplicationBarMenuItemはFrameworkElementから派生し、かつ依存関係プロパティになっているためバインディングが可能です。

<Sh:AdvancedApplicationBarIconButton
     IsEnabled="{Binding AppBarIconButtonEnabled}"
     Text="{Binding AppBarIconButtonText}"
     IconUri="{Binding IconUri}"/>
2.コマンド(ICommand)

コマンドを利用すればよりビューへの記述が少なくなりビューへの負担が軽くなります。さらにパラメータも渡すことができるので利用の幅が広がります。MVVMならコマンドを使えた方がよいですね。

<Sh:AdvancedApplicationBarIconButton 
     Command="{Binding DeleteCommand}"
     CommandParameter="42" />
3.Visibility

アイコンの表示・非表示が可能です。

<Sh:AdvancedApplicationBarIconButton 
     Visibility="{Binding Visibility}" />
4.PanoramaとPivot

各ページに一つのApplicationBarしか持てなかったのでPanoramaやPivotといった一つのページの中で複数のビューを持つ場合に、ビューを切り替えるたびにApplicationBarをそれぞれのビュー用にApplicationBarを再構築する作業が必要でした。
しかしAdvancedApplicationBarを使えば各ビューごとにApplicationBarのアイテムを定義することができます。かといってすべてのビューで定義する必要があるかというとそうでもなく、共通して利用するものはPanoramaの外側で定義することで、Panorama全体で利用することができます。

<controls:Panorama>
  <controls:PanoramaItem Header="AppBar">
    <Grid>
        <Sh:AdvancedApplicationBarIconButton
            Visibility="{Binding Visibility}"
            IsEnabled="{Binding AppBarIconButtonEnabled}"
            Text="{Binding AppBarIconButtonText}"
            IconUri="/Images/appbar.delete.rest.png"/>
        <Sh:AdvancedApplicationBarIconButton
            Visibility="{Binding Visibility}"
            IsEnabled="{Binding AppBarIconButtonEnabled}"
            Text="{Binding AppBarIconButtonText}"
            IconUri="/Images/appbar.edit.rest.png"/>
        <Sh:AdvancedApplicationBarMenuItem Text="MenuItemTxt" />
    </Grid>
  </controls:PanoramaItem>
  <controls:PanoramaItem Header="Empty">
    <Grid>
        <Sh:AdvancedApplicationBarIconButton
            Visibility="{Binding Visibility}"
            IsEnabled="{Binding AppBarIconButtonEnabled}"
            Text="{Binding AppBarIconButtonText}"
            IconUri="/Images/appbar.feature.camera.rest.png"/>
    </Grid>
  </controls:PanoramaItem>
</controls:Panorama>
<Sh:AdvancedApplicationBar>
  <Sh:AdvancedApplicationBarIconButton
            IsEnabled="{Binding AppBarIconButtonEnabled}"
            Text="{Binding AppBarIconButtonText}"
            IconUri="/Images/appbar.feature.settings.rest.png" />
</Sh:AdvancedApplicationBar>

Advanced ApplicationBarはCodePlexShWPにあります。
ダウンロードはこちらです。http://shwp.codeplex.com/releases/view/76914

■使い方

  1. ダウンロードしたファイルに存在するsh.dllを参照に加える
  2. XAMLのネームスペースに「xmlns:Sh="clr-namespace:Sh;assembly=Sh"」を加える


参考:Advanced ApplicationBar for Windows Phone