Your SlideShare is downloading. ×
0
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Silverlight UK User Group Cross Platform XAML Applications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Silverlight UK User Group Cross Platform XAML Applications

4,407

Published on

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

No Downloads
Views
Total Views
4,407
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Why cross platform?A few years back software was constrained to the desktopIncreased processor power, battery life, miniaturisation, connectivity => 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 => 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
  • Transcript

    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. 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. 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. Multi-platform Development<br />
    5. XAML Technologies<br />OOB<br />Silverlight<br />Silverlight<br />WPF<br />XBAP<br />
    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. 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. 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. The Problem<br />WPF<br />The “good” bits<br />Silverlight<br />WP7<br />
    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. The Differences<br />1. ‘Big picture’ differences<br />2. Resolution techniques<br />3. The unexpected ...<br />WPF<br />Silverlight<br />WP7<br />
    12. Controls<br />
    13. .NET Framework<br />
    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. Resolving the differences<br />
    16. Compiler directives<br />#if SILVERLIGHT<br />
    17. Partial classes<br />
    18. Design Patterns<br />http://www.scottlogic.co.uk/blog/colin/2010/06/modal-dialogs-in-cross-platform-wpfsilverlight-applications/<br />
    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. Project Linker<br />http://msdn.microsoft.com/en-us/library/ff648745.aspx<br />
    21. Common problems<br />
    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. 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. 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. 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. 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. 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. Binding <br />WPF default is<br />BindingMode.Default<br />(i.e. it depends!)<br />Silverlight default is<br />BindingMode.OneWay<br />
    29. Control Lifecycle<br /><UserControl Loaded="UserControl_Loaded"><br /><my:MyControl Loaded="MyControl_Loaded /><br /></UserControl><br />Silverlight<br />WPF<br />
    30. Linked XAML Resources<br />It’s in the wrong place!!!<br />
    31. 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 />
    32. Is it worth it?<br />
    33. Visiblox Charts<br />80k Lines of code<br />>90% code re-use<br />http://www.visiblox.com/<br />
    34. 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 />
    35. Application code re-use <br />Very high code re-use for components<br />What about applications?<br />Lets add WP7 into the mix ...<br />
    36. Windows Phone 7<br />Silverlight 3 (ish)<br />
    37. Same framework<br />
    38. 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 />
    39. 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 />
    40. XAML Finance<br />
    41. MVVM WPF<br />XAMLFinanceViewModel<br />1<br />1<br />TabbedItems<br />FloatingItems<br />*<br />NamedViewModelBase<br />PriceListViewModel<br />HeatMapViewModel<br />InstrumentViewModel<br />
    42. 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 />
    43. MVVM WP7<br />XAMLFinanceViewModel<br />NamedViewModelBase<br />1<br />1<br />PriceListViewModel<br />HeatMapViewModel<br />InstrumentViewModel<br />
    44. XAML Finance Statistics<br />
    45. 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 />
    46. Cross Platform XAML Applications<br />Colin Eberhardt<br />w: http://www.scottlogic.co.uk/blog/colin/<br />t: @ColinEberhardt<br />

    ×