Rich or Richer:Creating stunning experiences

with Silverlight and WPF

Katrien De GraeveDeveloper Evangelist

Microsoft Belgium & Luxembourghttp://blogs.msdn.com/katriend/

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, Microsoft® Silverlight™ is a cross-browser, cross-platform, and cross-device plug-in for cross-platform, and cross-device plug-in for delivering the next generation of media delivering the next generation of media experiences and rich interactive experiences and rich interactive applications for the Web.applications for the Web.

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

What is Microsoft Silverlight?

Cross-BrowserCross-Platform

• Enterprise/LOB• Business process

engineering in Silverlight• Rich controls: data,

layout, interactivity

• Multi-platform, high-performance email client

• Offers differentiation through personalization

K2

AOL

DemoDemo

Examples of Silverlight applicationsExamples of Silverlight applications

http://www.mscui.nethttp://www.mscui.net

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

Sept 2007

Oct 2008

TBD

March 2009

DesktopDesktop

MediaMedia& RIA& RIA

Server, Server, ServicesServices

Tooling

DesignerLook, behavior, brand,and emotional connection

DeveloperFunction, 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 PluginSilverlight Plugin

Retained Mode Retained Mode Graphics SystemGraphics System

Multimedia Multimedia supportsupport

XAML

XAML

Vector based Vector based graphicsgraphicsAnimation engineAnimation engine

.NET Core CLR.NET Core CLR

.NET Framework.NET Framework

ControlsControls DataData NetworkingNetworking

Silverlight Base Class LibrarySilverlight Base Class Library

JavaScript APIJavaScript 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

Rectangle Ellipse Polygon

Line PolyLine Path

Transforms

TranslateTransform RotateTransform

SkewTransform ScaleTransform

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 ControlsProperty 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>

Customizing Existing ControlsSkinning

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

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

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

Data Binding

• Two way binding between UI Elements and CLR objects (or collections of objects)

<TextBlock Text="{Binding Nasdaq.Points, Mode=OneWay}"/>

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

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?

Part of the Microsoft .NET 3.5 Framework

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, TagWorksProvides 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

WPF Release History

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/

WPF Project Delivery Types

XAML Browser Application(XBAP) ClickOnce Application

Full Client

Why Build A Client?

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

• 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

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• Codeplex Silverlight 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

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.