Cross Platform XAML Applications

• Colin Eberhardt• Technical Architect, Scott Logic Ltd.• w: http://www.scottlogic.co.uk/blog/colin/• t: @ColinEberhardt

• Why cross-platform?• Fundamental framework differences• Practical approach• Pitfalls • Success stories• Windows Phone 7• XAML Finance

Overview

Platform Explosion!

1990 2000 2010

WWW

WAP

BlackBerry

iPhone

Android

iPad

Flash

IE

Windows

Netbook

Laptop

1980

FireFox

Chrome

Silverlight

Desktop

Mosaic

Multi-platform Development

XAML Technologies

Silverlight

WPF

Silverlight

OOB

XBAP

Why are they different?

• Windows Presentation Foundation• Released 2006 (Avalon)• Part of the .NET framework• Runs on Windows machines only

• Silverlight• Released in 2008 (WPF/E)• Silverlight is size limited• Silverlight ~ 5MBytes• WPF ~ 75 Mbytes

• Runs within the browser• Available for Macs

• WPF• 3D APIs• Stylus support (InkCanvas)• More controls• Windows OS only• Access to ‘old’ .NET APIs

• Silverlight• Windows and MAC OS• Browser ‘sandbox’• Browser APIs, JavaScript etc …• Out of browser support

Framework Differences

• Silverlight v4• Dependency Object binding• StringFormat• Implicit Styling

• Silverlight v5• Implicit DataTemplates• MarkupExtensions• DataContextChanged event• Multiple mouse clicks!

• WPF v4• VisualStateManager

Framework Convergence

WPF

Silverlight

The Problem

WPF

SilverlightWP7

The “good” bits

Practical Steps

• Different ‘top level’ classes• ⇒ Share UserControls

• Silverlight is a subset of WPF• ⇒ Silverlight project is the ‘primary’ project• ⇒ WPF files “Add As Link”

• Let’s give it a go …

The Differences

• 1. ‘Big picture’ differences• 2. Resolution techniques• 3. The unexpected ... WPF

SilverlightWP7

Controls

.NET Framework

Framework differences

• WPF• Triggers (data, property, event)• Markup Extensions• Dependency Property meta data• Add change handlers to existing DPs• Readonly DPs• MultiBinding• RelativeSource FindAncestor• ...

Resolving the differences

Compiler directives

• #if SILVERLIGHT

Partial classes

Design Patterns

http://www.scottlogic.co.uk/blog/colin/2010/06/modal-dialogs-in-cross-platform-wpfsilverlight-applications/

Portable Class Library

http://blogs.msdn.com/b/bclteam/archive/2011/01/19/announcing-portable-library-tools-ctp-justin-van-patten.aspx

Project Linker

http://msdn.microsoft.com/en-us/library/ff648745.aspx

Common problems

DefaultStyleKey

#if !SILVERLIGHT static CustomControl()  {   DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl), new FrameworkPropertyMetadata(typeof(CustomControl)));  }#endif         public CustomControl() {#if SILVERLIGHT   DefaultStyleKey = typeof(CustomControl);#endif  }

TargetType

<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}"> ...</Style>

<Style x:Key="MyButtonStyle" TargetType="Button"> ...</Style>

• WPF

• Silverlight

Missing controls

• Implement your own – following WPF APIs• GroupBox• Toolbar• Multi-level menu

• Google it ...• Multi-level menu• http://sl4popupmenu.codeplex.com/

• GroupBox courtesy of Tim Greenfield• http://programmerpayback.com/2008/11/26/silverlight-groupbox-contro

l/

Missing framework features e.g. MultiBinding

http://www.scottlogic.co.uk/blog/colin/2010/05/silverlight-multibinding-solution-for-silverlight-4/

• Avoid them?• Implement them in Silverlight?• Or ... create something equivalent?

Design-time

• Design-time data URIs are relative

/// <summary>/// Ensures that the code is being executed in the design time context/// </summary>public static void EnforceDesignTimeOnly(string message){#if SILVERLIGHT Debug.Assert(!HtmlPage.IsEnabled, message);#else Debug.Assert(DesignerProperties.GetIsInDesignMode( new DependencyObject()), message);#endif}

Image resources private static BitmapImage GetBitmapImage(string uriPath) { BitmapImage bitmap = null;

#if WPF string uriBasePart = "pack://application:,,,/MyWPFAssembly;component/"#else string uriBasePart = "MySilverlightAssembly;component/";#endif

// for both WPF and Silverlight construct a URI that includes the name of the assembly which // contains the supplied resource var uri = new Uri(uriBasePart + uriPath, UriKind.RelativeOrAbsolute);

#if WPF bitmap = new BitmapImage(uri); if (bitmap.CanFreeze) { bitmap.Freeze(); }#else var streamInfo = Application.GetResourceStream(uri); bitmap = new BitmapImage(); using (var stream = streamInfo.Stream) { bitmap.SetSource(stream); }#endif

return bitmap; }

Binding

• WPF default is• BindingMode.Default• (i.e. it depends!)

• Silverlight default is• BindingMode.OneWay

UserControl Constructor

MyControl Constructor

MyControl Loaded

UserControl Loaded

MyControl OnApplyTemplate

UserControl Constructor

MyControl Constructor

MyControl OnApplyTemplate

MyControl Loaded

UserControl Loaded

Control Lifecycle

<UserControl Loaded="UserControl_Loaded"> <my:MyControl Loaded="MyControl_Loaded /></UserControl>

Silverlight WPF

Linked XAML Resources

• It’s in the wrong place!!!

Generic.xaml

<ResourceDictionary   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary.MergedDictionaries>          <ResourceDictionary Source="/MySilverlightApplication;component/generic.xaml"/>      </ResourceDictionary.MergedDictionaries></ResourceDictionary>

http://devblog.ailon.org/devblog/post/2010/01/13/Writing-WPFSilverlight-compatible-code-Part-6-Adding-XAML-files-as-links.aspx

Is it worth it?

Visiblox Charts

http://www.visiblox.com/80k Lines of code>90% code re-use

Client project

Commoncodebase

WPF Component

SilverlightComponent

WinFormsApp

HTML / JavaScriptWebapp

>90% code re-use

Application code re-use

• Very high code re-use for components

• What about applications?

• Lets add WP7 into the mix ...

Windows Phone 7

Silverlight 3 (ish)

Same framework

Specific Issues

• Navigation• Tombstoning• Performance considerations

http://www.scottlogic.co.uk/blog/colin/2011/05/a-simple-windows-phone-7-mvvm-tombstoning-example/

Adapting your application

• Windows Phone 7• Multi-touch• Orientation• Smaller formfactor

• WPF• Multiple windows

• Silverlight• Neighbouring web content

XAML Finance

MVVM WPF

PriceListViewModel

InstrumentViewModel

HeatMapViewModel

XAMLFinanceViewModel

TabbedItems FloatingItems

NamedViewModelBase*

11

MVVM Silverlight

PriceListViewModel

InstrumentViewModel

HeatMapViewModel

XAMLFinanceViewModel

TabbedItems

NamedViewModelBase*

1

http://silverlight.codeplex.com/workitem/5052

MVVM WP7

PriceListViewModel

InstrumentViewModel

HeatMapViewModel

XAMLFinanceViewModel

NamedViewModelBase

1 1

XAML Finance Statistics

Resources

Guidance on Differences Between WPF and Silverlighthttp://wpfslguidance.codeplex.com/releases/view/30311

Silverlight and WPF code reuse pitfallshttp://www.sharpgis.net/post/2009/02/06/Silverlight-and-WPF-code-reuse-pitfalls.aspx

Writing WPF / Silverlight compatible codehttp://devblog.ailon.org/devblog/post/2009/11/02/Writing-WPFSilverlight-compatible-code-Part-1-The-Big-Picture.aspx

Cross Platform XAML Applications

• Colin Eberhardt• w: http://www.scottlogic.co.uk/blog/colin/• t: @ColinEberhardt