Rich or Richer: Creating stunning experiences with Silverlight and WPF

1. Rich or Richer:Creating stunning experiences with Silverlight and WPF Katrien De GraeveDeveloper EvangelistMicrosoft Belgium & Luxembourg http://blogs.msdn.com/katriend/

2. Agenda • Silverlight • Intro • Roadmap • Tooling • XAML • Styling • Network and data binding • WPF • Intro • Moving from Silverlight to WPF • Roadmap • Architectural guidance for Silverlight and WPF

3. What is Microsoft Silverlight? Microsoft® Silverlight™ is a cross-browser, cross-platform, and cross-device plug-in for delivering the next generation of media experiences and rich interactive applications for the Web. Cross-Platform Cross-Browser

4. Enterprise/LOB • Business process engineering in Silverlight • Rich controls: data, layout, interactivity • Multi-platform, high-performance email client • Offers differentiation through personalization • K2 • AOL

5. Demo Examples of Silverlight applications http://www.mscui.net

6. Silverlight • Microsoft's platform for rich, highly interactive Web experiences and RIAs • Cross-platform (browsers and OSes) • Windows, Mac OS, Linux ("Moonlight") • Internet Explorer, Firefox, Safari, and more • XAML-based rendering (subset of WPF XAML) • Implemented as browser plug-in • Quick, easy install experience

7. Silverlight Roadmap Oct 2008 TBD Sept 2007 March 2009

8. Tooling Server, Services Desktop XAML Media & RIA Designer Look, behavior, brand,and emotional connection Developer Function, deployment, data,security, operational integrity

9. Architecture

10. Packaging & Architecture • Browser plug-in • Very small download, installs in seconds • Includes video & audio codecs • Typically installed on demand Browser SilverlightPlugin .NET Framework Controls Data Networking Silverlight Base Class Library .NET Core CLR XAML JavaScript API Animation engine Vector based graphics Multimedia support Retained Mode Graphics System

11. Silverlight 2 Project Structure Web project generated by Visual Studio for testing and debugging XAP file containing application assembly, library assemblies, and resources HTML test page Main project XAML file containing global (application) resources and event handlers XAML file containing "page" seen by user

12. XAML

13. Declarative Development - XAML • eXtensible Application Markup Language • WPF, Silverlight, WF etc • In Silverlight – XAML loaded at runtime and merged with supporting “code behind” class • Any thing you can do from XAML you can do from code

14. Shapes • Silverlight supports six shapes Rectangle Ellipse Polygon Line PolyLine Path

15. Transforms TranslateTransform RotateTransform SkewTransform ScaleTransform

16. DEMO

17. Controls: Built-In

18. Controls: Silverlight Toolkit AutoCompleteBox NumericUpDown Viewbox Expander ImplicitStyleManager Charting TreeView DockPanel WrapPanel Label HeaderedContentControl HeaderedItemsControl

19. UI Customization • Silverlight = XAML = UI flexibility • Customize the look of an application without changing it’s behavior • Styling (Styles)Small Visual Changes on an Element (Font, Background Color, etc.) • Skinning (Control Templates)Replacing Element’s entire Visual Tree

20. Customizing Existing Controls Property Bag Styling <Grid> <Grid.Resources> <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="Foreground" Value="Gray"/> <Setter Property="Background" Value="Purple"/> <Setter Property="FontStyle" Value="Italic"/> <Setter Property="FontFamily" Value="Cool.tff#Cool"/> </Style> </Grid.Resources> <Button Style="{StaticResource ButtonStyle}" Content="Button" /> </Grid> Styling Skinning

21. Customizing Existing Controls Skinning <Grid> <Grid.Resources> <!-- Button Template --> <ControlTemplate x:Key="ButtonTemplate" TargetType="Button"> <Grid> <Path Height="120.646" Width="129.736" Stretch="Fill" Data="M204, ... , 155" Stroke="#FFF77474“ Fill="{TemplateBinding Background}"/> <ContentPresenter Foreground="White" ... /> </Grid> </ControlTemplate> </Grid.Resources> <!-- Button --> <Button Content="Button" Template="{StaticResource ButtonTemplate}"> <Button.Background> <RadialGradientBrush> <GradientStop Color="#FFF4A1A1"/> <GradientStop Color="#FFBD2121" Offset="1"/> </RadialGradientBrush> </Button.Background> </Button> </Grid> Styling Skinning

22. Control Templates • Redefine a control’s entire visual tree • Perform extreme customization without changing basic behavior of control • Exposed through control's Template property (inherited from Control base class) • Use {TemplateBinding} to flow property values from control to template • Use ContentPresenter and ItemsPresenter to flow content and items to template

23. Networking and Data

24. Networking • Silverlight 2 has rich networking support • SOAP/XML Web services via WCF proxies • HTTP services (POX, REST, RSS, ATOM) via HttpWebRequest and WebClient classes • Socket support, asset downloads over HTTP, syndication classes, and more • Cross-domain access supported using Flash-compatible or Silverlight XML policy files

25. Data Binding • Two way binding between UI Elements and CLR objects (or collections of objects) <TextBlockText="{Binding Nasdaq.Points, Mode=OneWay}"/> Binding binding = new Binding("Nasdaq.Points"); binding.Mode = BindingMode.OneWay; TextBlocktb = new TextBlock(); tb.SetBinding(TextBlock.TextProperty, binding);

26. Data Binding • Permits properties of one object to be bound to properties of another • Target property must be DependencyProperty • Source property can be any type of property • Source can be a collection if target supports binding to collections • {Binding} markup extension provides declarative support for data binding

27. Silverlight 3 Features • .NET RIA Services • Out of browser support • Multi-touch support • Media • New media support (AAC, H.264 and more) • Raw codec support • Graphics: • Perspective 3D support • GPU hardware acceleration • Pixel APIs • Richer data biding and app development features • Tooling (Blend and Visual Studio) • Rich data binding support in Visual Studio and Blend 3 • Improvements in Blend 3 interface • VS2010 Silverlight designer • Fully functional SL Designer in Visual Web Developer Express (incl data binding support)

28. WPF

29. What is Windows Presentation Foundation? Part of the Microsoft .NET 3.5 Framework Unified approach to UI, Media and Documents Delivers richest possible experiences

30. Richness (3D Visualization) • Iconics, Genesis 64. Automation Software for manufacturing. • Iconics takes advantage of hardware acceleration, 64-bit runtimes, vector graphics, 3D and any other trick in the book to provide lighting fast responsiveness on incredibly insightful visualizations. These features can not be duplicated in a web application.

31. Out of browser: Kiosks. • PetSmart, TagWorks Provides a fun, guided experience for creating a name tag for your pet. Kiosks apps are not easy to manage from the browser and the app needs to communicate with devices (the tag burner). WPF enabled Tagworks to rapidly create a very polished, interactive user experience that even PC novices can walk through in order to create their tags.

32. Visual Studio 2010 built on WPF

33. Visual Studio 2008 Sp1 2008 WPF Release History .NET 3.5 Sp1 Visual Studio 2008 2007 .NET 3.5 Visual Studio 2005 2006 .NET 3.0 Visual Studio .NET 2003 2005 .NET 2.0 Visual Studio .NET 2003 .NET 1.1 2002 .NET 1.0

34. 3.5 SP1 Improvements • Hardware accelerated extensible shader effects • Support for Xlinq binding • D3D2D • Business object validation • Firefox Support for Xbaps • HTTP Cookie Support • Web Service support in XBap • Add-ins • Better Support for IMEs • Better debugging • RichTextBox improvements • Setup Improvements • DirectX interop • Indic language Support • Tear-Free Writeable Bitmap • Web Browser Control • Click-Once Improvements • Faster Cold Start • Working set improvements • Improved perf and behavior in DataSet binding • Improved perf of IEnumerable binding (Linq) • Better Perf in Xml (DOM) binding • Layered Windows perf improvements • Improved Text Realizations • Virtualized TreeView control • Faster fundamentals for DataGrid control • Smoother animations • Improved ListView & ListBox Scroll performance • Container Recycling http://windowsclient.net/wpf/

35. WPF Project Delivery Types XAML Browser Application (XBAP) ClickOnce Application Full Client

36. Why Build A Client?

37. Why Choose WPF? • Extend your online presence with full client application • Enable offline scenarios • Occasionally disconnected applications • Re-use your XAML • Take advantage of a full client • Elevated trust • Hardware acceleration • Taskbar integration

38. From Silverlight to WPF • Designed for high level of compatibility • XAML level compatibility • .NET Framework API level compatibility • Tooling is practically identical • Skillset is a superset of Silverlight knowledge • Scenarios • Silverlight->WPF relatively painless • WPF->Silverlight likely to be more tricky  • Maintaining 2 UI’s – re-use as much as possible whilst accepting differences

39. Demo

40. Architectural Guidance

41. Architectural guidance • Composite Application Guidance for WPF and Silverlight • Composite Application Library • Reference Implementation (Stock Traders application in WPF and Silverlight) • Quick starts • How-Tos • Project Linker (link source code) • Unity Extensions source code • Acceptance testing

43. Stock Trader Sample Application

44. Resources • http://www.codeplex.com/CompositeWPF • http://www.microsoft.com/downloads/details.aspx?FamilyID=fa07e1ce-ca3f-4b9b-a21b-e3fa10d013dd&DisplayLang=en • Visual Basic version of QuickStarts and How-to Topics: http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=537da1cd-43e1-4799-88e7-a1da9166fb46

45. Resources • Silverlight Community Site: http://silverlight.net • WPF Community: http://windowsclient.net • Main Product Site: http://www.microsoft.com/silverlight • MSDN Center: http://msdn.microsoft.com/silverlight • Online Forums: http://silverlight.net/forums • CodeplexSilverlight Toolkit: http://www.codeplex.com/silverlight/ • Top Silverlight Blogs • Tim Heuer: http://timheuer.com/ • Silverlight cream: http://geekswithblogs.net/WynApseTechnicalMusings • Laurence Moroney: http://blogs.msdn.com/webnext

46. Summary • Silverlight • Intro • Roadmap • Tooling • XAML • Styling • Network and data binding • WPF • Intro • Moving from Silverlight to WPF • Roadmap • Architectural guidance for Silverlight and WPF

47. © 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.