Project Description
A bindable ApplicationBar control wrapper for Windows Phone that allows specifying and updating the ApplicationBar properties by changing the properties of a view model instead of handling events in the code behind.

Getting BindableApplicationBar

The binaries are available on NuGet - just search for appbar.
Otherwise - go to the Source Code tab and browse or download the code to use the latest version or go to Downloads to get the latest packaged release.

Features

  • A completely bindable ApplicationBar wrapper
  • Bindable ApplicationBarIconButton and ApplicationBarMenuItem wrappers
  • Bindable Command properties on the icon buttons and menu items that
    • Execute on tap
    • Set IsEnabled on the associated command’s CanExecuteChanged event based on the command’s CanExecute result
    • Support CommandParameter
  • Bindable ButtonsSource and MenuItemsSource properties that allow to bind the ApplicationBar to collections of view models representing the buttons and menu items displayed.
    These work in conjunction with ButtonTemplate and MenuItemTemplate to allow to set the names of properties in the backing button/menu item view models or by default – expect the view model to have the same property names as the properties of corresponding BindableApplicationBarButton or BindableApplicationBarMenuItem.
  • Support for defining buttons and menuitems both manually through XAML and through ButtonsSource/MenuItemsSource at the same time.
  • StyleCop and ReSharper clean source code (apart for a very few disabled checks)

Using BindableApplicationBar

The easiest way to see how to use it is to look at the sample project (BindableApplicationBarTestApp), but these are the essential steps:

  1. Add a reference to the BindableApplicationBar library (source or compiled)
  2. Add XML namespace declaration in your page's XAML:
    xmlns:bar="clr-namespace:BindableApplicationBar;assembly=BindableApplicationBar"
  3. Set Bindable.ApplicationBar property on your page code as in the snippet below:
    <phone:PhoneApplicationPage>

       

        <bar:Bindable.ApplicationBar>

            <bar:BindableApplicationBar>

            </bar:BindableApplicationBar>

        </bar:Bindable.ApplicationBar>

     

    </phone:PhoneApplicationPage>

  4. Bind properties of the BindableApplicationBar to your view model. Available properties:
    • BackgroundColor
    • BindableOpacity
    • Buttons (also the default Content property – you can just put BindableApplicationBarButton XML elements inside of the BindableApplicationBar XML element).
      BindableApplicationBarButton properties:
      • Command
      • CommandParameter
      • IconUri
      • IsEnabled
      • Text (note that the control can only fit up to about 11 characters and will trim anything over that limit)
    • ButtonsSource (alternative to Buttons – allows to bind to a collection of view models in a similar fashion to ListBox.ItemsSource)
    • ButtonTemplate (used with ButtonsSource in a similar way ListBox.ItemTemplate is used with ListBox.ItemsSource)
    • ForegroundColor
    • IsMenuEnabled
    • IsMenuVisible
    • IsVisible
    • MenuItems (similar to Buttons, but for BindableApplicationBarMenuItem elements and needs to be specified explicitly as <BindableApplicationBar.MenuItems/>).
      BindableApplicationBarMenuItem properties:
      • Command
      • CommandParameter
      • IsEnabled
      • Text (note the text can fit about 28 digit glyph-wide characters and will trim anything over that limit)
    • MenuItemsSource
    • MenuItemTemplate
    • Mode
  5. Note ApplicationBar limitations – the total number of buttons defined through either the regular ApplicationBar, BindableApplicationBar.Buttons or BindableApplicationBar.ButtonsSource can’t be higher than 4. MenuItems max out at 50. If you go over – you will get an InvalidOperationException with a message like “Too many items in list”.

Sample code

<bar:Bindable.ApplicationBar>

    <bar:BindableApplicationBar

        IsVisible="{Binding BarIsVisible}"

        IsMenuVisible="{Binding IsMenuVisible, Mode=TwoWay}"

        IsMenuEnabled="{Binding IsMenuEnabled}"

        ForegroundColor="{Binding ForegroundColor, Converter={StaticResource DoubleToColorConverter}}"

        BackgroundColor="{Binding BackgroundColor, Converter={StaticResource DoubleToColorConverter}}"

        BindableOpacity="{Binding Opacity}"

        Mode="{Binding Mode}"

        MenuItemsSource="{Binding MenuItems}"

        ButtonsSource="{Binding Buttons}">

        <!--<bar:BindableApplicationBar.MenuItemTemplate>

            <DataTemplate>

                <bar:BindableApplicationBarMenuItem

                    Text="{Binding Text}"

                    Command="{Binding Command}"

                    CommandParameter="{Binding CommandParameter}"/>

            </DataTemplate>

        </bar:BindableApplicationBar.MenuItemTemplate>-->

        <bar:BindableApplicationBarButton

            Text="{Binding IconButtonText}"

            IconUri="{Binding IconUri, FallbackValue=/Icons/Dark/appbar.add.rest.png}"

            IsEnabled="{Binding ButtonIsEnabled}" />

        <bar:BindableApplicationBarButton

            Text="XAML Btn 2"

            IconUri="/Icons/Dark/appbar.next.rest.png"

            Command="{Binding TestCommand}"

            CommandParameter="{Binding TestCommandParameter}" />

        <bar:BindableApplicationBar.MenuItems>

            <bar:BindableApplicationBarMenuItem

                Text="{Binding MenuItemText}"

                IsEnabled="{Binding MenuItemIsEnabled}" />

            <bar:BindableApplicationBarMenuItem

                Text="XAML MnuIt 2"

                Command="{Binding TestCommand2}"

                CommandParameter="{Binding TestCommand2Parameter}" />

        </bar:BindableApplicationBar.MenuItems>

    </bar:BindableApplicationBar>

</bar:Bindable.ApplicationBar>

 

Related blog posts

http://xyzzer.wordpress.com/2011/10/21/the-quest-for-a-bindable-applicationbar-part-1/
http://xyzzer.wordpress.com/2011/10/28/the-quest-for-a-bindable-applicationbar-part-2/
http://xyzzer.wordpress.com/2011/11/10/the-quest-for-a-bindable-applicationbar-part-3/
http://blog.xyzzer.me/2011/11/13/bindableapplicationbar-rc1-windows-phone-prism-application-template/

Outstanding issues

  1. Bindings through ElementName are not supported
  2. No built in limiters or bindable check support to account for the maximum number of buttons or menu items – you need to check it yourself to make sure you don’t try to add too many buttons or menu items.

Last edited Feb 18, 2012 at 6:03 AM by xyzzer, version 11