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?
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