2

A First Look at Windows A First Look at Windows Presentation Foundation Presentation Foundation Everywhere ("WPF/E")Everywhere ("WPF/E")

Joe StegmanJoe StegmanLead Program ManagerLead Program ManagerMicrosoft CorporationMicrosoft Corporation

3

Session AgendaSession Agenda

Introduce "WPF/E"Introduce "WPF/E"

Architecture and FeaturesArchitecture and Features

StatusStatus

Q&AQ&A

4

Windows Presentation Foundation/Everywhere Windows Presentation Foundation/Everywhere (“WPF/E”)(“WPF/E”)

Subset of WPF focused on interactive Subset of WPF focused on interactive contentcontent

Great integration with web Great integration with web Ubiquitous (cross platform/cross browser)Ubiquitous (cross platform/cross browser)Supports JavaScript and C#/VB.NetSupports JavaScript and C#/VB.Net

XAML is the enabling technologyXAML is the enabling technology

Available Soon:Available Soon:Customer preview in Q3 2006Customer preview in Q3 2006Web release in first half of 2007Web release in first half of 2007Device release in second half of 2007Device release in second half of 2007

5

"WPF/E" Web Architecture"WPF/E" Web ArchitectureBrowser Application / OS

ContentPackage XAML

ProgrammingModel

“WPF/E” Runtime

Plug-insPlug-ins Platform SpecificHosting ModelPlatform SpecificHosting Model

JavaScript

C# / VB.NET

Native API

XML - DataFonts Video/AudioImages

Native “WPF/E” APINative “WPF/E” API

UI & Rendering CoreUI & Rendering Core

Platform Abstraction LayerPlatform Abstraction Layer

6

"WPF/E" Demo"WPF/E" Demo

7

““WPF/E” Web PlatformsWPF/E” Web Platforms

Operating SystemsOperating SystemsWin XP, Win2K, Win2K3, VistaWin XP, Win2K, Win2K3, Vista

Considering Win9XConsidering Win9X

Mac OS X 10.*Mac OS X 10.*

Considering Linux and SolarisConsidering Linux and Solaris

BrowsersBrowsersIE 5.5+IE 5.5+

Mozilla 1+, Firefox 1+Mozilla 1+, Firefox 1+

Opera 7+Opera 7+

Safari 1+Safari 1+

8

"WPF/E" Features"WPF/E" Features

Core Runtime

Media Integration LayerMedia Integration Layer

AudioAudio VideoVideo

Composition EngineComposition Engine

Base ServicesBase Services

XML/XAML ParserXML/XAML Parser

AccessibilityAccessibility

Property SystemProperty System

Input and EventingInput and Eventing

TextText

ImagingImaging

2D2D

Animation

Animation

Other ServicesOther Services

Core ControlsCore Controls

Basic LayoutBasic Layout

Container Controls

Container Controls

9

XAML ExampleXAML Example

<Button Width="100" Height="100">Click</Button><Path Fill=“Blue" Data="M 10 120 l 0 100 100 0 0 -100 Z"/><Path Fill=“Green" Data="M 120 10 l 0 100 100 0 0 -100 Z"/><Path Data="M 120 120 l 0 100 100 0 0 -100 Z"> <Path.Fill> <LinearGradientBrush StartPoint="0.0, 1.0" EndPoint="1.0, 0.0"> <LinearGradientBrush.GradientStops> <GradientStop Offset="1" Color="Green"/> <GradientStop Offset="0" Color="Blue"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Path.Fill></Path>

10

Increased Development ProductivityIncreased Development Productivity

Integrated Platform for UI, Text, and MediaIntegrated Platform for UI, Text, and Media

Declarative Programming (XAML)Declarative Programming (XAML)

Bringing Designers Into the Application Bringing Designers Into the Application Development ProcessDevelopment Process

Tools for Designers: Microsoft ExpressionTools for Designers: Microsoft Expression

Tools for Developers: Visual StudioTools for Developers: Visual Studio

33rdrd Party Support: Mobiform, Electric Rain Party Support: Mobiform, Electric Rain

11

DesignerDesigner

Emotional Emotional ConnectionConnection

Look, behavior, data Look, behavior, data visualization, usability, brand visualization, usability, brand

impactimpact

DeveloperDeveloper

Functional Functional CapabilitiesCapabilitiesDeployment, function, data Deployment, function, data connection and integrity, IT connection and integrity, IT process, securityprocess, security

C++C#

VB.NET

PaperJPG / TIFF

MOV / WMV PSDPPT

XAML

Unifying the Designer/Developer ProcessUnifying the Designer/Developer Process

12

"WPF/E" Features Demo"WPF/E" Features Demo

13

"WPF/E" Web Programming Model"WPF/E" Web Programming Model

XAML and JavaScript in a web pageXAML and JavaScript in a web pageAccess "WPF/E" via JavaScriptAccess "WPF/E" via JavaScript

Support inline and external XAML/scriptSupport inline and external XAML/script

XAML and .NET Framework codeXAML and .NET Framework code"WPF/E" hosts an x-platform .NET runtime"WPF/E" hosts an x-platform .NET runtime

Code (C#/VB.NET) is compiled into an Code (C#/VB.NET) is compiled into an intermediate language (IL)intermediate language (IL)

IL is run in a secure and “managed” environmentIL is run in a secure and “managed” environment

"WPF/E" loads external package containing "WPF/E" loads external package containing IL and XAMLIL and XAML

14

External PackageExternal Package<html><html>

<<bodybody>>

<object<object/embed /embed id=id=“wpfehost” size=“…”>“wpfehost” size=“…”>

<param name=“source” value=“<param name=“source” value=“default.wpfedefault.wpfe”/>”/>

<param name=“startuppage” <param name=“startuppage” value=“value=“default.xamldefault.xaml”/>”/>

</…></…>

<</body/body>>

</html></html>default.wpfedefault.wpfe contains: contains:

default.xaml default.xaml (compressed)(compressed)

It may also contain:It may also contain:Other XAML filesOther XAML files

XAML and script filesXAML and script files

Resources (images, media, fonts, others)Resources (images, media, fonts, others)

15

.NET Programming Model.NET Programming Model

Web page plug-in loads external packageWeb page plug-in loads external package

Web Page:Web Page:<html><html>

<!-- … --><!-- … -->

<object<object/embed/embed source=“source=“sample.wpfesample.wpfe”>…</…>”>…</…>

</html></html>

sample.wpfesample.wpfe::sample.xamlsample.xaml

sample.ilsample.il

External package contains XAML and ILExternal package contains XAML and IL

The container is loaded into the "WPF/E" plug-inThe container is loaded into the "WPF/E" plug-in

16

““Managed code” programming modelManaged code” programming model

sample.xaml:

<Page Name=“p1”><Button Name=“b1”>Turn Red</Button>

</Page>

sample.cs (becomes sample.il):

b1.Click += new EventHandler(Button1_Click);

void Button1_Click(object sender, EventArgs e) {p1.Background = Brushes.Red;

}

17

"WPF/E" Controls"WPF/E" ControlsBasic controlsBasic controls

Input, Button, CheckBox, RadioButtonInput, Button, CheckBox, RadioButton

Canvas, Grid and StackCanvas, Grid and Stack

Rich styles and template supportRich styles and template support

18

Questions and Feedback…Questions and Feedback…

© 2006 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.