Silverlight UK User Group Cross Platform XAML Applications

  • View
    3.413

  • Download
    1

Embed Size (px)

DESCRIPTION

 

Text of Silverlight UK User Group Cross Platform XAML Applications

  • 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
Lets 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
TargetType="{x:Type Button}">
...

  • Silverlight

TargetType="Button">
...

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
///
/// Ensures that the code is being executed in the design time context
///
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

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

Source="/MySilverlightApplication;component/generic.xaml"/>


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