Introducing Avalon

birdsowlSoftware and s/w Development

Dec 2, 2013 (3 years and 8 months ago)

108 views

Introducing Windows
Presentation Foundation

(Avalon)

The Next GDI?

Shawn Wildermuth

Wildermuth Consulting Services, LLC

http://adoguy.com

swildermuth@adoguy.com

Who I Am


Shawn Wildermuth
(swildermuth@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

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


Controls are not flexible


Setting Properties are the path to customization


Owner
-
drawing controls are expensive


Advanced customization requires significantly

more work.

Prop
-
erties
Custom
Draw
Owner Draw
or Custom Control
Improved Control Model (2)

Pay for Play 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

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)

XAML


<window




/>

BAML


000110101
101010001
101010…

C#/VB.Net


Partial
class …

WPF App

Interpret

Combine

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>

<Canvas xmlns="http://schemas.microsoft.com/winfx/avalon/2005">


<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







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">


<Label.Content>


<Binding Path="Value" ElementName="slider" />


</Label.Content>


</Label>

</Canvas>

<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

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}

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





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>

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>


<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"
=
=††=†††==
A畴潒敶e牳攽≔r略∠剥灥a瑂敨慶i潲㴢䙯牥v敲∠⼾
=

</Storyboard>


</BeginStoryboard>


</EventTrigger>


</Rectangle.Triggers>


</Rectangle>

</Page>

Need to fix this, not compatible with December

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?