Introducing Windows Presentation Foundation (Avalon)

1
Introducing Windows Presentation
Foundation(Avalon)

• The Next GDI?

Shawn Wildermuth Wildermuth Consulting Services,
LLC http//adoguy.com swildermuth_at_adoguy.com
2
Who I Am

• Shawn Wildermuth (swildermuth_at_adoguy.com)
• Independent Consultant
• C MVP
• INETA Speaker
• Book Author
• Pragmatic ADO.NET
• Prescriptive Data Architectures - Upcoming
• This Presentation can be found at
• http//adoguy.com/presentations

3
Agenda

• Happy Birthday GDI
• Introducing Avalon
• Hardware Rendering
• XML Based Markup
• Avalon Layout
• New Control Model

4
Happy Birthday GDI

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

5
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

6
(No Transcript)
7
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

8
(No Transcript)
9
Introducing Avalon

• Originally Part of Vista only
• Now works with XP SP2 and W2K3
• Now Available (January CTP)
• Runtime lets you run WPF Apps
• SDK includes VS 2005 Support
• The GDI for the next 10 Years

10
What is Avalon

• Hardware Rendered Graphics System
• Not tied to DPI
• Sometimes called Aero (the Hardware Layer)
• Improved Control Model
• Easier to create custom UIs
• XML Based Markup Language (XAML)
• Similar ASP.NET 2.0 Programming Model
• Program Deployment Models
• Standalone, Click Once and Express Apps

11
Hardware Rendered Graphics

• Drawing Directly on GPU Surface
• Not tied to the DPI of the machine
• Impact on Battery Should Be Minimal
• 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

12
Improved 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.

13
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

14
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
  classesconsistent across all controls

15
Improved Control Model (4)

• Look-less Controls
• Do not contain Render code
• Visuals Come From
• Your App
• Theme File
• Keep Behavior, Change Style
• Separation between UI Design and UI Functionality

16
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

17
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

18
Programming Model (3)
19
XML Based Markup (XAML)

• Elements tied to Controls (1 to 1)
• ltCanvas /gt is class Canvas
• ltWindow /gt is class Window
• ltButton /gt is class Button
• ltTextBox /gt is class TextBox

ltCanvas xmlns"http//schemas.microsoft.com/winfx/
avalon/2005"gt ltButtongtClick Me!lt/Buttongt lt/Canva
sgt
ltStackPanel xmlns"http//schemas.microsoft.com/wi
nfx/avalon/2005"gt ltTextBoxgtHello
Therelt/TextBoxgt ltButtongtClick
Me!lt/Buttongt lt/StackPanelgt
20
XML Based Markup (XAML) (2)

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

ltCanvas xmlns"http//schemas.microsoft.com/winfx/
avalon/2005"gt ltButton Width"75"gt ltImage
Source"f\working\adoguysite\images\headshot.jpg"
Width"50" /gt lt/Buttongt lt/Canvasgt
ltCanvas xmlns"http//schemas.microsoft.com/winfx/
avalon/2005"gt ltButtongt ltStackPanelgt ltImage
Source"d\working\adoguysite\images\headshot.jpg"
/gt ltTextBlockgtHello therelt/TextBlockgt
lt/StackPanelgt lt/Buttongt lt/Canvasgt
21
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

22
DataBinding

• Simple and powerful model
• Target any property of any Element
• Source public property of CLR objects
• CLR and Avalon properties
• ADO DataColumns (TypeDescriptor)
• XML Node
• Dynamic
• IPropertyChange
• DependencyProperty or
• PropertyDescriptor
• TwoWay
• Value Converter

23
DataBinding (2)

• Binding Types
• Simple Xml Syntax for Binding to Anything
• Abbreviated Syntax also Supported

ltCanvas xmlns"http//schemas.microsoft.com/winfx/
avalon/2005" xmlnsx"http//schemas.microsoft
.com/winfx/xaml/2005" gt ltSlider Name"slider"
/gt ltLabel Canvas.Top"50"gt ltLabel.Contentgt
ltBinding Path"Value" ElementName"slider"
/gt lt/Label.Contentgt lt/Labelgt lt/Canvasgt
ltCanvas xmlns"http//schemas.microsoft.com/winfx/
avalon/2005" xmlnsx"http//schemas.microsoft
.com/winfx/xaml/2005" gt ltSlider Name"slider"
/gt ltLabel Canvas.Top"50"
Content"Binding PathValue, ElementNameslider"
/gt lt/Canvasgt
24
DataBinding (3)

• Support for Common DataSources
• Uses a hierarchical DataContext concept

DataContext Bind SourceStaticResource
theCar
StackPanel
HorizontalSlider
Value Bind PathXPos, SourceStaticResource
theCar
Value Bind PathXPos
Image
Canvas.Left Bind PathXPos,
SourceStaticResource theCar
Canvas.Left Bind PathXPos
25
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

26
Styles

• Similar to CSS, but can style structure
• Inline Styling is supported
• Defining Style of Control just works

ltCanvas xmlns"..." xmlnsx"..." gt ltTextBoxgt
ltTextBox.Stylegt ltStylegtltSetter
Property"Control.FontSize" Value"18" /gt
lt/Stylegt lt/TextBox.Stylegt
lt/TextBoxgtlt/Canvasgt
ltCanvas xmlns"..." xmlnsx"..." gt
ltCanvas.Resourcesgt ltStyle xKey"MyTextBox"
gt ltSetter Property"Control.FontSize"
Value"18" /gt lt/Stylegt
lt/Canvas.Resourcesgt ltTextBox Style"StaticResou
rce MyTextBox" /gt lt/Canvasgt
27
Animation

• Animation Support is built in
• Uses Storyboard idea for animation timelines

ltPage xmlns"http//schemas.microsoft.com/winfx/av
alon/2005" xmlnsx"http//schemas.m
icrosoft.com/winfx/xaml/2005"gt ltRectangle
Name"MyRectangle" Width"100" Height"100"
Fill"Blue"gt ltRectangle.Triggersgt
ltEventTrigger RoutedEvent"Rectangle.Loaded"gt
ltBeginStoryboardgt ltStoryboardgt
ltDoubleAnimation
Storyboard.TargetName"MyRectangle"
Storyboard.TargetProperty"Width"
From"100" To"200" Duration"005"
AutoReverse"True" RepeatBehavior"Forever" /gt
lt/Storyboardgt lt/BeginStoryboardgt
lt/EventTriggergt lt/Rectangle.Triggersgt
lt/Rectanglegt lt/Pagegt
28
Animation (2)

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

ltPage xmlns"http//schemas.microsoft.com/winfx/av
alon/2005" xmlnsx"http//schemas.m
icrosoft.com/winfx/xaml/2005"gt ltRectangle
Name"MyRectangle" Width"100" Height"100"
Fill"Blue"gt ltRectangle.Triggersgt
ltEventTrigger RoutedEvent"Rectangle.Loaded"gt
ltBeginStoryboardgt ltStoryboardgt
ltDoubleAnimation
Storyboard.TargetName"MyRectangle"
Storyboard.TargetProperty"Width"
From"100" To"200" Duration"002"
AutoReverse"True" RepeatBehavior"Forever" /gt
ltDoubleAnimation
Storyboard.TargetName"MyRectangle"
Storyboard.TargetPropertyHeight"
From"100" To50" Duration"002"
AutoReverse"True" RepeatBehavior"Forever" /gt
lt/Storyboardgt lt/BeginStoryboardgt
lt/EventTriggergt lt/Rectangle.Triggersgt
lt/Rectanglegt lt/Pagegt
Need to fix this, not compatible with December
29
3D Modeling

• Real 3D Modeling Language
• Concepts like multiple cameras, lights, meshes
  and geometries are in the language.

ltGrid Background"333399"gt ltGrid.Resourcesgt
ltMeshGeometry3D xKey"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" /gt lt/Grid.Resourcesgt
ltViewport3D Name"myViewport3D"
ClipToBounds"true" Focusable"true"gt
ltViewport3D.Cameragt ltPerspectiveCamera
/gt lt/Viewport3D.Cameragt
ltViewport3D.Models ltAmbientLight
Color"FF0F0F0F" /gt ltDirectionalLight
Direction"1 1 -1" /gt ltGeometryModel3Dgt...lt/
GeometryModel3Dgt lt/Viewport3D.Modelsgt
lt/Viewport3Dgt lt/Gridgt
30
Multimedia

• Support for simplified Audio/Video handling
• ltMediaElement /gt
• Simple wrappers around the Media Player APIs

ltWindow xmlns"http//schemas.microsoft.com/winfx/
avalon/2005" xmlnsx"http//schemas
.microsoft.com/winfx/xaml/2005"gt ltStackPanelgt
ltStackPanel Orientation"Horizontal"gt
ltMediaElement Source"F\...\intro.wmv"/gt
ltMediaElement Source"F\...\day7.wmv"/gt
lt/StackPanelgt ltStackPanel Orientation"Horizon
tal"gt ltMediaElement Source"F\...\news.wmv"
/gt ltMediaElement Source"F\...\quakeradar.w
mv"/gt lt/StackPanelgt lt/StackPanelgt lt/Windowgt
31
Design Tools

• Designers for different users
• Cider Programmer Level
• A WinForms-like experience
• Sparkle Designer Level
• Hybrid of Artist and Data Binding
• Similar to HTML-level designing
• Expression Artist Level
• A Photoshop/Illustration-like experience
• Demo

32
Conclusion

• Avalon/XAML are the next GDI
• Will they last 20 years? Probably not
• But they bring us into the GPU
• And make better UIs easier to write

33
Questions?