• Like
Silverlight UK User Group Cross Platform XAML Applications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Silverlight UK User Group Cross Platform XAML Applications

  • 3,414 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,414
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
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
    Colin Eberhardt
    Technical Architect, Scott Logic Ltd.
    w: http://www.scottlogic.co.uk/blog/colin/
    t: @ColinEberhardt
  • 2. Why cross-platform?
    Fundamental framework differences
    Practical approach
    Pitfalls
    Success stories
    Windows Phone 7
    XAML Finance
    Overview
  • 3. Platform Explosion!
    Mosaic
    Chrome
    Windows
    FireFox
    Flash
    Android
    WWW
    WAP
    IE
    Silverlight
    1990
    2000
    2010
    1980
    Desktop
    iPhone
    BlackBerry
    Laptop
    iPad
    Netbook
  • 4. Multi-platform Development
  • 5. XAML Technologies
    OOB
    Silverlight
    Silverlight
    WPF
    XBAP
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. The Problem
    WPF
    The “good” bits
    Silverlight
    WP7
  • 10. 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 …
  • 11. The Differences
    1. ‘Big picture’ differences
    2. Resolution techniques
    3. The unexpected ...
    WPF
    Silverlight
    WP7
  • 12. Controls
  • 13. .NET Framework
  • 14. Framework differences
    WPF
    Triggers (data, property, event)
    Markup Extensions
    Dependency Property meta data
    Add change handlers to existing DPs
    Readonly DPs
    MultiBinding
    RelativeSourceFindAncestor
    ...
  • 15. Resolving the differences
  • 16. Compiler directives
    #if SILVERLIGHT
  • 17. Partial classes
  • 18. Design Patterns
    http://www.scottlogic.co.uk/blog/colin/2010/06/modal-dialogs-in-cross-platform-wpfsilverlight-applications/
  • 19. Portable Class Library
    http://blogs.msdn.com/b/bclteam/archive/2011/01/19/announcing-portable-library-tools-ctp-justin-van-patten.aspx
  • 20. Project Linker
    http://msdn.microsoft.com/en-us/library/ff648745.aspx
  • 21. Common problems
  • 22. DefaultStyleKey
    #if !SILVERLIGHT
    static CustomControl()
      {
       DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl),
    new FrameworkPropertyMetadata(typeof(CustomControl)));
      }
    #endif
     
           
    public CustomControl()
    {
    #if SILVERLIGHT
       DefaultStyleKey = typeof(CustomControl);
    #endif
      }
  • 23. TargetType
    WPF
    <Style x:Key="MyButtonStyle"
    TargetType="{x:Type Button}">
    ...
    </Style>
    • Silverlight
    <Style x:Key="MyButtonStyle"
    TargetType="Button">
    ...
    </Style>
  • 24. 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-control/
  • 25. Missing framework features e.g. MultiBinding
    Avoid them?
    Implement them in Silverlight?
    Or ... create something equivalent?
    http://www.scottlogic.co.uk/blog/colin/2010/05/silverlight-multibinding-solution-for-silverlight-4/
  • 26. 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
    }
  • 27. Image resources
    private static BitmapImageGetBitmapImage(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
    varuri = new Uri(uriBasePart + uriPath, UriKind.RelativeOrAbsolute);
    #if WPF
    bitmap = new BitmapImage(uri);
    if (bitmap.CanFreeze)
    {
    bitmap.Freeze();
    }
    #else
    varstreamInfo = Application.GetResourceStream(uri);
    bitmap = new BitmapImage();
    using (var stream = streamInfo.Stream)
    {
    bitmap.SetSource(stream);
    }
    #endif
    return bitmap;
    }
  • 28.
  • 29. Binding
    WPF default is
    BindingMode.Default
    (i.e. it depends!)
    Silverlight default is
    BindingMode.OneWay
  • 30. Control Lifecycle
    <UserControl Loaded="UserControl_Loaded">
    <my:MyControl Loaded="MyControl_Loaded />
    </UserControl>
    Silverlight
    WPF
  • 31. Linked XAML Resources
    It’s in the wrong place!!!
  • 32. 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
  • 33. Is it worth it?
  • 34. Visiblox Charts
    80k Lines of code
    >90% code re-use
    http://www.visiblox.com/
  • 35. Client project
    WinForms
    App
    HTML / JavaScript
    Webapp
    WPF Component
    Silverlight
    Component
    Common
    codebase
    >90% code re-use
  • 36. Application code re-use
    Very high code re-use for components
    What about applications?
    Lets add WP7 into the mix ...
  • 37. Windows Phone 7
    Silverlight 3 (ish)
  • 38. Same framework
  • 39. Specific Issues
    Navigation
    Tombstoning
    Performance considerations
    http://www.scottlogic.co.uk/blog/colin/2011/05/a-simple-windows-phone-7-mvvm-tombstoning-example/
  • 40. Adapting your application
    Windows Phone 7
    Multi-touch
    Orientation
    Smaller formfactor
    WPF
    Multiple windows
    Silverlight
    Neighbouring web content
  • 41. XAML Finance
  • 42. MVVM WPF
    XAMLFinanceViewModel
    1
    1
    TabbedItems
    FloatingItems
    *
    NamedViewModelBase
    PriceListViewModel
    HeatMapViewModel
    InstrumentViewModel
  • 43. MVVM Silverlight
    XAMLFinanceViewModel
    1
    TabbedItems
    http://silverlight.codeplex.com/workitem/5052
    *
    NamedViewModelBase
    PriceListViewModel
    HeatMapViewModel
    InstrumentViewModel
  • 44. MVVM WP7
    XAMLFinanceViewModel
    NamedViewModelBase
    1
    1
    PriceListViewModel
    HeatMapViewModel
    InstrumentViewModel
  • 45. XAML Finance Statistics
  • 46. Resources
    Guidance on Differences Between WPF and Silverlight
    http://wpfslguidance.codeplex.com/releases/view/30311
    Silverlight and WPF code reuse pitfalls
    http://www.sharpgis.net/post/2009/02/06/Silverlight-and-WPF-code-reuse-pitfalls.aspx
    Writing WPF / Silverlight compatible code
    http://devblog.ailon.org/devblog/post/2009/11/02/Writing-WPFSilverlight-compatible-code-Part-1-The-Big-Picture.aspx
  • 47. Cross Platform XAML Applications
    Colin Eberhardt
    w: http://www.scottlogic.co.uk/blog/colin/
    t: @ColinEberhardt