08 February 2011

The case for the Bindable Application Bar for Windows Phone 7

I’ve said it once and I’ll say it again:

”Thou shalt not make unto thee any Windows Phone 7 application without MVVMLight

Even when using Application Bar. I strikes me as very odd that people still use that thing for an excuse to bypass the model or even forego MVVM. As early as August a French .NET consultant called Nicolas Humann wrote an excellent blog post about an implementation of a bindable wrapper for the Application Bar. You can simply download the Phone.Fx.Preview project, add this as a project to your Windows Phone 7 solution and then, in stead of  having something like this:

<phone:PhoneApplicationPage.ApplicationBar>
  <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
    <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png"
       Text="Button 1"/>
    <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" 
       Text="Button 2"/>
    <shell:ApplicationBar.MenuItems>
      <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
      <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
  </shell:ApplicationBar.MenuItems>
  </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
and hooking up events to code in the code behind of the XAML, and then doing something complicated with messages or maybe event casting the DataContext of the page to your model type and then calling methods directly - in stead of all this hoopla and duct tape programming you can simply use
<Phone7Fx:BindableApplicationBar x:Name="AppBar" IsVisible="true" >
  <Phone7Fx:BindableApplicationBarIconButton Command="{Binding Command1}" 
    Text="Button 1" IconUri="/Images/appbar_button1.png" />
  <Phone7Fx:BindableApplicationBarIconButton Command="{Binding Command2}" 
    Text="Button 2" IconUri="/Images/appbar_button2.png" />
  <Phone7Fx:BindableApplicationBarMenuItem   
    Command="{Binding Command3}" Text="MenuItem 1" />
  <Phone7Fx:BindableApplicationBarMenuItem   
    Command="{Binding Command3}" Text="MenuItem 2" />  
</Phone7Fx:BindableApplicationBar>

and let the model do the work as it should.

The bindable application bar should be in the toolkit of every Windows Phone 7 developer. Case closed.

5 comments:

Rob said...

Or you could just use Caliburn.Micro which has had this capability for WP7 for months ;) CM enables it's Actions feature to work with the AppBar which means you get a lot more features than commands can offer and you don't have to write the boiler plate code they require either.

Loc#alJoost said...

@Rob, let me put it this way:

http://www.google.nl/trends?q=MVVM+Light,+Caliburn+Micro&ctab=0&geo=all&date=ytd

DigitallyBorn said...

Let me put it this way: https://www.ohloh.net/p/compare?project_0=MVVM+Light+Toolkit&project_1=Caliburn.Micro

Joost van Schaik said...

@DigitallyBorn Wow, I don't often get response on old articles. Anyway, I am perfectly fine with you liking any other MVVM framework better than MVVMLight. I am just stating my opinion. What I like best about MVVMLight is that's a library for just doing the thing I want, it's not a framework that sets a pattern for my App. But my opinion is just that, an opinion.

andreir said...

Nice AppBar implementation!