introducing windows presentation foundation avalon l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Introducing Windows Presentation Foundation (Avalon) PowerPoint Presentation
Download Presentation
Introducing Windows Presentation Foundation (Avalon)

Loading in 2 Seconds...

play fullscreen
1 / 33

Introducing Windows Presentation Foundation (Avalon) - PowerPoint PPT Presentation


  • 414 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Introducing Windows Presentation Foundation (Avalon)' - jacob


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

Introducing Windows Presentation Foundation(Avalon)

The Next GDI?

Shawn Wildermuth

Wildermuth Consulting Services, LLC

http://adoguy.com

swildermuth@adoguy.com

who i am
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
Agenda
  • Happy Birthday GDI
  • Introducing Avalon
  • Hardware Rendering
  • XML Based Markup
  • Avalon Layout
  • New Control Model
happy birthday gdi
Happy Birthday GDI
  • Been around for 20 years
    • Amazing longevity
    • Allows writing of productive apps easily
    • Developer high productivity
happy birthday gdi 2
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
happy birthday gdi 3
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
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
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
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
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
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
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
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
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
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
Programming Model (3)

Combine

XAML

<window

/>

BAML

000110101101010001101010…

C#/VB.Net

Partial class …

Compile

Compile

WPF App

Interpret

xml based markup xaml
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
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
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
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
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
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
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
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
  • 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
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
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
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
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
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