Martin Suchan – BloQ Random #WPdev stuff

12Jun/130

Pro WP8 AppBar management with AppBarUtils

When developing apps for Windows Phone 8, every developer needs to know how to create and manage the App Bar. The problem is you cannot use databindings and/or localization in App bar buttons and menu items, you also cannot bind the colors or enabled state or even use commands bound to the buttons.

Most apps I've seen uses tedious programmatic initialization in code, repetitive entering of same resource values, or even not localized App bar at all. But there is an easy solution - the AppBarUtils library.

With this library you can use databinding for all AppBar properties, use Commands, even use dynamic app bar content for currently selected pivot/panorama item or your own state like logged-in/logged-out user. Let's see, how to do it.

This is how common AppBar looks like - two buttons and one menu item.

<phone:PhoneApplicationPage.ApplicationBar>
   <shell:ApplicationBar>
     <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/search.png" Text="search" Click="Search"/>
     <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/selectCity.png" Text="location" Click="SelectCity"/>
     <shell:ApplicationBar.MenuItems>
       <shell:ApplicationBarMenuItem Text="settings" Click="ShowSettings"/>
     </shell:ApplicationBar.MenuItems>
   </shell:ApplicationBar>
 </phone:PhoneApplicationPage.ApplicationBar>

As noted before, we can't use here DataBinding or localization or Commands. Now let's take a look on the same app bar using AppBarUtils:

<phone:PhoneApplicationPage.ApplicationBar>
   <shell:ApplicationBar>
     <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/search.png" Text="search"/>
     <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/selectCity.png" Text="location"/>
     <shell:ApplicationBar.MenuItems>
       <shell:ApplicationBarMenuItem Text="settings"/>
     </shell:ApplicationBar.MenuItems>
   </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
<i:Interaction.Behaviors>
   <abu:AppBarPropertyBinder ForegroundColor="{StaticResource BackgroundColor}" BackgroundColor="{StaticResource HeadlinesColor}"/>
   <abu:AppBarItemCommand Id="search" Text="{Binding Loc.AppBarSearch}" Command="{Binding ShowSearch}" />
   <abu:AppBarItemCommand Id="location" Text="{Binding Loc.AppBarSelectCity}" Command="{Binding ShowCitySelection}" />
   <abu:AppBarItemCommand Id="settings" Text="{Binding Loc.AppBarSettings}" Type="MenuItem" Command="{Binding ShowSettings}" />
</i:Interaction.Behaviors>

Here we use App bar stub + Behaviors from the AppBarutils library.
AppBarPropertyBinder is used for changing properties of the ApplicationBar, each AppBarItemCommand is bound with one ApplicationBarIconButton or ApplicationBarMenuItem using the Text <=> Id matching.
As you can see we use application wide resources for the App bar Foreground and Background colors, we use databound localized labels (MainViewModel with "AppResources Loc" property is used as DataContext on current page). We also use binding to Commands that are located within our MainViewModel as well. It is really that easy.

Another example is how to implement dynamic App bar based on selected pivot item.

<controls:Pivot>
  <controls:PivotItem Header="item1">
  ...
  </controls:PivotItem>
  <controls:PivotItem Header="item2">
  ...
  </controls:PivotItem>
 
  <i:Interaction.Triggers>
    <appBarUtils:SelectedPivotItemChangedTrigger>
      <appBarUtils:SelectedPivotItemChangedTrigger.SelectionMappings>
        <appBarUtils:SelectionMapping SourceIndex="0" TargetIndex="0"/>
      </appBarUtils:SelectedPivotItemChangedTrigger.SelectionMappings>
 
      <appBarUtils:SwitchAppBarAction>
        <appBarUtils:AppBar Id="0">
          <appBarUtils:AppBarButton IconUri="/Assets/appbar.save.png" Text="{Binding Loc.AppBarSaveImage}"
            Command="{Binding SaveFile}" IsEnabled="{Binding Downloading, Converter={StaticResource BooleanNegation}}"/>
          <appBarUtils:AppBarButton IconUri="/Assets/appbar.web.png" Text="{Binding Loc.AppBarShowApodWeb}"
            Command="{Binding ShowApodWeb}" IsEnabled="{Binding Downloading, Converter={StaticResource BooleanNegation}}"/>
          <appBarUtils:AppBarButton IconUri="/Assets/appbar.settings.png" Text="{Binding Loc.AppBarrLockSettings}"
            Command="{Binding ShowLockSettings}" IsEnabled="{Binding Downloading, Converter={StaticResource BooleanNegation}}"/>
        </appBarUtils:AppBar>
      </appBarUtils:SwitchAppBarAction>
    </appBarUtils:SelectedPivotItemChangedTrigger>
  </i:Interaction.Triggers>
</controls:Pivot>

This is really simple example from my app Astronomy Lock Screen for WP8 - here I got Pivot with two pivot items and I want to show the App bar only when the first pivot item is active, and hide it for the other item.

Just try to imagine, how would you implement such behavior manually with working localization and command binding? You don't have to, just use this library:

http://appbarutils.codeplex.com/

Source code including lot of samples, how to use it.

Also available as NuGet package.

Filed under: .NET, WP8, WPdev Leave a comment