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!

The 'ProductID' attribute is invalid - http://WPCommontypesST_Guid

Recently I found something that might be a bug when creating cross platform projects using Xamarin.Forms.

The error exists in the Windows Phone 8 Silverlight project and does not exists in the Android nor the iOS projects. 

After project creation is completed, go ahead and build the entire solution (or in this case just the Windows Phone project). Potentially you'll get the error as below:

Because of this, you won't be able to compile the windows phone project at all.. sad! 

All is not lost, the good thing is that it is easy to fix! 

What you need to do is this..

Navigate to the Windows Phone 8.0 project and expand Properties. You will see several files on that section and one of them is WMAppManifest.xml file.

Next, double click on that file. You'll get this.

click the link "View manifest in XML editor" and choose "Yes" when the dialog popups up.

Find the the section ProductID and PublisherID.

It should look something like this in the xml:-

Now, what you need to do is put in open and close curly brackets for both ProductID and PublisherID

Save, the file, and close it. Double click on the WMAppManifest.xml file again. You will get this

Compile the project. The error is gone :)

I am not sure if this is a fix for it, but it does work in my case. 

I am happy!  :)

Happy coding!

Microsoft Build Event

I didn't realize that last night (MY time) was the starting date for Microsoft's Build event, until I saw in an email notification of mine..

Not in the mood to turn on my PC to watch the keynote, I did it on my Lumia..

Live streaming screenshot taken from my Lumia..

Day 1 saw a hefty load of interesting topics. But I was more keen on "Universal Xaml language and TypeScript.

The former, being a great thing to many win phone developers, we can now target  apps for Windows 8.1 as well.. That's a good thing as you don't need to write two different xaml apps - potentially some tweaking is needed nonetheless. I've blogged before that IOS and Android already have this capability, but for me, coming from a .NET developer point of view, it is something worth waiting for - albeit a bit late in the game.

The latter, on the other hand is something I look forward to see more. What is Typescript?

TypeScript is a free and open source programming language developed by Microsoft. It is a strict superset of JavaScript, and adds optional static typing and class-based object-oriented programming to the language. Anders Hejlsberg, lead architect of C# and creator of Delphi and Turbo Pascal, has worked on development of TypeScript.
reference: wikipedia

I don't know anything about TypeScript although I've heard people talking about it. My bet is it has something to do with javascript and web development... I might just look into it as well in the near future...


I'll write more on this.. so stay tuned..