Silverlight UK User Group Cross Platform XAML Applications
-
Upload
colin-eberhardt -
Category
Technology
-
view
3.416 -
download
1
description
Transcript of Silverlight UK User Group Cross Platform XAML Applications
![Page 1: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/1.jpg)
Cross Platform XAML Applications
• Colin Eberhardt• Technical Architect, Scott Logic Ltd.• w: http://www.scottlogic.co.uk/blog/colin/• t: @ColinEberhardt
![Page 2: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/2.jpg)
• Why cross-platform?• Fundamental framework differences• Practical approach• Pitfalls • Success stories• Windows Phone 7• XAML Finance
Overview
![Page 3: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/3.jpg)
Platform Explosion!
1990 2000 2010
WWW
WAP
BlackBerry
iPhone
Android
iPad
Flash
IE
Windows
Netbook
Laptop
1980
FireFox
Chrome
Silverlight
Desktop
Mosaic
![Page 4: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/4.jpg)
Multi-platform Development
![Page 5: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/5.jpg)
XAML Technologies
Silverlight
WPF
Silverlight
OOB
XBAP
![Page 6: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/6.jpg)
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
![Page 7: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/7.jpg)
• 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
![Page 8: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/8.jpg)
• 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
![Page 9: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/9.jpg)
The Problem
WPF
SilverlightWP7
The “good” bits
![Page 10: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/10.jpg)
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 …
![Page 11: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/11.jpg)
The Differences
• 1. ‘Big picture’ differences• 2. Resolution techniques• 3. The unexpected ... WPF
SilverlightWP7
![Page 12: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/12.jpg)
Controls
![Page 13: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/13.jpg)
.NET Framework
![Page 14: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/14.jpg)
Framework differences
• WPF• Triggers (data, property, event)• Markup Extensions• Dependency Property meta data• Add change handlers to existing DPs• Readonly DPs• MultiBinding• RelativeSource FindAncestor• ...
![Page 15: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/15.jpg)
Resolving the differences
![Page 16: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/16.jpg)
Compiler directives
• #if SILVERLIGHT
![Page 17: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/17.jpg)
Partial classes
![Page 18: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/18.jpg)
Design Patterns
http://www.scottlogic.co.uk/blog/colin/2010/06/modal-dialogs-in-cross-platform-wpfsilverlight-applications/
![Page 19: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/19.jpg)
Portable Class Library
http://blogs.msdn.com/b/bclteam/archive/2011/01/19/announcing-portable-library-tools-ctp-justin-van-patten.aspx
![Page 20: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/20.jpg)
Project Linker
http://msdn.microsoft.com/en-us/library/ff648745.aspx
![Page 21: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/21.jpg)
Common problems
![Page 22: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/22.jpg)
DefaultStyleKey
#if !SILVERLIGHT static CustomControl() { DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl), new FrameworkPropertyMetadata(typeof(CustomControl))); }#endif public CustomControl() {#if SILVERLIGHT DefaultStyleKey = typeof(CustomControl);#endif }
![Page 23: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/23.jpg)
TargetType
<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}"> ...</Style>
<Style x:Key="MyButtonStyle" TargetType="Button"> ...</Style>
• WPF
• Silverlight
![Page 24: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/24.jpg)
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/
![Page 25: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/25.jpg)
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?
![Page 26: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/26.jpg)
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}
![Page 27: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/27.jpg)
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; }
![Page 28: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/28.jpg)
![Page 29: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/29.jpg)
Binding
• WPF default is• BindingMode.Default• (i.e. it depends!)
• Silverlight default is• BindingMode.OneWay
![Page 30: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/30.jpg)
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
![Page 31: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/31.jpg)
Linked XAML Resources
• It’s in the wrong place!!!
![Page 32: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/32.jpg)
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
![Page 33: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/33.jpg)
Is it worth it?
![Page 35: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/35.jpg)
Client project
Commoncodebase
WPF Component
SilverlightComponent
WinFormsApp
HTML / JavaScriptWebapp
>90% code re-use
![Page 36: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/36.jpg)
Application code re-use
• Very high code re-use for components
• What about applications?
• Lets add WP7 into the mix ...
![Page 37: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/37.jpg)
Windows Phone 7
Silverlight 3 (ish)
![Page 38: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/38.jpg)
Same framework
![Page 39: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/39.jpg)
Specific Issues
• Navigation• Tombstoning• Performance considerations
http://www.scottlogic.co.uk/blog/colin/2011/05/a-simple-windows-phone-7-mvvm-tombstoning-example/
![Page 40: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/40.jpg)
Adapting your application
• Windows Phone 7• Multi-touch• Orientation• Smaller formfactor
• WPF• Multiple windows
• Silverlight• Neighbouring web content
![Page 41: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/41.jpg)
XAML Finance
![Page 42: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/42.jpg)
MVVM WPF
PriceListViewModel
InstrumentViewModel
HeatMapViewModel
XAMLFinanceViewModel
TabbedItems FloatingItems
NamedViewModelBase*
11
![Page 43: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/43.jpg)
MVVM Silverlight
PriceListViewModel
InstrumentViewModel
HeatMapViewModel
XAMLFinanceViewModel
TabbedItems
NamedViewModelBase*
1
http://silverlight.codeplex.com/workitem/5052
![Page 44: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/44.jpg)
MVVM WP7
PriceListViewModel
InstrumentViewModel
HeatMapViewModel
XAMLFinanceViewModel
NamedViewModelBase
1 1
![Page 45: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/45.jpg)
XAML Finance Statistics
![Page 46: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/46.jpg)
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
![Page 47: Silverlight UK User Group Cross Platform XAML Applications](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b411ec4a79599e1f8b458a/html5/thumbnails/47.jpg)
Cross Platform XAML Applications
• Colin Eberhardt• w: http://www.scottlogic.co.uk/blog/colin/• t: @ColinEberhardt