Windows Phone 7 MVVM #3 - More RadJumpList

Picking up where we left off in the previous post, we are working in a new project that will accommodate all of the controls we highlight throughout this entire series, with the hub of our navigation being a RadJumpList instance.  The next step we have is to add some style to our RadJumpList in order to both take advantage of the built-in functionality and to make it look like a more inviting navigation experience.

Step 1 – Adding an ItemTemplate

One of the huge advantages of any listbox-type control is the ability to style the individual items.  RadJumpList is no different, allowing us to quickly add an ItemTemplate to make our items look a little nicer within the UI.  In our case, we know that we want to utilize this as navigation, so the items need to be big enough to tap with our finger but small enough to ensure the FriendlyName (the name we will display from our MyMVVMItem) fits nicely and doesn’t run over the edge of the screen.  A quick and easy template with size 28 font will do nicely for this:

We’re already looking a bit better here:

Step 2 – Adding Grouping

One of the things I mentioned previously is the two awesome features that RadJumpList have built-in to the control – grouping and sorting.  This enables us to do what I was referring to as the ‘People Hub’ experience, in which we have grouped headers that also have their own functionality for jumping between groups (hence jump-list :D).  Adding grouping is actually really easy and can be done 100% in Xaml:

Stepping through the code, we first open up the GroupDescriptors on RadJumpList to allow for our PropertyGroupDescriptor definition.  In our case, MyMVVMItem has a Category that I split things into, which is perfect for the PropertyName, and since I want things ordered alphabetically I set the SortMode to Ascending.  Now we’ve got this looking a lot better:

Step 3 – Utilizing Jump Functionality

Now I just mentioned the ability to utilize jump functionality with this control, so the first question is of course how much code will this take?  The answer is zero! 

RadJumpList will automatically create a jump screen for you based on your categories.  You can of course modify this by changing the GroupPickerItemTemplate or modify the default group headers with the GroupHeaderItemTemplate, but out-of-the-box we have styled these for you based on phone styling and theme choices, meaning they’ll blend seamlessly with your Windows Phone application regardless of the theme you are using.  Just so you can see what I mean, here is a look at the same code with dark/blue theme versus light/lime:

Neat, right? :)  When you select any of the headers from the jumplist, the control will automatically jump to that group.  It’s great getting functionality like that for free!

Step 4 – ItemTap and MVVM Light (to the rescue)

The last thing that we need to do in order to fully utilize RadJumpList as a navigation hub is to enable users to navigate when tapping an item.  Makes sense, right?

ItemTap is the event we would normally subscribe to when a user is going to tap an item and have something triggered.  We could also do selection/selecteditem/selectionchanged, but I want to take advantage of the fact that we don’t need selection, just to know that an individual item was tapped by the end user.  But we’re using the MVVM pattern, so just setting an event won’t quite do the trick as our code-behind is pretty clean right now.  This is where MVVM Light comes into play.

As you may have noticed, we added the System.Windows.Interactivity assembly to our project as well as a namespace to utilize that assembly – this will let us set an EventTrigger on our control.  That gets us halfway there – EventToCommand from MVVM Light will complete the picture.  With EventToCommand, we can easily  both bind the event to a command on our viewmodel (the name kind of gives that away!) as well as send either command parameters or the original event arguments to the command.  In our case, we want to utilize the command parameters, so our Xaml will look a bit like this:

While our ViewModel will now look like this, courtesy of a new RelayCommand and the Messenger built into MVVM Light:

With this code, we set a new RelayCommand called ItemTapCommand, pass the ListBoxItemTapEventArgs to the ItemTap method, and then find the NavigationName of the item tapped to send off for navigation.  You’ll get to see more of the details of that in the next post when I do a little maintenance on the app to include things like a RadPhoneApplicationFrame for a nicer user experience, but the end result will be tapping an item and navigating to that demo.  Good stuff, right? :)

Check out the up-to-date source code for this project here (including a sneak peak of what that Messenger from MVVM Light is doing with our navName), otherwise stay tuned to more in this WP7 + MVVM series!