The Hubble Space Telescope – Porting to Windows Phone 7

For my next exploration of the MVC design pattern, I wanted to convert my “Hubble Space Telescope” application from a desktop WPF app to Windows Phone 7. This can help demonstrate the flexibility MVC provides with such a scenario.

You can see the previous article here: http://www.hitcents.com/blog/post/developing-iphone-%E2%80%93-part-4-controlling-hubble-space-telescope-mvc

By using the MVC pattern, we only have to rewrite a few portions of the application to get it running on a Windows Phone. Luckily, our Model and Controller layers will remain completely untouched when porting from WPF on the desktop to WP7. My original port to the iPhone was much more of a hassle, since Apple’s framework is drastically different from WPF.

Let’s break down our changes for WP7:

Model, or business layer – completely portable to WP7 with no changes
Controller, or intermediary later, between our View and Model – completely portable to WP7 as well
View, or UI layer – most of our changes will be here. Luckily, I was able to copy and paste much of the View, as the XAML was fairly close to what we were using for WPF.
Framework – this is a small set of classes I use to setup the plumbing for MVC in WPF. We have to add some classes here to account for functionality missing in WP7, since it is a subset of the full .Net framework.

What’s missing in WP7?

After setting up my projects for WP7, for the most part I could directly copy the XAML from WPF. Here are the missing pieces I had to account for:

No ListView class – I merely switched to ListBox
No BooleanToVisibilityConverter – I quickly rolled my own
No Command property on Button – This one took some more thought

Turns out Silverlight (version 3 and below) and WP7 both are missing much of the ICommand functionality that is so great in WPF. To alleviate this, I had to reference System.Windows.Interactivity and use a couple helper classes from a codeplex project here: http://expressionblend.codeplex.com

Here is a quick code example of making commands work in WP7:

            <!--Refresh button-->
            <!--No ICommand in WP7!  We'll have to use System.Windows.Interactivity...-->
            <Button HorizontalAlignment="Left" Content="Refresh">
                <Interactivity:Interaction.Triggers>            
                    <Interactivity:EventTrigger EventName="Click">
                        <framework:InvokeDataCommand Command="{Binding Refresh}" />
                    </Interactivity:EventTrigger>
                </Interactivity:Interaction.Triggers>
            </Button>

So what’s left? A first compile of the app shows that we are missing some Dispatcher implementation I used in my Execute class. This was just a simple class to handle marshalling changes to the UI thread.

Here is my updated Execute class that works on WP7:

/// <summary>
/// Quick helper class to throw stuff on the UI thread
/// </summary>
publicstaticclass Execute
{
#if WINDOWS_PHONE
publicstatic Dispatcher Dispatcher
{
            get;
            set;
}
#endif        /// <summary>
        /// Raises an action on the UI thread if needed
        /// </summary>
        /// <param name="action">Action to invoke</param>
        public static void OnUIThread(Action action)
        {
#if WINDOWS_PHONE
            var dispatcher = Dispatcher;
#else
            var dispatcher = Application.Current.Dispatcher;
#endif
            if (dispatcher.CheckAccess())
            {
                action();
            }
            else
            {
                dispatcher.BeginInvoke(action);
            }
        }
    }

Note: you of course have to set the Dispatcher property somewhere; I did so in my MainView.

So far, it looks to me like Microsoft has done a great job in designing the SDK and development tools for Windows Phone 7. It only took me around 30 minutes to port this small app and work out the details, which would have been comparable to porting the application to Silverlight.

If you are interested in the source, checkout the latest at our codeplex project for our blog here.

Next time I'm going to look at using some MVVM frameworks on this application, such as Caliburn and possibly MVVM Light.