Transcript Introducing Avalon

Introducing Windows
Presentation Foundation
(Avalon)
The Next GDI?
Shawn Wildermuth
Wildermuth Consulting Services, LLC
http://adoguy.com
[email protected]
Who I Am
Shawn Wildermuth
([email protected])
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
Agenda
Happy Birthday GDI
Introducing Avalon
Hardware Rendering
XML Based Markup
Avalon Layout
New Control Model
Happy Birthday GDI
Been around for 20 years
– Amazing longevity
– Allows writing of productive apps easily
– Developer high productivity
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
Error loading page
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
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
What is Avalon
Hardware Rendered Graphics System
– Not tied to DPI
– Sometimes called Aero (the Hardware Layer)
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
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
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
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
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
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
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
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
Programming Model (3)
BAML
000110101
101010001
101010…
C#/VB.Net
Combine
Partial
class …
XAML
<window
…
/>
Interpret
WPF App
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/avalon/2005">
<Button>Click Me!</Button>
</Canvas> <StackPanel xmlns="http://schemas.microsoft.com/winfx/avalon/2005">
<TextBox>Hello There</TextBox>
<Button>Click Me!</Button>
</StackPanel>
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/avalon/2005">
<Button Width="75">
<Image Source="f:\working\adoguysite\images\headshot.jpg" Width="50" />
</Button>
<Canvas xmlns="http://schemas.microsoft.com/winfx/avalon/2005">
</Canvas>
<Button>
<StackPanel>
<Image Source="d:\working\adoguysite\images\headshot.jpg" />
<TextBlock>Hello there</TextBlock>
</StackPanel>
</Button>
</Canvas>
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
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
DataBinding (2)
Binding Types
– Simple Xml Syntax for Binding to Anything
<Canvas xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005" >
<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/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005" >
<Slider Name="slider" />
<Label Canvas.Top="50"
Content="{Binding Path=Value, ElementName=slider}" />
</Canvas>
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}}
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
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>
Animation
Animation Support is built in
– Uses Storyboard idea for animation timelines
<Page xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
<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)
More Complex Animation
– Different Timeline Models (e.g. Parallel)
<Page xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
<Rectangle Name="MyRectangle" Width="100" Height="100" Fill="Blue">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
Need to fix this, not compatible with December
<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 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>
Multimedia
Support for simplified Audio/Video handling
– <MediaElement />
– Simple wrappers around the Media Player APIs
<Window xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
<StackPanel>
<StackPanel Orientation="Horizontal">
<MediaElement Source="F:\...\intro.wmv"/>
<MediaElement Source="F:\...\day7.wmv"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<MediaElement Source="F:\...\news.wmv"/>
<MediaElement Source="F:\...\quakeradar.wmv"/>
</StackPanel>
</StackPanel>
</Window>
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
Conclusion
Avalon/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?