MVVM and me – Part 4

Its taken me ages to get things done. I am now at the last xaml screen and I am so tired. Last week I spent a bit of time going through AppBar.

I keep whining that Microsoft built this great Binding and Command mechanism in XAML however it was only a half hearted attempt and that they don’t really care whether you use MVVM or not.

AppBar is the perfect example of that. It does not support either.  So the MVVM and XAML community (actually a few developers) have taken the task to themselves. They have created custom AppBar controls that support  Binding and Commanding infrastructure.

So what controls did I find ? there’s

  1. http://appbarutils.codeplex.com/
  2. https://github.com/PedroLamas/Cimbalino-Phone-Toolkit
  3. http://bindableapplicationb.codeplex.com/

 
So what is the experience using them. The first two require you to set the appbar within Behaviours. The 3rd one is the closest to the native AppBar in terms of XAML and simplicity.

The stock WP7 xaml AppBar needs to be set list this.

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar>
        <shell:ApplicationBarIconButton x:Name="btnLast" IconUri="/Images/appbar.image.png" Text="test" Click="btbTest_Click"></shell:ApplicationBarIconButton>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

AppBarUtils and Cimbalino require something like this

<i:Interaction.Behaviors>
    <cimbalinoBehaviors:MultiApplicationBarBehavior SelectedIndex="{Binding ApplicationBarSelectedIndex}">
        <cimbalinoBehaviors:ApplicationBar>
            <cimbalinoBehaviors:ApplicationBarIconButton Command="{Binding AddItemCommand, Mode=OneTime}" IconUri="/Images/appbar.add.rest.png" Text="add" />
        </cimbalinoBehaviors:ApplicationBar>
    </cimbalinoBehaviors:MultiApplicationBarBehavior>
</i:Interaction.Behaviors>

The Bindable AppBar

<bar:Bindable.ApplicationBar>
    <bar:BindableApplicationBar IsVisible="{Binding BarIsVisible}"
        <bar:BindableApplicationBarButton Text="{Binding IconButtonText}" IconUri="{Binding IconUri, FallbackValue=/Icons/Dark/appbar.add.rest.png}" IsEnabled="{Binding ButtonIsEnabled}" />
    </bar:BindableApplicationBar>
</bar:Bindable.ApplicationBar>

The biggest downside is that they do not render at design time. The single biggest advantage of MVVM goes out of the window. You need to use standard appbar in design more and them once you are happy with it, comment it out and replace it with Bindable / Commandable AppBar of your choice.

The whole experience has been such joy that instead of coding till the middle of the night, I switch the laptop off after about 30 – 45 mins of mucking about.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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