Inspiration for Windows Phone 8.0 Silverlight Implementation

I had found a few Windows Phone slide out implementations, http://slideview.codeplex.com/, but attempting to tie them in with MvvmCross appeared to be a bit of a tall order, and for a while I had given up on my dream of unifying a slide out menu architecture for all three platforms.

I took the evening and dissected the demo Xamarin.Forms app. iOS and Android implemented the familiar ‘hamburger’ in the upper left hand corner, that when pressed, would reveal other screens the user could navigate to. The Windows Phone however placed the button on the ApplicationBar, and when pushed showed a whole new page.

Inspired, I went back to Visual Studio and proceeded to provide a Windows Phone implementation of my slide out menu architecture.

Windows Phone Silverlight Implementation

As I said, this is not the traditional slide out menu for Windows Phone. If I must confess, I’m not a daily Windows Phone user, yet, but the days where I do use Windows Phone I find the slide out menu is not as prevalent on the platform as it is ingrained on iOS and Android. My slide out implementation is a “For Now” implementation, if the platform idioms change where a true slide out becomes the norm I’ll revisit the topic.

Solution

There are two major elements we need to implement for our Windows Phone solution:
1. The HomeView.xaml to hold our application menu
2. An ApplicationBar to hold our slide out menu icon on each of our root views

HomeView.xaml

The HomeView.xaml holds the list of other Views we could navigate to. For this example I kept things simple, placing the items in a ListBox. Since our HomeViewModel already has

This allows us to figure out which cell the user pressed so we can navigate to the requested page. There are better ways to get this done, however I’m not a Windows Phone 8/MvvmCross master so I settled on this implementation for now.

Show the First View on Application Start

The only item left in our HomeView.xaml.cs is to navigate to the first view we would like our user to see when they launch the app. We accomplish that in the OnNavigatedTo

Here I’ve added a second ApplicationBarIconButton and ApplicationBarMenuItem that would allow us to show another View when pressed to mimic the functionality in the iOS and Android implementations.

Getting ApplicaitonBar.Select.png

ApplicationBar.Select.png is part of the Windows Phone Toolkit, add it to your project via NuGet if you’d like to use the same icon I’m using. Mark the icon as Content to ensure it is include with your application.

ShowMenu()

The ShowMenu() function uses the NavigationService allowing us to navigate back to our menu in the HomeView.

Conclusion

The lack of slide out menus in Windows Phone 8 shouldn’t stop us from creating a Windows Phone 8 app that uses ViewModels that were designed with the slide out menu architecture in mind. With the example code one can now create one .Core MvvmCross project based on slide out menus and use it in Windows Phone 8, iOS, and Android apps.