windows presentation foundation: the next gdi? shawn wildermuth mvp, mcsd.net, mct, author and...

Windows Presentation Foundation:

The Next GDI?

Windows Presentation Foundation:

The Next GDI?

Shawn WildermuthMVP, MCSD.NET, MCT,

Author and Speaker

Shawn WildermuthMVP, MCSD.NET, MCT,

Author and Speaker

Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?

Who I AmWho I Am

Shawn Wildermuth – [email protected]– http://adoguy.com

Independent Consultant and Trainer INETA Speaker Book Author – “Pragmatic ADO.NET”– MCTS Self-Paced Training Kit (Exam 536)– MCPD Self-Paced Training Kits (Exams 547, 548

& 549)– “Prescriptive Data Architectures” - Upcoming

This Presentation can be found at:– http://adoguy.com/presentations

Shawn Wildermuth – [email protected]– http://adoguy.com

Independent Consultant and Trainer INETA Speaker Book Author – “Pragmatic ADO.NET”– MCTS Self-Paced Training Kit (Exam 536)– MCPD Self-Paced Training Kits (Exams 547, 548

& 549)– “Prescriptive Data Architectures” - Upcoming

This Presentation can be found at:– http://adoguy.com/presentations


AgendaAgenda

Happy Birthday GDIIntroducing WPFHardware RenderingXML Based MarkupLayoutNew Control Model

Happy Birthday GDIIntroducing WPFHardware RenderingXML Based MarkupLayoutNew Control Model


Happy Birthday GDIHappy Birthday GDI

Been around for 20 years– Amazing longevity– Allows writing of productive apps easily– Developer high productivity

Been around for 20 years– Amazing longevity– Allows writing of productive apps easily– Developer high productivity


Happy Birthday GDI (2)Happy Birthday GDI (2)

Problems with GDI– Easy to write vanilla looking applications– Hard to write good looking applications– Dated Look and Feel– Owner-Drawn code is hard– 2-D is better with GDI+, but still verbose– 3-D is possible with DirectX but difficult

Problems with GDI– Easy to write vanilla looking applications– Hard to write good looking applications– Dated Look and Feel– Owner-Drawn code is hard– 2-D is better with GDI+, but still verbose– 3-D is possible with DirectX but difficult


Happy Birthday GDI (3)Happy Birthday GDI (3)

Product Differentiation– Bigger challenges grabbing user interest– Grey boxes are on their way out– OS X adding to the competitive pressure

Product Differentiation– Bigger challenges grabbing user interest– Grey boxes are on their way out– OS X adding to the competitive pressure


Error loading page


Introducing WPFIntroducing WPF

Originally Part of Vista only– Now works with XP SP2 and W2K3 SP1

Now Available– Runtime lets you run WPF Apps– SDK includes VS 2005 Support

The GDI for the next 10 Years

Originally Part of Vista only– Now works with XP SP2 and W2K3 SP1

Now Available– Runtime lets you run WPF Apps– SDK includes VS 2005 Support

The GDI for the next 10 Years


What is WPFWhat is WPF

Hardware Rendered Graphics System– Not tied to DPI

Improved Control Model– Easier to create custom UI’s

XML Based Markup Language (XAML)– Similar ASP.NET 2.0 Programming Model

Program Deployment Models– Standalone, Click Once and Express Apps

Hardware Rendered Graphics System– Not tied to DPI

Improved Control Model– Easier to create custom UI’s

XML Based Markup Language (XAML)– Similar ASP.NET 2.0 Programming Model

Program Deployment Models– Standalone, Click Once and Express Apps


Hardware Rendered GraphicsHardware Rendered Graphics

Drawing Directly with GPU– Everything is Accelerated

Impact on Battery– Reduced CPU Load Should Balance GPU Load

Scalable Renderers– Three levels of rendering

Level 0: Software Level 1: DirectX 7+ Support

– (Pixel and Vertex Shaders), 32 Megs Video Memory

Level 2: DirectX 9+ Support – (Pixel Shader 2.0), 64 Megs of Video Memory

Drawing Directly with GPU– Everything is Accelerated

Impact on Battery– Reduced CPU Load Should Balance GPU Load

Scalable Renderers– Three levels of rendering

Level 0: Software Level 1: DirectX 7+ Support

– (Pixel and Vertex Shaders), 32 Megs Video Memory

Level 2: DirectX 9+ Support – (Pixel Shader 2.0), 64 Megs of Video Memory


Improved Control ModelImproved Control Model

GDI Challenges– Controls are not flexible– Setting Properties are the path to customization– Owner-drawing controls are expensive– Advanced customization requires significantly

more work.

GDI Challenges– Controls are not flexible– Setting Properties are the path to customization– Owner-drawing controls are expensive– Advanced customization requires significantly

more work.

Prop-erties

CustomDraw

Owner Draw or Custom Control


Improved Control Model (2)Improved Control Model (2)

Pay for P lay Customization:Rich Content, Visual Styling, Built for a new Platform

Prop-erties

Custom Control

New Control Model – Build with the platform for the platform– Controls can contain anything (e.g.

Controls)– Controls have flexible styling model

New Control Model – Build with the platform for the platform– Controls can contain anything (e.g.

Controls)– Controls have flexible styling model



Keyboard Navigation– Use arrow keys to navigate your application– Separate from Tab Navigation

Globalization and localization – “Size to content” by default– Built-in support for “right to left”

Accessibility– Accessibility is not an afterthought– UIAutomation patterns in all base classes—

consistent across all controls

Keyboard Navigation– Use arrow keys to navigate your application– Separate from Tab Navigation

Globalization and localization – “Size to content” by default– Built-in support for “right to left”

Accessibility– Accessibility is not an afterthought– UIAutomation patterns in all base classes—

consistent across all controls



Look-less Controls– Do not contain “Render” code

Visual Behavior– Visuals Come From

Your App Theme File

– Keep Behavior, Change Style Separation between UI Design and UI

Functionality

Look-less Controls– Do not contain “Render” code

Visual Behavior– Visuals Come From

Your App Theme File

– Keep Behavior, Change Style Separation between UI Design and UI

Functionality


Programming ModelProgramming Model

XAML– “XML Application Markup Language”– The Design Language of WPF– Tools will create XAML or Can be Hand

codedBAML– “Binary Application Markup Language”– Binary Representation of XAML– More Efficient

XAML– “XML Application Markup Language”– The Design Language of WPF– Tools will create XAML or Can be Hand

codedBAML– “Binary Application Markup Language”– Binary Representation of XAML– More Efficient


New Development ModelNew Development Model

Lessons Learned From Web Development– Keep Design away from Developers– User Experience is Different than Design– Better Models a Three Tier Logical Model

Lessons Learned From Web Development– Keep Design away from Developers– User Experience is Different than Design– Better Models a Three Tier Logical Model


Lessons Learned from Web Development

Lessons Learned from Web Development

• Microsoft Tools for Designers & Microsoft Tools for Designers & DevelopersDevelopers

• Declarative Programming through Declarative Programming through XAMLXAML

• Third Party Tools (e.g. Aurora by Third Party Tools (e.g. Aurora by Mobiform, ZAM 3D by Electric Rain)Mobiform, ZAM 3D by Electric Rain)Designers designDesigners design

With XAML designers & With XAML designers &

developers can streamline developers can streamline

their collaborationtheir collaboration

Developers add business logicDevelopers add business logic


Design ToolsDesign Tools

Designers for different users– Visual Studio: Programmer Level

A WinForms-like experience

– Expression Blend: Designer Level Hybrid of Artist and Data Binding Similar to HTML-level designing

– Expression Design: Artist Level An Illustrator-like experience

Demo

Designers for different users– Visual Studio: Programmer Level

A WinForms-like experience

– Expression Blend: Designer Level Hybrid of Artist and Data Binding Similar to HTML-level designing

– Expression Design: Artist Level An Illustrator-like experience

Demo


Programming Model (2)Programming Model (2)

C#, VB.NET, etc.– Used to glue behavior with XAML/BAML– Think of XAML/BAML as the drawing code– CLR Languages still used to do heavy

lifting

C#, VB.NET, etc.– Used to glue behavior with XAML/BAML– Think of XAML/BAML as the drawing code– CLR Languages still used to do heavy

lifting


Programming Model (3)Programming Model (3)

XAML

<window …/>

BAML

000110101101010001101010…

C#/VB.Net

Partial class …

WPF AppInterpret

CompileCompile

Combine


XML Based Markup (XAML)XML Based Markup (XAML)

Elements tied to Controls (1 to 1)– <Canvas /> is class Canvas– <Window /> is class Window– <Button /> is class Button– <TextBox /> is class TextBox

Elements tied to Controls (1 to 1)– <Canvas /> is class Canvas– <Window /> is class Window– <Button /> is class Button– <TextBox /> is class TextBox

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Button>Click Me!</Button></Canvas>

<StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <TextBox>Hello There</TextBox> <Button>Click Me!</Button></StackPanel>


XML Based Markup (XAML) (2)XML Based Markup (XAML) (2)

Composite Controls– Simple hierarchy model– Content of most controls can store other

controls

Composite Controls– Simple hierarchy model– Content of most controls can store other

controls<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Button Width="75"> <Image Source="f:\working\adoguysite\images\headshot.jpg" Width="50" /> </Button></Canvas>

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Button> <StackPanel> <Image Source="d:\working\adoguysite\images\headshot.jpg" /> <TextBlock>Hello there</TextBlock> </StackPanel> </Button> </Canvas>


XML Based Markup (XAML) (3)XML Based Markup (XAML) (3)

Layout Models– Canvas: Specific Placement– StackPanel: Horizontal or Vertical

Stacking– DockPanel: Control Docking (Explorer-

like)– Grid: Guideline-based UI– TextFlow: Document Flow– Navigation: Web-like forward/back– Demo

Layout Models– Canvas: Specific Placement– StackPanel: Horizontal or Vertical

Stacking– DockPanel: Control Docking (Explorer-

like)– Grid: Guideline-based UI– TextFlow: Document Flow– Navigation: Web-like forward/back– Demo


DataBindingDataBinding

Simple and powerful model– Target: any property of any Element– Source: public property of CLR objects:

CLR and XAML properties ADO DataColumns (TypeDescriptor) XML Node

– Dynamic IPropertyChange DependencyProperty or; PropertyDescriptor

– TwoWay– Value Converter

Simple and powerful model– Target: any property of any Element– Source: public property of CLR objects:

CLR and XAML properties ADO DataColumns (TypeDescriptor) XML Node

– Dynamic IPropertyChange DependencyProperty or; PropertyDescriptor

– TwoWay– Value Converter


DataBinding (2)DataBinding (2)

Binding Types– Simple Xml Syntax for Binding to

Anything

– Abbreviated Syntax also Supported

Binding Types– Simple Xml Syntax for Binding to

Anything

– Abbreviated Syntax also Supported

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Slider Name="slider" /> <Label Canvas.Top="50"> <Label.Content> <Binding Path="Value" ElementName="slider" /> </Label.Content> </Label></Canvas>

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Slider Name="slider" /> <Label Canvas.Top="50" Content="{Binding Path=Value, ElementName=slider}" /></Canvas>



Support for Common DataSources– Uses a hierarchical DataContext concept

Support for Common DataSources– Uses a hierarchical DataContext concept

StackPanel

Image

HorizontalSlider

Value= {Bind Path=XPos, Source={StaticResource theCar}}

Canvas.Left= {Bind Path=XPos, Source={StaticResource theCar}}

DataContext= {Bind Source={StaticResource theCar}}

Value= {Bind Path=XPos}

Canvas.Left= {Bind Path=XPos}



Binding Types– OneWay, TwoWay, OneTime– OneWay and OneTime work with any

object Property Based Reads

– TwoWay uses IPropertyChange interface– Collections use ICollectionChange

interface

Binding Types– OneWay, TwoWay, OneTime– OneWay and OneTime work with any

object Property Based Reads

– TwoWay uses IPropertyChange interface– Collections use ICollectionChange

interface


Styles Styles

Similar to CSS, but can style structure– Inline Styling is supported

– Defining Style of Control just works

Similar to CSS, but can style structure– Inline Styling is supported

– Defining Style of Control just works

<Canvas xmlns="..." xmlns:x="..." > <TextBox> <TextBox.Style> <Style><Setter Property="Control.FontSize" Value="18" /> </Style> </TextBox.Style> </TextBox></Canvas>

<Canvas xmlns="..." xmlns:x="..." > <Canvas.Resources> <Style x:Key="MyTextBox"> <Setter Property="Control.FontSize" Value="18" /> </Style> </Canvas.Resources> <TextBox Style="{StaticResource MyTextBox}" /> </Canvas>


AnimationAnimation

Animation Support is built in– Uses Storyboard idea for animation

timelines

Animation Support is built in– Uses Storyboard idea for animation

timelines<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Rectangle Name="MyRectangle" Width="100" Height="100" Fill="Blue"> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width" From="100" To="200" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle></Page>


Animation (2)Animation (2)

More Complex Animation – Different Timeline Models (e.g. Parallel)

More Complex Animation – Different Timeline Models (e.g. Parallel)

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Rectangle Name="MyRectangle" Width="100" Height="100" Fill="Blue"> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width" From="100" To="200" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" /> <DoubleAnimation Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Height" From="100" To="50" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard></BeginStoryboard></EventTrigger></Rectangle.Triggers></Rectangle></Page>


3D Modeling3D Modeling

Real 3D Modeling Language– Concepts like multiple cameras, lights,

meshes and geometries are in the language.

Real 3D Modeling Language– Concepts like multiple cameras, lights,

meshes and geometries are in the language.<Grid Background="#333399">

<Grid.Resources> <MeshGeometry3D x:Key="PlaneMesh" Positions="-1 -1 -0.5 1 -1 -0.5 -1 1 -0.5 1 1 -0.5 0 0 1" Normals="-1 -1 1 1 -1 1 -1 1 1 1 1 1 0 0 1" TextureCoordinates="0 1 1 1 0 0 1 0 0.5 0.5 " TriangleIndices="0 4 2 2 4 3 4 1 3 0 1 4" /> </Grid.Resources> <Viewport3D Name="myViewport3D" ClipToBounds="true" Focusable="true"> <Viewport3D.Camera><PerspectiveCamera /></Viewport3D.Camera> <Viewport3D.Models> <AmbientLight Color="#FF0F0F0F" /> <DirectionalLight Direction="1 1 -1" /> <GeometryModel3D>...</GeometryModel3D> </Viewport3D.Models> </Viewport3D></Grid>


MultimediaMultimedia

Support for simplified Audio/Video handling– <MediaElement />– Simple wrappers around the Media Player

APIs

Support for simplified Audio/Video handling– <MediaElement />– Simple wrappers around the Media Player

APIs<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="800" WindowState="Maximized"> <StackPanel> <StackPanel Orientation="Horizontal"> <MediaElement Source="d:\working\wpf\intro.wmv" Width="500" /> <MediaElement Source="d:\working\wpf\xbox.wmv" Width="500" /> </StackPanel> <StackPanel Orientation="Horizontal"> <MediaElement Source="d:\working\wpf\numbers.wmv" Width="500" /> <MediaElement Source="d:\working\wpf\bee.wmv" Width="500" /> </StackPanel> </StackPanel></Window>


ToolsTools

Perforator– Runtime view of WPF performance– Help to tweak performance– Very useful to test on a variety of

platforms– Demo…

Perforator– Runtime view of WPF performance– Help to tweak performance– Very useful to test on a variety of

platforms– Demo…


Codename “WPF/E”Codename “WPF/E”

WPF Everywhere– Microsoft’s Flash Killer– Uses XAML in the Browser – CTP Available Now– Version 1.0

Windows and Mac Support (Firefox, IE, Safari) No .NET Runtime Needed Runtime at 1 Meg currently Programmatic Support via Jscript

– Demo

WPF Everywhere– Microsoft’s Flash Killer– Uses XAML in the Browser – CTP Available Now– Version 1.0

Windows and Mac Support (Firefox, IE, Safari) No .NET Runtime Needed Runtime at 1 Meg currently Programmatic Support via Jscript

– Demo


ConclusionConclusion

WPF/XAML are the next GDI– Will they last 20 years? Probably not…– But they bring us into the GPU– And make better UI’s easier to write

WPF/XAML are the next GDI– Will they last 20 years? Probably not…– But they bring us into the GPU– And make better UI’s easier to write

Questions?Questions?

windows presentation foundation: the next gdi? shawn wildermuth mvp, mcsd.net, mct, author and...

Documents

supportthe gdi

new control model build

happy birthday gdibeen

custom uisxml

support pixel shader

megs video memorylevel

rich content

visual styling