Application Bar binding in Windows Phone 7 using Ultralight.MVVM

The boot camp at Dallas for Windows Phone is going great, it is a open lab model where if there are any interesting questions, the speakers provide short demo for the whole group otherwise work on the project and ask questions. I am really enjoying it. For my project that I am developing, up front I decided to use Ultralight.MVVM frame work since I am very familiar with Jounce. One thing I stumbled up on when using Ultralight.MVVM is the difficulty to bind Application Bar like you would bind normal buttons. Fortunately the sample Jeremy provided did have his work around to this problem by keeping clean MVVM framework without writing any code in the code behind. We will see how to do that in this blog.

If you are new to Windows Phone development using MVVM framework then please read Jeremy’s blog to understand ins and out of the using Ultralight.MVVM. So lets get on to how to do view model binding for Application Bar.

In my application I am planning to have four buttons in my application bar and they are to Clear the data, Add or Remove data and apply changes. So my Application bar in XAML looks like the following

    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">             
    <shell:ApplicationBarIconButton IconUri="/Images/OK.png" Text="Score" />             
    <shell:ApplicationBarIconButton IconUri="/Images/Clear.png" Text="Clear"/>             
    <shell:ApplicationBarIconButton IconUri="/Images/Add.png" Text="Add" />             
    <shell:ApplicationBarIconButton IconUri="/Images/Remove.png" Text="Remove"/>         

By the way I am using free icons from this web site for testing. If you would look at the application bar there is no binding to tell the view what command to execute. This magic happens in the ViewModel.

This is three set process;

1. Create the commands first as follows

        public IActionCommand<object> AddCommand { get; private set; }         
        public IActionCommand<object> RemoveCommand { get; private set; }         
        public IActionCommand<object> ApplyCommand { get; private set; }         
        public IActionCommand<object> ClearCommand { get; private set; }
2. Instantiate the commands in the constructor as 
public MainViewModel()         
AddCommand = new ActionCommand<object>(o => _Navigate());             
RemoveCommand = new ActionCommand<object>(o => _Navigate());             
ApplyCommand = new ActionCommand<object>(o => _Navigate());             
ClearCommand = new ActionCommand<object>(o => _Navigate());         
3. Next and the final step to make sure you create a collection of commands and assign it to ApplicationBinding as shown below. 
         /// <summary>         
         ///     For pages, the list of commands to bind to application bar buttons         
         /// </summary>         
         public override IEnumerable<IActionCommand<object>> ApplicationBindings         
              get { return new[] { ApplyCommand, ClearCommand, AddCommand, RemoveCommand }; 

That’s about it, now you have bound the application bar buttons to Action Command in the View Model.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s