Introducing windows presentation foundation avalon l.jpg
This presentation is the property of its rightful owner.
Sponsored Links
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 l.jpg

Introducing Windows Presentation Foundation(Avalon)

The Next GDI?

Shawn Wildermuth

Wildermuth Consulting Services, LLC

http://adoguy.com

[email protected]


Who i am l.jpg

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 l.jpg

Agenda

  • Happy Birthday GDI

  • Introducing Avalon

  • Hardware Rendering

  • XML Based Markup

  • Avalon Layout

  • New Control Model


Happy birthday gdi l.jpg

Happy Birthday GDI

  • Been around for 20 years

    • Amazing longevity

    • Allows writing of productive apps easily

    • Developer high productivity


Happy birthday gdi 2 l.jpg

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


Slide6 l.jpg

Error loading page


Happy birthday gdi 3 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

Programming Model (3)

Combine

XAML

<window

/>

BAML

000110101101010001101010…

C#/VB.Net

Partial class …

Compile

Compile

WPF App

Interpret


Xml based markup xaml l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

Questions?


  • Login