Windows Presentation Foundation

Forrest Humphrey

Or:

Why You Shouldn’t Be Using Windows Forms to Write Desktop Applications

Anymore

Evolution of Windows Desktop Apps

• Microsoft Foundation Classes in C++• Visual Basic 6• Windows Forms• WPF

The Graphics Engine

• GDI/GDI+ and User32 are gone• WPF uses DirectX• Fully utilizes graphics hardware

– Frees CPU cycles to do more non-rendering work

• Fallback software rendering

Hardware Acceleration

• Tiers– Rendering Tier 0

• No hardware acceleration (DirectX < 9.0)

– Rendering Tier 1• Partial hardware acceleration (DirectX >= 9.0)

– Rendering Tier 2• Full hardware acceleration (DirectX >= 9.0)

Hardware Acceleration (cont)

Feature Tier 1 Tier 2

DirectX Version Must be >= 9.0 Must be >= 9.0

Video RAM Must be >= 60mb Must be >= 120mb

Pixel Shader Must be >= version 2.0 Must be >= version 2.0

Vertex Shader No requirement Must be >= version 2.0

Multitexture Units No requirement Number of units must be >= 4

Higher-Level APIs

• Better layout model– Flow-based model instead of coordinate-based

• Better drawing model– Drawing primitives instead of raw pixels– True transparency– Native 3D support

• Rich text model• Animation baked right in

– No more using Timers to force a repaint

Higher-Level APIs (cont)

• Full audio and video support• Styles – reusable formatting• Templates – change the way any control is

rendered• Commands – menu items and keyboard

shortcuts linked to the same abstraction• XAML – markup separated from the code

behind

Class Hierarchy

(just kidding)

Class Hierarchy

Class Hierarchy (cont)

• System.Threading.DispatcherObject– Dispatcher to coordinate drawing and user

interaction with the Single-Threaded UI

• System.Windows.DependencyObject– Provides support for Dependency Properties

• System.Windows.Media.Visual– A single drawing object to be rendered and

information on how to render it

Class Hierarchy (cont)

• System.Windows.UIElement– Adds support for Layout, Input, Focus and

Events

• System.Windows.FrameworkElement– Highest level in the core inheritance tree and

includes stuff like data binding, animation and styles

Class Hierarchy (cont)

• System.Windows.Shapes.Shape– Rectangle, Polygon, Ellipse, Line and Path

• System.Windows.Controls.Control– TextBox, Button, ListBox, etc.– Includes support for templating

Class Hierarchy (cont)

• System.Windows.Controls.ContentControl– Base class for controls that have a single piece of

content– Window, Button, Label, CheckBox

• System.Windows.Controls.ItemsControl– Base class for controls that show multiple items– ListBox, TreeView, ToolBar

• System.Windows.Controls.Panel– Base class for all layout containers– StackPanel, Grid, DockPanel

XAML

• eXtensible Application Markup Language• XAML is optional; can do WPF without it• Separates UI from code-behind• XML syntax with special side-effects

– Every element is an instance, e.g. <Button>

XAML (cont)

• ~Code demonstration~

XAML – Complex Properties

• property-element syntax

<StackPanel.Background> <LinearGradientBrush> <GradientStop Offset="0.0" Color="Red"/> <GradientStop Offset="0.5" Color="Purple"/> <GradientStop Offset="1.0" Color="Blue"/> </LinearGradientBrush> </StackPanel.Background>

XAML – Attached Properties

• A control gets attached properties from its container

    <Grid> <Button Grid.Row="0">Clear</Button>        <TextBox Grid.Row="1"></TextBox>    </Grid>

XAML – Markup Extensions

• When you just need more– Used in attributes and bracketed by curly

braces– Utilize subclasses of System.Windows.Markup.MarkupExtension

<Button Foreground=“{x:Static SystemColors.ActiveCaptionBrush}”>

Layout

• WPF Layout is based on two key principles– Elements should not be explicitly sized– Elements should not be positioned with screen

coordinates

• Layout occurs in two stages– Measure – elements are asked for their

preferred size– Arrange – elements are laid out in their

containers

Layout (cont)

• StackPanel – elements are arranged in a horizontal or vertical stack

• WrapPanel – like StackPanel but wraps items instead of squeezing them to fit

• DockPanel – positions elements along the edges of the container

• Grid – arranges elements in rows and columns

• Canvas – coordinate-based positioning

Layout (cont)

• ~Code demonstration~

Routed Events

Routed Events (cont)

• Bubbling– Event chain starts at the bottom and “bubbles” up– Example: MouseDown

• Tunneling– Event chain starts at the top-most element and

“tunnels” down– Example: PreviewMouseDown

• Direct– Stick with one element, no routing– Example: MouseEnter

Routed Events (cont)

• ~Code Demonstration~

Routed Events (cont)

• Capturing the mouse– Mouse.Capture(<element>)

• Your Element will receive MouseDown and MouseUp events even if the cursor is moved off the element

• Free the mouse back up– Mouse.Capture(null)

Commands

• Single construct for sharing functionality between multiple input sources:– Menus– Keyboard Shortcuts– Toolbars

• A command provides a construct to share– Code that executes when a command is

invoked– The enabled/disabled state of a command

Commands - Built-in

– System.Windows.Input.ApplicationCommands• Cut, Copy, Paste, New, Open, SaveAs, etc.

– System.Windows.Input.NavigationCommands• BrowseBack, BrowseForward, NextPage, Refresh, etc.

– System.Windows.Input.EditingCommands• MoveToLineEnd, MoveLeftByWord, SelectToLineEnd, etc.

– System.Windows.Input.ComponentCommands– System.Windows.Input.MediaCommands

Commands - Components

• 4 main components to a WPF Command– Command

• The action to be executed

– Command Source• Thing that invokes the command

– Command Target• Thing the command will be executed on

– Command Binding• Thing that maps the logic to the command

Commands – Custom Commands

• ~ code demonstration ~

Resources

• Resources help you reuse common things– Brushes, Styles, Templates, etc

• Can be defined at multiple levels– On the element itself– On its container– On a Window

• WPF recursively searches up the element tree to find the requested resource

Resources (cont)

• Every Element has a Resources property – This property holds a ResourceDictionary– Key is a string, Value is an object

• To use a Resource defined elsewhere in the element tree, use a Markup Extension– <Element Property=“{extensionType resourceKey}”

Resources (cont)

<Window … > <Window.Resources> <LinearGradientBrush x:Key="bivGradient"> <GradientStop Color="Blue" Offset="0.0" /> <GradientStop Color="Indigo" Offset="0.5" /> <GradientStop Color="Violet" Offset="1.0" /> </LinearGradientBrush> </Window.Resource> … <Button Background=“{StaticResource

bivGradient}” /></Window

Styles

• ~~ code demonstration ~~

Control Templates - Trees

• Logical Tree– Closely resembles your declarative xaml

• Visual Tree– All of the primitive building blocks that make

up a Control

Control Templates - Trees

<Window> <Grid> <Label Content="Label" /> <Button Content="Button" /> </Grid></Window>

Control Templates - Trees

Control Templates

• WPF Controls are “lookless”– The default “look” of a control can be

completely replaced– Functionality of the control remains

unchanged• A Button still clicks and fires an action

Control Templates (cont)

Image source: http://www.wpftutorial.net/Templates.html

Animation

• WinForms way, Timers and custom repaint logic

• WPF way, baked in animation– Operates on a single Property– Automatically repaints the screen when

needed– Maintains a certain frame rate to ensure

smoothness

Animation (cont)

• Requirements for Animation– A target property– Animation class that supports the prop. type– From – original value– To – final value– Duration – how long to transition– A Way to start the animation

Awesome But Not Covered

• Data Binding• Custom Controls• 2D Drawing• 3D Drawing

• Advanced Stuff– Composite Applications with Prism– Patterns like MVVM– Automated Testing

Done

Forrest Humphrey

Twitter: @geek4christ

Email: forrest.humphrey@gmail.com

BitBucket: https://bitbucket.org/geek4christ