Windows Phone 7 MVVM #4 - RadPhoneApplicationFrame and StateManager

In our previous post we were able to utilize event triggers from System.Windows.Interactivity along with EventToCommand from MVVM Light to enable users to tap an item in our RadJumpList and then send a message out to perform some functionality – in our case, navigating to the page in question.  But where does this message go and how is it received?  And how can we add less than 8 lines of code to our application to give it a more native Window Phone look and feel as we’re navigating?  That’s what this blog post is all about!

We will start with those 8 lines of code and the rich functionality that RadPhoneApplicationFrame brings to your WP7 app.

Step 1 – Adding RadPhoneApplicationFrame

One of the big ideas behind RadPhoneApplicationFrame is that it should be easy to use.  In our case, we are adding navigation to our application, so instantly the app will stand out as going from one page to another looks like a static replacement instead of something actually happening and transitioning.  If you flip through the phone, even in the emulator, you’ll notice this isn’t how the WP7 platform apps handle navigation, so why shouldn’t you bring this same experience to your application?

Starting in App.xaml.cs, we want to replace the default RootFrame with our own:

as well as heading into the InitializePhoneApplication() method to replace where the RootFrame is initialized:

Step 2 – Adding Transitions

Wouldn’t it be nice if you could add some rich transitions to your application easily, without the need to type out a lot of Xaml or go into Blend to endlessly tweak the effect you are going for?  We thought so, which is why we have added the RadAnimations and RadTransitions to the RadControls for Windows Phone suite.  These are what will power the RadPhoneApplicationFrame experience within our app, but how easy is it to use them?

Really easy, actually!  Since we have predefined animations as well as very similar properties on many of them, switching and testing different transitions is quite easy to implement.  Here is a look at providing transitions for a combination of a fad and plane projection, ensuring any way you navigate you have some slick animations:

Setting the Transition property of our new RootFrame (now RadPhoneApplicationFrame) hooks this up – no other work required!  And yes, I know, it looks like more than 8 lines of code, that’s just because I made the ForwardIn- and ForwardOutAnimations a little more readable, but those can be done on a single line. :)

Step 3 – Adding a StateManager Class

Since we are going for a decoupled architecture and relying on messaging to handle communication within the app, we want to have our own “grand central station” which will handle all of the nitty gritty tasks that our application will need to perform… like navigation.  We don’t want our viewmodels handling navigation at all short of possibly adding some commands down the road to load or save settings when navigating from a page (or doing tombstoning), so our next best option is to add a class to handle all of this for us as well as provide a hook in case we want to do any sort of logging, internal history (you navigated to the RadChart demo 50 times, you get an achievement!), or anything else we want to keep track of.  Our StateManager starts off pretty humble:

And is initialized within our App.xaml.cs file within the CompleteInitializePhoneApplication() method, ensuring that RootFrame is in fact created so that we can pass it in:

Easy enough, so what about that Messaging thing from MVVM Light?

Step 4 – You Guessed It, MVVM Light Messaging

Thanks to Galasoft, MVVM Light messaging is actually ridiculously easy to use, plus it uses weak references so it is a pretty well architected approach.  To remind you, when handling the EventToCommand ItemTap event from RadJumpList we sent a message off, but until now nobody was listening.  To respond to this message, we simple create a subscription to the same message type and provide a method to handle that subscription, so as soon as a message is fired off it is received by anyone subscribing to it.  Here is the updated version of the StateManager code that includes some messaging:

The end result is that whenever you tap on an item in the RadJumpList it will fire off a “NavigationLocation” message with the “navLocation” string coming along as an event argument, that being used in a URI to enact navigation off of our new RadPhoneApplicationFrame. 

Check out the updated source code for this example to see this all in action, complete with awesome looking page transitions, and stay tuned for more WP7 MVVM goodness!

@EvanHutnick

P.S. – Don’t forget, tomorrow on Wednesday the 25th we’re having another Windows Phone Wednesday webinar!  Check out Jim Wooley presenting Reactive Extensions with Windows Phone 7 and don’t forget, everyone in attendance gets an entry into our Windows Phone drawing and a chance to win one of three RadControls for Windows Phone licenses!