windows presentation foundation: the next gdi? shawn wildermuth mvp, mcsd.net, mct, author and...
TRANSCRIPT
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
AgendaAgenda
Happy Birthday GDIIntroducing WPFHardware RenderingXML Based MarkupLayoutNew Control Model
Happy Birthday GDIIntroducing WPFHardware RenderingXML Based MarkupLayoutNew Control Model
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
Error loading page
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
Improved Control Model (3)Improved Control Model (3)
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
Improved Control Model (4)Improved Control Model (4)
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
Programming Model (3)Programming Model (3)
XAML
<window …/>
BAML
000110101101010001101010…
C#/VB.Net
Partial class …
WPF AppInterpret
CompileCompile
Combine
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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>
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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>
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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>
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
DataBinding (3)DataBinding (3)
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}
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
DataBinding (4)DataBinding (4)
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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>
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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>
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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>
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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>
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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>
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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…
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?Windows Presentation Framework: The Next GDI?
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?