Rich or Richer: Creating stunning experiences with Silverlight and WPF Katrien De Graeve Developer Evangelist Microsoft Belgium & Luxembourg

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

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

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

Demo Examples of Silverlight applications

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

Silverlight Roadmap Silverlight 1 Silverlight 2 RTM Silverlight 3 Beta Silverlight for Mobile Sept 2007 Oct 2008 TBD March 2009

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

Architecture

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

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

XAML

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

Shapes Silverlight supports six shapes RectangleEllipsePolygon LinePolyLinePath

Transforms TranslateTransformRotateTransform SkewTransformScaleTransform

DEMO

Controls: Built-In

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

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

Customizing Existing Controls Property Bag Styling <Button Style="{StaticResource ButtonStyle}" Content="Button" />

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

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

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

Networking and Data

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

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

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);

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

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

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)

WPF

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

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.

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.

Visual Studio 2010 built on WPF

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

.NET 3.5 Sp1 WPF Release History 2008.NET 3.5.NET 3.0 Visual Studio 2008 Sp Visual Studio 2008.NET Visual Studio 2005.NET Visual Studio.NET 2003.NET Visual Studio.NET 2006

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

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

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

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

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

Demo

Architectural Guidance

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

Stock Trader Sample Application

Resources ID=fa07e1ce-ca3f-4b9b-a21b- e3fa10d013dd&DisplayLang=enhttp:// ID=fa07e1ce-ca3f-4b9b-a21b- e3fa10d013dd&DisplayLang=en Visual Basic version of QuickStarts and How-to Topics: ylang=en&FamilyID=537da1cd-43e e7- a1da9166fb46 ylang=en&FamilyID=537da1cd-43e e7- a1da9166fb46

Resources Silverlight Community Site: WPF Community: Main Product Site: MSDN Center: Online Forums: Codeplex Silverlight Toolkit: Top Silverlight Blogs –Tim Heuer: –Silverlight cream: –Laurence Moroney:

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

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