Cross Platform XAML Applications<br />Colin Eberhardt<br />Technical Architect, Scott Logic Ltd.<br />w: http://www.scottl...
Why cross-platform?<br />Fundamental framework differences<br />Practical approach<br />Pitfalls <br />Success stories<br ...
Platform Explosion!<br />Mosaic<br />Chrome<br />Windows<br />FireFox<br />Flash <br />Android<br />WWW<br />WAP <br />IE<...
Multi-platform Development<br />
XAML Technologies<br />OOB<br />Silverlight<br />Silverlight<br />WPF<br />XBAP<br />
Why are they different?<br />Windows Presentation Foundation<br />Released 2006 (Avalon)<br />Part of the .NET framework<b...
WPF<br />3D APIs<br />Stylus support (InkCanvas)<br />More controls<br />Windows OS only<br />Access to ‘old’ .NET APIs<br...
Silverlight v4<br />Dependency Object binding<br />StringFormat<br />Implicit Styling<br />Silverlight v5<br />Implicit Da...
The Problem<br />WPF<br />The “good” bits<br />Silverlight<br />WP7<br />
Practical Steps<br />Different ‘top level’ classes<br />⇒ Share UserControls<br />Silverlight is a subset of WPF<br />⇒ Si...
The Differences<br />1. ‘Big picture’ differences<br />2. Resolution techniques<br />3. The unexpected ...<br />WPF<br />S...
Controls<br />
.NET Framework<br />
Framework differences<br />WPF<br />Triggers (data, property, event)<br />Markup Extensions<br />Dependency Property meta ...
Resolving the differences<br />
Compiler directives<br />#if SILVERLIGHT<br />
Partial classes<br />
Design Patterns<br />http://www.scottlogic.co.uk/blog/colin/2010/06/modal-dialogs-in-cross-platform-wpfsilverlight-applica...
Portable Class Library<br />http://blogs.msdn.com/b/bclteam/archive/2011/01/19/announcing-portable-library-tools-ctp-justi...
Project Linker<br />http://msdn.microsoft.com/en-us/library/ff648745.aspx<br />
Common problems<br />
DefaultStyleKey<br />#if !SILVERLIGHT<br />  static CustomControl()<br />  {<br />     DefaultStyleKeyProperty.OverrideMet...
TargetType<br />WPF<br /><Style x:Key="MyButtonStyle"<br />TargetType="{x:Type Button}"><br />    ...<br /></Style><br /><...
Missing controls<br />Implement your own – following WPF APIs<br />GroupBox<br />Toolbar<br />Multi-level menu<br />Google...
Missing framework features e.g. MultiBinding<br />Avoid them?<br />Implement them in Silverlight?<br />Or ... create somet...
Design-time<br />Design-time data URIs are relative<br />///<summary><br />/// Ensures that the code is being executed in ...
Image resources<br />private static BitmapImageGetBitmapImage(string uriPath)<br /> {<br />BitmapImage bitmap = null;<br /...
Binding <br />WPF default is<br />BindingMode.Default<br />(i.e. it depends!)<br />Silverlight default is<br />BindingMode...
Control Lifecycle<br /><UserControl Loaded="UserControl_Loaded"><br /><my:MyControl Loaded="MyControl_Loaded /><br /></Use...
Linked XAML Resources<br />It’s in the wrong place!!!<br />
Generic.xaml<br /><ResourceDictionary<br />    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"<br />    ...
Is it worth it?<br />
Visiblox Charts<br />80k Lines of code<br />>90% code re-use<br />http://www.visiblox.com/<br />
Client project<br />WinForms<br />App<br />HTML / JavaScript<br />Webapp<br />WPF Component<br />Silverlight<br />Componen...
Application code re-use	<br />Very high code re-use for components<br />What about applications?<br />Lets add WP7 into th...
Windows Phone 7<br />Silverlight 3 (ish)<br />
Same framework<br />
Specific Issues<br />Navigation<br />Tombstoning<br />Performance considerations<br />http://www.scottlogic.co.uk/blog/col...
Adapting your application<br />Windows Phone 7<br />Multi-touch<br />Orientation<br />Smaller formfactor<br />WPF<br />Mul...
XAML Finance<br />
MVVM WPF<br />XAMLFinanceViewModel<br />1<br />1<br />TabbedItems<br />FloatingItems<br />*<br />NamedViewModelBase<br />P...
MVVM Silverlight<br />XAMLFinanceViewModel<br />1<br />TabbedItems<br />http://silverlight.codeplex.com/workitem/5052<br /...
MVVM WP7<br />XAMLFinanceViewModel<br />NamedViewModelBase<br />1<br />1<br />PriceListViewModel<br />HeatMapViewModel<br ...
XAML Finance Statistics<br />
Resources<br />Guidance on Differences Between WPF and Silverlight<br />http://wpfslguidance.codeplex.com/releases/view/30...
Cross Platform XAML Applications<br />Colin Eberhardt<br />w: http://www.scottlogic.co.uk/blog/colin/<br />t: @ColinEberha...
Upcoming SlideShare
Loading in …5
×

Silverlight UK User Group Cross Platform XAML Applications

5,601 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,601
On SlideShare
0
From Embeds
0
Number of Embeds
2,501
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Why cross platform?A few years back software was constrained to the desktopIncreased processor power, battery life, miniaturisation, connectivity =&gt; platform explosionGreater user expectations
  • We’ll assume that you have determined which platforms to target, and you are in a multi-platform contextThe problem:Different platforms require different technologies, different developer skills, and often different teams.Need to coordinate features between teamsMobile space is even worse!Developing for multiple platforms is costlyI have done multi-platform development the ‘traditional’ wayI have also written cross-platform applications / components
  • Which platform can each XAML technology address?Notice the phone has become a WP7 device!WPF can be used on desktop and in the browser as an XBAPSilverlight can be used OOB on desktop
  • Windows Phone 7 SL3 =&gt; SL4
  • No ‘official’ documentation of how to achieve this
  • WPF has Windows, Silverlight has Pages
  • First we’ll look at the big-picture differences, stuff that is in WPF but not the otherThen we’ll look at the unexpected, the gotchas!
  • Notable: GroupBox, Adorned Layer (Popup), ContextMenu, ListView, Toolbar, VirtualizingStackPanel
  • Silverlight relies on a TypeConverterYou cannot use a type as a property of your own control / object
  • Often are not implemented with cross-platform usage in mind
  • Typically you would simply avoid them.Framework APIs are often not extensible.Create equivalent functionation
  • Things that are not directly documented
  • Silverlight 3 (ish)More of the same
  • Controls adapt to their environment
  • Limits the sharing of UI
  • Silverlight UK User Group Cross Platform XAML Applications

    1. 1. Cross Platform XAML Applications<br />Colin Eberhardt<br />Technical Architect, Scott Logic Ltd.<br />w: http://www.scottlogic.co.uk/blog/colin/<br />t: @ColinEberhardt<br />
    2. 2. Why cross-platform?<br />Fundamental framework differences<br />Practical approach<br />Pitfalls <br />Success stories<br />Windows Phone 7<br />XAML Finance<br />Overview<br />
    3. 3. Platform Explosion!<br />Mosaic<br />Chrome<br />Windows<br />FireFox<br />Flash <br />Android<br />WWW<br />WAP <br />IE<br />Silverlight<br />1990<br />2000<br />2010<br />1980<br />Desktop<br />iPhone<br />BlackBerry <br />Laptop <br />iPad<br />Netbook<br />
    4. 4. Multi-platform Development<br />
    5. 5. XAML Technologies<br />OOB<br />Silverlight<br />Silverlight<br />WPF<br />XBAP<br />
    6. 6. Why are they different?<br />Windows Presentation Foundation<br />Released 2006 (Avalon)<br />Part of the .NET framework<br />Runs on Windows machines only<br />Silverlight<br />Released in 2008 (WPF/E)<br />Silverlight is size limited<br />Silverlight ~ 5MBytes<br />WPF ~ 75 Mbytes<br />Runs within the browser<br />Available for Macs<br />
    7. 7. WPF<br />3D APIs<br />Stylus support (InkCanvas)<br />More controls<br />Windows OS only<br />Access to ‘old’ .NET APIs<br />Silverlight<br />Windows and MAC OS<br />Browser ‘sandbox’<br />Browser APIs, JavaScript etc …<br />Out of browser support<br />Framework Differences<br />
    8. 8. Silverlight v4<br />Dependency Object binding<br />StringFormat<br />Implicit Styling<br />Silverlight v5<br />Implicit DataTemplates<br />MarkupExtensions<br />DataContextChanged event<br />Multiple mouse clicks!<br />WPF v4<br />VisualStateManager<br />Framework Convergence<br />WPF<br />Silverlight<br />
    9. 9. The Problem<br />WPF<br />The “good” bits<br />Silverlight<br />WP7<br />
    10. 10. Practical Steps<br />Different ‘top level’ classes<br />⇒ Share UserControls<br />Silverlight is a subset of WPF<br />⇒ Silverlight project is the ‘primary’ project<br />⇒ WPF files “Add As Link”<br />Let’s give it a go …<br />
    11. 11. The Differences<br />1. ‘Big picture’ differences<br />2. Resolution techniques<br />3. The unexpected ...<br />WPF<br />Silverlight<br />WP7<br />
    12. 12. Controls<br />
    13. 13. .NET Framework<br />
    14. 14. Framework differences<br />WPF<br />Triggers (data, property, event)<br />Markup Extensions<br />Dependency Property meta data<br />Add change handlers to existing DPs<br />Readonly DPs<br />MultiBinding<br />RelativeSourceFindAncestor<br />...<br />
    15. 15. Resolving the differences<br />
    16. 16. Compiler directives<br />#if SILVERLIGHT<br />
    17. 17. Partial classes<br />
    18. 18. Design Patterns<br />http://www.scottlogic.co.uk/blog/colin/2010/06/modal-dialogs-in-cross-platform-wpfsilverlight-applications/<br />
    19. 19. Portable Class Library<br />http://blogs.msdn.com/b/bclteam/archive/2011/01/19/announcing-portable-library-tools-ctp-justin-van-patten.aspx<br />
    20. 20. Project Linker<br />http://msdn.microsoft.com/en-us/library/ff648745.aspx<br />
    21. 21. Common problems<br />
    22. 22. DefaultStyleKey<br />#if !SILVERLIGHT<br /> static CustomControl()<br />  {<br />   DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl),<br /> new FrameworkPropertyMetadata(typeof(CustomControl)));<br />  }<br />#endif<br /> <br />       <br /> public CustomControl()<br /> {<br />#if SILVERLIGHT<br />   DefaultStyleKey = typeof(CustomControl);<br />#endif<br />  }<br />
    23. 23. TargetType<br />WPF<br /><Style x:Key="MyButtonStyle"<br />TargetType="{x:Type Button}"><br /> ...<br /></Style><br /><ul><li>Silverlight</li></ul><Style x:Key="MyButtonStyle"<br />TargetType="Button"><br /> ...<br /></Style><br />
    24. 24. Missing controls<br />Implement your own – following WPF APIs<br />GroupBox<br />Toolbar<br />Multi-level menu<br />Google it ...<br />Multi-level menu<br />http://sl4popupmenu.codeplex.com/<br />GroupBox courtesy of Tim Greenfield<br />http://programmerpayback.com/2008/11/26/silverlight-groupbox-control/<br />
    25. 25. Missing framework features e.g. MultiBinding<br />Avoid them?<br />Implement them in Silverlight?<br />Or ... create something equivalent?<br />http://www.scottlogic.co.uk/blog/colin/2010/05/silverlight-multibinding-solution-for-silverlight-4/<br />
    26. 26. Design-time<br />Design-time data URIs are relative<br />///<summary><br />/// Ensures that the code is being executed in the design time context<br />///</summary><br />public static void EnforceDesignTimeOnly(string message)<br />{<br />#if SILVERLIGHT<br />Debug.Assert(!HtmlPage.IsEnabled, message);<br />#else<br />Debug.Assert(DesignerProperties.GetIsInDesignMode(<br />new DependencyObject()),<br /> message);<br />#endif<br />}<br />
    27. 27. Image resources<br />private static BitmapImageGetBitmapImage(string uriPath)<br /> {<br />BitmapImage bitmap = null;<br />#if WPF<br /> string uriBasePart = "pack://application:,,,/MyWPFAssembly;component/"<br />#else<br /> string uriBasePart = "MySilverlightAssembly;component/";<br />#endif<br />// for both WPF and Silverlight construct a URI that includes the name of the assembly which<br /> // contains the supplied resource<br />varuri = new Uri(uriBasePart + uriPath, UriKind.RelativeOrAbsolute);<br />#if WPF<br /> bitmap = new BitmapImage(uri);<br /> if (bitmap.CanFreeze)<br /> {<br />bitmap.Freeze();<br /> }<br />#else<br />varstreamInfo = Application.GetResourceStream(uri);<br /> bitmap = new BitmapImage();<br /> using (var stream = streamInfo.Stream)<br /> {<br />bitmap.SetSource(stream);<br /> }<br />#endif<br /> return bitmap;<br /> }<br />
    28. 28.
    29. 29. Binding <br />WPF default is<br />BindingMode.Default<br />(i.e. it depends!)<br />Silverlight default is<br />BindingMode.OneWay<br />
    30. 30. Control Lifecycle<br /><UserControl Loaded="UserControl_Loaded"><br /><my:MyControl Loaded="MyControl_Loaded /><br /></UserControl><br />Silverlight<br />WPF<br />
    31. 31. Linked XAML Resources<br />It’s in the wrong place!!!<br />
    32. 32. Generic.xaml<br /><ResourceDictionary<br />   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"<br />    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><br /> <ResourceDictionary.MergedDictionaries>         <br /><ResourceDictionary<br />Source="/MySilverlightApplication;component/generic.xaml"/>     <br /></ResourceDictionary.MergedDictionaries><br /></ResourceDictionary><br />http://devblog.ailon.org/devblog/post/2010/01/13/Writing-WPFSilverlight-compatible-code-Part-6-Adding-XAML-files-as-links.aspx<br />
    33. 33. Is it worth it?<br />
    34. 34. Visiblox Charts<br />80k Lines of code<br />>90% code re-use<br />http://www.visiblox.com/<br />
    35. 35. Client project<br />WinForms<br />App<br />HTML / JavaScript<br />Webapp<br />WPF Component<br />Silverlight<br />Component<br />Common<br />codebase<br />>90% code re-use<br />
    36. 36. Application code re-use <br />Very high code re-use for components<br />What about applications?<br />Lets add WP7 into the mix ...<br />
    37. 37. Windows Phone 7<br />Silverlight 3 (ish)<br />
    38. 38. Same framework<br />
    39. 39. Specific Issues<br />Navigation<br />Tombstoning<br />Performance considerations<br />http://www.scottlogic.co.uk/blog/colin/2011/05/a-simple-windows-phone-7-mvvm-tombstoning-example/<br />
    40. 40. Adapting your application<br />Windows Phone 7<br />Multi-touch<br />Orientation<br />Smaller formfactor<br />WPF<br />Multiple windows <br />Silverlight<br />Neighbouring web content<br />
    41. 41. XAML Finance<br />
    42. 42. MVVM WPF<br />XAMLFinanceViewModel<br />1<br />1<br />TabbedItems<br />FloatingItems<br />*<br />NamedViewModelBase<br />PriceListViewModel<br />HeatMapViewModel<br />InstrumentViewModel<br />
    43. 43. MVVM Silverlight<br />XAMLFinanceViewModel<br />1<br />TabbedItems<br />http://silverlight.codeplex.com/workitem/5052<br />*<br />NamedViewModelBase<br />PriceListViewModel<br />HeatMapViewModel<br />InstrumentViewModel<br />
    44. 44. MVVM WP7<br />XAMLFinanceViewModel<br />NamedViewModelBase<br />1<br />1<br />PriceListViewModel<br />HeatMapViewModel<br />InstrumentViewModel<br />
    45. 45. XAML Finance Statistics<br />
    46. 46. Resources<br />Guidance on Differences Between WPF and Silverlight<br />http://wpfslguidance.codeplex.com/releases/view/30311<br />Silverlight and WPF code reuse pitfalls<br />http://www.sharpgis.net/post/2009/02/06/Silverlight-and-WPF-code-reuse-pitfalls.aspx<br />Writing WPF / Silverlight compatible code<br />http://devblog.ailon.org/devblog/post/2009/11/02/Writing-WPFSilverlight-compatible-code-Part-1-The-Big-Picture.aspx<br />
    47. 47. Cross Platform XAML Applications<br />Colin Eberhardt<br />w: http://www.scottlogic.co.uk/blog/colin/<br />t: @ColinEberhardt<br />

    ×