Windows Presentation Foundation

1. Windows Presentation Foundation Or: Why You Shouldn’t Be Using Windows Forms to Write Desktop Applications Anymore Forrest Humphrey

2. Evolution of Windows Desktop Apps • Microsoft Foundation Classes in C++ • Visual Basic 6 • Windows Forms • WPF

3. 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

4. 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)

5. Hardware Acceleration (cont)

6. 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

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

8. Class Hierarchy (just kidding)

9. Class Hierarchy

10. 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

11. 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

12. 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

13. 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

14. 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>

15. XAML (cont) • ~Code demonstration~

16. 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>

17. XAML – Attached Properties • A control gets attached properties from its container     <Grid> <Button Grid.Row="0">Clear</Button>        <TextBoxGrid.Row="1"></TextBox>    </Grid>

18. 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}”>

19. 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

20. 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

21. Layout (cont) • ~Code demonstration~

22. Routed Events

23. 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

24. Routed Events (cont) • ~Code Demonstration~

25. 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)

26. 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

27. 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

28. 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

29. Commands – Custom Commands • ~ code demonstration ~

30. 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

31. 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=“{extensionTyperesourceKey}”

32. 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=“{StaticResourcebivGradient}” /> </Window

33. Styles • ~~ code demonstration ~~

34. Control Templates - Trees • Logical Tree • Closely resembles your declarative xaml • Visual Tree • All of the primitive building blocks that make up a Control

35. Control Templates - Trees <Window> <Grid> <Label Content="Label" /> <Button Content="Button" /> </Grid> </Window>

36. Control Templates - Trees

37. 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

38. Control Templates (cont) Image source: http://www.wpftutorial.net/Templates.html

39. 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

40. 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

41. Awesome But Not Covered • Data Binding • Custom Controls • 2D Drawing • 3D Drawing • Advanced Stuff • Composite Applications with Prism • Patterns like MVVM • Automated Testing

42. Done Forrest Humphrey Twitter: @geek4christ Email: forrest.humphrey@gmail.com BitBucket: https://bitbucket.org/geek4christ