This week's feature article is written by Colin Eberhardt and tackles the issue of sharing code between Silverlight, WPF and Silverlight for Windows Phone. It’s an issue that often comes up in conversation and it’s great to see Colin describe a practical example and demonstrate it’s quite possible to achieve a good degree of efficiency, and thus cost-saving, with a bit of thought. Over to Colin…

“Earlier this year, Microsoft released its latest Smartphone OS, Windows Phone 7 (WP7), with handsets being made available globally by late 2010. Developers now have the opportunity to use their Silverlight skills on the mobile platform as well as the web. Furthermore, Silverlight is a subset of WPF, the latest desktop application development framework, allowing skills transfer from desktop, web to mobile, with development for all three sharing the same languages, tools (Visual Studio and Expression Blend), and frameworks.

Cross Platform XAML Applications

Whilst the possibility of transferring skills between the three platforms is an exciting prospect in itself, what I think is more interesting is the possibility of sharing the same codebase.

Silverlight is a stripped down version of WPF, with a few added extras which relate to the web context it lives within. WP7 uses a further stripped down version of the web-based Silverlight, again with a few extras relating to the mobile platform (touch and gesture support for example). What this means in practical terms is that in order to maximise the shared codebase, you need to target the shared parts of each API as much as possible.

Venn Diagram

WPF, Silverlight and WP7 assemblies are not interchangeable; this means that you have to re-build the same code for each target. In practical terms this is easily achieved by creating three separate projects in Visual Studio (one for each framework) and ‘linking’ the shared files. Within Visual Studio, if you add files to the project via “Add Existing Item”, and select the “Add As Link” option you can work on the same file from multiple projects. Based on the fact that Silverlight is a subset of WPF it does make sense for your Silverlight project to be your primary focus for development, although it is worth switching between them often in order to ensure compatibility.

With a little organisation, it is a straightforward process to compile the same codebase to run on all three platforms. However, there is an additional challenge, the different form factors of each platform mean that to make best use of each, the application must be suitably tailored. For example, a docking layout manager provides a flexible workspace for desktop applications, but would be quite impractical on a mobile device where screen dimensions are much smaller.

Fortunately the WPF/Silverlight framework provides a good head start in this direction. All three share a common set of controls which perform the same functions, however their visual appearance differ based on their context. The controls differ markedly in the WP7 environment, where buttons and other controls must have a large surface for touch interaction with the fingertips, and scrolling is performed via swipe gestures.

The visual difference between the controls when rendered within each of the platforms is made possible by the powerful styling and templating features of the WPF/Silverlight framework. These styles are tailored to provide a consistent look and feel for each platform, for example the Windows Phone 7 interface follows the Metro Design Language. However, if you do want a more control over the style for your own application, the same mechanisms can be used to achieve this.

The same application UI rendered by WPF, Silverlight and WP7

The same application UI rendered by WPF, Silverlight and WP7

With the use of UI design patterns, such as Model-View-ViewModel, it is possible to selectively share UI code, whilst permitting platform specific customization. Other traditional design patterns such as the Adapter pattern can be used to resolve platforms differences such as showing modal dialogs. Platform specific logic can be added in the form of additional classes in order to supplement the shared codebase, also other techniques such as conditional compilation or partial classes can be used.

To demonstrate the feasibility of this approach, Scott Logic has developed XAML Finance, a cross-platform application for exploring FTSE stocks. This application has a shared 75% codebase between the three platforms, whilst still being tailored to the form factor of each platform.

Same application, three different platforms

From a business perspective cross platform development simplifies team structures and reduces development costs, as detailed in my recently published white paper.

Colin

Colin Eberhardt

Colin works as a Technical Architect for Scott Logic Ltd

Read Colin’s blog