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