Transcript Introducing Avalon

Windows Presentation Foundation:
The Next GDI?
Shawn Wildermuth
MVP, MCSD.NET, MCT,
Author and Speaker
Who 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
Windows Presentation Framework: The Next GDI?
Agenda
Happy Birthday GDI
Introducing WPF
Hardware Rendering
XML Based Markup
Layout
New Control Model
Windows Presentation Framework: The Next GDI?
Happy Birthday GDI
Been around for 20 years
– Amazing longevity
– Allows writing of productive apps easily
– Developer high productivity
Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?
Error loading page
Windows Presentation Framework: The Next GDI?
Windows Presentation Framework: The Next GDI?
Introducing 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
Windows Presentation Framework: The Next GDI?
What 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
Windows Presentation Framework: The Next GDI?
Hardware 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
Windows Presentation Framework: The Next GDI?
Improved Control Model
 GDI Challenges
–
–
–
–
Properties
Controls are not flexible
Setting Properties are the path to customization
Owner-drawing controls are expensive
Advanced customization requires significantly
more work.
Custom
Draw
Owner Draw
or Custom Control
Windows Presentation Framework: The Next GDI?
Improved Control Model (2)
New Control Model
– Build with the platform for the platform
– Controls can contain anything (e.g. Controls)
– Controls have flexible styling model
Properties
Pay for Play Customization:
Rich Content, Visual Styling, Built for a new Platform
Windows Presentation Framework: The Next GDI?
Custom
Control
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
Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?
Programming Model
XAML
– “XML Application Markup Language”
– The Design Language of WPF
– Tools will create XAML or Can be Hand coded
BAML
– “Binary Application Markup Language”
– Binary Representation of XAML
– More Efficient
Windows Presentation Framework: The Next GDI?
New 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
Windows Presentation Framework: The Next GDI?
Lessons Learned from Web Development
•
Microsoft Tools for Designers &
Developers
•
Declarative Programming through
developers
can streamline
XAML
•
Designers design
With XAML designers &
their collaboration
Third Party Tools (e.g. Aurora by
Mobiform, ZAM 3D by ElectricDevelopers
Rain)
add business logic
Windows Presentation Framework: The Next GDI?
Design 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
Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?
Programming Model (3)
BAML
000110101
101010001
101010…
C#/VB.Net
Combine
Partial
class …
XAML
<window
…
/>
Interpret
WPF App
Windows Presentation Framework: The Next GDI?
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
<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?
XML Based Markup (XAML) (2)
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?
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
Windows Presentation Framework: The Next GDI?
DataBinding
 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?
DataBinding (2)
Binding Types
– Simple Xml Syntax for Binding to Anything
<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>
– 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" Content="{Binding Path=Value, ElementName=slider}" />
</Canvas>
Windows Presentation Framework: The Next GDI?
DataBinding (3)
Support for Common DataSources
– Uses a hierarchical DataContext concept
StackPanel
DataContext=
{Bind
Source={StaticResource theCar}}
HorizontalSlider
Image
Value=
{Bind Path=XPos}
Path=XPos,
Source={StaticResource theCar}}
Canvas.Left=
{Bind Path=XPos}
Path=XPos,
Source={StaticResource theCar}}
Windows Presentation Framework: The Next GDI?
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
Windows Presentation Framework: The Next GDI?
Styles
Similar to CSS, but can style structure
– Inline Styling is supported
<Canvas xmlns="..." xmlns:x="..." >
<TextBox>
<TextBox.Style>
<Style><Setter Property="Control.FontSize" Value="18" /> </Style>
</TextBox.Style>
</TextBox>
</Canvas>
– Defining Style of Control just works
<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?
Animation
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?
Animation (2)
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?
3D Modeling
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?
Multimedia
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?
Tools
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?
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
Windows Presentation Framework: The Next GDI?
Conclusion
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
Windows Presentation Framework: The Next GDI?
Questions?