Introducing windows presentation foundation avalon l.jpg
Sponsored Links
This presentation is the property of its rightful owner.
1 / 33

Introducing Windows Presentation Foundation (Avalon) PowerPoint PPT Presentation

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

Download Presentation

Introducing Windows Presentation Foundation (Avalon)

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


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

    • Controls are not flexible

    • Setting Properties are the path to customization

    • Owner-drawing controls are expensive

    • Advanced customization requires significantly more work.


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


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)

Combine

XAML

<window

/>

BAML

000110101101010001101010…

C#/VB.Net

Partial class …

Compile

Compile

WPF App

Interpret


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

DataContext=

{Bind

Source={StaticResource theCar}}

StackPanel

HorizontalSlider

Value=

{Bind Path=XPos,

Source={StaticResource theCar}}

Value=

{Bind Path=XPos}

Image

Canvas.Left=

{Bind Path=XPos,

Source={StaticResource theCar}}

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"

AutoReverse="True" RepeatBehavior="Forever" />

</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?


  • Login