Windows Phone 7 & Windows 8 Metro Apps

Given the differences between the Silverlight on Windows Phone 7 and XAML for WinRT on Windows 8, I thought it will be interesting to see what the differences are between these two platforms.

A few days back I wrote a quick and dirty application for checking weather forecasts for a given location in Windows Phone 7. It is a very simple application, however I was curious if I can use the same code base for WinRT metro apps on Windows 8.

Namespace and Base Page

The Windows Phone 7 controls reside in the namespace ‘Microsoft.Phone.Controls’ and the controls for Windows 8 XAML metro apps reside in ‘Windows.UI.Xaml.Controls’.

The pages for Windows Phone 7 pages derive from PhoneApplicationPage, whereas the metro apps derive from Windows.UI.Xaml.Controls.Page.

XAML

The user interface controls for both Windows Phone 7 and Windows 8 metro apps are implemented in different namespaces, however they are very similar and are mostly reusable.

The same XAML may conform for both platforms, however Windows 8 are slated to be used on screens that are bigger like a tablet or a PC (and sometimes much bigger like a TV screen). So the applications may be better off if the user interface design for metro apps can utilize that larger real estate.

My sample application for Windows Phone 7 was using the ‘WebBrowser’ control, but I couldn’t find this control in the metro apps. However, a very similar control called ‘WebView’ is present in Windows.UI.Xaml.Controls namespace.

There are some minor differences in the implementation, but I was able to replace the WebBrowser control with the WebView control without much effort.

win8_vs2011_weatherwatch_designer

Windows 8 Target Screen Sizes

win8_vs2011_toolbox_platform_screesizes

Visual Studio 11 for Windows 8 also allows  designing applications for different target sizes, as the target can differ from a wide variety of screen sizes.

1366×768 is the minimum resolution required for all metro apps. The designer having this ability to set various screen sizes is a great boon for the developers in knowing before hand how the XAML markup will render in the supported screen sizes.

 

The designer also supports setting the user interface as portrait mode.win8_vs2011_weatherwatch_designer_portrait

WebClient API is not supported

The sample application in Windows Phone 7 used WebClient to pull weather data from yahoo, but WebClient is not supported in WinRT. However, HTTPWebRequest class is supported in WinRT. In fact, this is the only web request API supported in WinRT. HTTPWebRequest is also available in Windows Phone 7. See my previous post about WebClient vs HTTPWebRequest in Windows Phone 7 here.

The final application on WinRT

win8_weather_watch

With the very limited functionality I was testing, most of the porting was smooth, except for the surprise that WebClient was not supported.

As for user interface, even though most of the XAML could be reused, I think it is to the benefit of the application that it be designed specifically for the screen sizes they are targeted for.

So, can applications have a common code base for both the platforms? If the applications are layered properly using the MVVM (Model-View-View Model) pattern, the ‘model’ and ‘view model’ can have a common code base, whereas the ‘view’ can benefit from being separate at least for some of the applications.

Windows Phone 7: Navigation

Web developers will find themselves in familiar territory with the navigation in Windows Phone 7.

NavigationService Class

Navigate to another page:

Navigate to another page (with parameters):

NavigationContext Class

If a parameter was passed to the destination page using query string, NavigationContext class allows to read the query string as follows

Navigation History

Navigation history is exposed as a read-only enumeration through the property called NavigationServices.BackStack,

There are additional methods exposed for going back and forward one step at a time. It is a good practice to check for the CanGoBack and CanGoForward property before calling the navigation methods to make sure there is more in the history to go back or forward.