Monday, February 9, 2015

How to use Windows Phone Appbar using Cimbalino.Toolkit with Panorama control

My brief story of two application bar implementations... 


I love AppBarUtils, no doubt! There's so much love in that package and I have used it in several of my windows phone projects. But I wanted to try out something else that has the same or more features... and I know one thing for sure... AppBarUtils has a bug (at least that's what I found out). I cannot bind the IsEnabled property especially if I have different panorama item to display different appbar buttons and menus.. After some googling around, there are developers who faced the same problem as I did too... one of them advice to try out Cimbalino Windows Phone Toolkit. So my adventure begins..

Here comes Cimbalino Windows Phone Toolkit!

So far it has 15,578 downloads as of this blog posting, compared with AppBarUtils which has 8,682 downloads... Hmmm..!

Bugs aside, I'm not going to write about the bug here. What I want to share is the fact that the way Cimbalino Appbar works a bit different from the AppBarUtils counterpart, and there aren't a lot of examples to follow, hence I did some digging myself...

Just like the AppBarUtils approach, I wanted my Panorama view to have different application bars based on different PanoramaItem selected.

With AppBarUtils, it is already supported in xaml. But for Cimbalino, I have to dig in to find out more about it.

Cimbalino Toolkit has two appbar variants - the ApplicationBarBehavior and MultiApplicationBarBehavior. Both sits in the Cimbalino.Phone.Toolkit.Behaviors namespace. The one I'm interested at is the MultiApplicationBarBehavior as I already know what ApplicationBarBehavior is and how to implement it.

MultiApplicationBarBehavior control has a property called SelectedIndex. It is a dependency property and hence, easy to bind to our viewmodel.


Looking a bit more at the implementation, I found out that there's an internal property called SelectedItem. What this code does is that it gets the int value of the SelectedIndex (which we can bind it in our viewmodel) and then set's the correct ApplicationBar based on it.. nice! Ok, so far I know that SelectedIndex is bindable, and the rest of the code in SelectedItem might lead me to more clues.... (being lazy at looking at Cimbalino's source code though)



In WinPhone's Panorama control... there's an event called SelectionChanged.

If the selection of the PanoramaItem is changed by the user, this event will be triggered..
I think I have enough information to implement this.. so here goes. By the way, I assume you already know MVVM pattern, and any decent MVVM frameworks such as GalaSoft's or others. All in all, what's most important is that you understand the use of INotifyPropertyChanged interface for your viewmodel.

The View and the ViewModel

I have a simple binding property called SelectedIndex.














This property will be binded to the MultiApplicationBarBehavior.SelectedIndex property...

and the final result:








Of course, We can further improve this implementation, but that's for you to find out more..

That's it!

Enjoy!