1. Rich or Richer: Creating stunning experiences with Silverlight and WPF Katrien De Graeve Developer Evangelist Microsoft 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. 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. What is Microsoft Silverlight? Cross-Browser Cross-Platform

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 Silverlight 1 Silverlight 2 RTM Silverlight 3 Beta Silverlight for Mobile Sept 2007 Oct 2008 TBD March 2009

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

9. Architecture

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

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

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 RectangleEllipsePolygon LinePolyLinePath

15. Transforms TranslateTransformRotateTransform SkewTransformScaleTransform

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 <Button Style="{StaticResource ButtonStyle}" Content="Button" />

21. Customizing Existing Controls Skinning <Path Height="120.646" Width="129.736" Stretch="Fill" Data="M204,..., 155" Stroke="#FFF77474“ Fill="{TemplateBinding Background}"/> <Button Content="Button" Template="{StaticResource ButtonTemplate}">

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. Visual State Manager - VSM Implements two features: –Visual States –Visual Transitions Available in template-based controls Can be used on custom UserControls (custom states and groups) VSM takes care of the transition automatically (you define the final look of each state) Duration of transitions can be controlled

24. Networking and Data

25. 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

26. Cross-Domain Network Calls Allowed if target domain has XML policy file in place permitting calls from other domains Crossdomain.xml – Requires domain="*" allowing calls from any domain Clientaccesspolicy.xml – Can restrict access to certain domains only Policy file must be located at domain root

27. Data Binding Two way binding between UI Elements and CLR objects (or collections of objects) Binding binding = new Binding("Nasdaq.Points"); binding.Mode = BindingMode.OneWay; TextBlock tb = new TextBlock(); tb.SetBinding(TextBlock.TextProperty, binding); Binding binding = new Binding("Nasdaq.Points"); binding.Mode = BindingMode.OneWay; TextBlock tb = new TextBlock(); tb.SetBinding(TextBlock.TextProperty, binding);

28. 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

29. File I/O General-purpose file I/O not permitted OpenFileDialog can be used to open files –User interaction constitutes permission needed to safely open files –No SaveFileDialog yet Isolated storage can be used to persist data locally subject to quotas –Quote is initially set to 1MB per domain but can be increased

30. 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)

31. WPF

32. What is Windows Presentation Foundation? Unified approach to UI, Media and Documents Delivers richest possible experiences

33. 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.

34. 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.

35. Visual Studio 2010 built on WPF

36. British Library Revolutionary new 3D experience for accessing priceless literary treasures

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

38. 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/

39. WPF Project Delivery Types XAML Browser Application (XBAP) Online OnlySimple DeploymentAutomatic UpdatesTight, “Fixed” Sandbox ClickOnce Application Offline/Online“Flexible” DeploymentUpdating Framework“Flexible” Sandbox Full Client Offline/Online Custom DeploymentRoll Your Own UpdatesNo Sandbox

40. Why Build A Client? Client Local Resource Disk CPU(s) Hardware Optimise for the Device Online/Offline Working Richness of Experience User Productivity UI Familiarity Responsiveness S/W Integration Developer Productivity Platform Integration Product Differentiation

41. 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

42. 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

43. Demo

44. Architectural Guidance

45. 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

47. Stock Trader Sample Application

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

49. Resources Silverlight Community Site: http://silverlight.nethttp://silverlight.net WPF Community: http://windowsclient.nethttp://windowsclient.net Main Product Site: http://www.microsoft.com/silverlighthttp://www.microsoft.com/silverlight MSDN Center: http://msdn.microsoft.com/silverlighthttp://msdn.microsoft.com/silverlight Online Forums: http://silverlight.net/forumshttp://silverlight.net/forums Codeplex Silverlight Toolkit: http://www.codeplex.com/silverlight/ http://www.codeplex.com/silverlight/ Top Silverlight Blogs –Tim Heuer: http://timheuer.com/http://timheuer.com/ –Silverlight cream: http://geekswithblogs.net/WynApseTechnicalMusings http://geekswithblogs.net/WynApseTechnicalMusings –Laurence Moroney: http://blogs.msdn.com/webnexthttp://blogs.msdn.com/webnext

50. 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

51. © 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.