Introduction to 2D Graphics
Using WPF
1
2.1 Introduction
Introduces WPF for graphics. Focus on 2D for clarity.
XAML enables rapid prototyping. 2D graphics widely used today.
XAML extended by C# code. Labs provide integrated XAML tools.
2
2.2 Overview of the 2D Graphics Pipeline
Client area has UI, viewport
Graphics platform links app and hardware
Viewport renders scene from data
Manages GPU output, user input
UI generator uses same platform
2D app shows application model
Scene shows full or partial model
Window manager controls screen space
Some apps visualize non-geometric data
3
4
2.3 The Evolution of 2D Graphics Platforms
Graphics platforms evolved like software Platforms encapsulate prior custom functions
Higher abstraction automates common tasks Complexity shifts to platform layer
5
6
2.3.1 From Integer to Floating Point Coordinates
Origin top-left, x right, y down
1980s–90s raster graphics used integers
Size depends on device resolution
Apps drew shapes, bitmaps
Floating-point coords added for independence
Primitives controlled by brush, pen
Physical or abstract coordinate systems
Clock example: ellipse, polygons, lines
Improved cross-device graphics consistency
Coordinates mapped one-to-one pixels
Details in Section 2.4
7
2.3.2 Immediate-Mode versus Retained-Mode Platforms
Shift from integer to float coordinates RM updates display automatically
Two main architectures: IM and RM RM manages user interactions efficiently
IM: direct access to hardware RM inspired by Sketchpad templates
IM redraws entire scene each time RM offers UI controls with “feel”
IM valued for performance, simplicity RM popular for complex UIs
RM maintains scene graph database IM trades control for efficiency
8
9
2.3.3 Procedural versus Declarative Specification
Platforms offer two specification approaches Declarative: markup like SVG, XAML
Procedural: imperative code with APIs WPF allows both specification styles
10
11
2.3.3.1 Lowest Layer: Object-Oriented API
Core WPF layer provides functionality Core layer alone builds applications
Supports .NET and DLR languages Other layers improve productivity, collaboration
12
2.3.3.2 Middle Layer: XAML
Middle WPF layer uses XAML Supports rapid prototyping easily
Declarative syntax like HTML/XML Broadens contributor participation
13
2.3.3.3 Highest layer: Tools
Tools support graphics and UI
Highest WPF layer offers utilities
Visual editors simplify XAML creation
14
2.4 Specifying a 2D Scene Using WPF
WPF enables 2D scene creation Excludes user interface component design
Focus on shapes and visuals Explores WPF's rendering capabilities
15
2.4.1 The Structure of an XAML Application
Canvas is main drawing area.
Build analog clock in XAML.
Rendering clipped to canvas bounds.
XAML uses HTML-like hierarchy.
Canvas size set by container.
Custom elements for graphics applications.
Interactive tools explain XAML syntax.
16
2.4.2 Specifying the Scene via an Abstract Coordinate System
Scene has clock objects. Components can be hierarchical later.
Clock face is gray ellipse. Uses 2D Cartesian coordinate system.
Three distinct clock hands used. Coordinate units are abstract measurements.
Hour, minute hands are polygons. Draw order affects visual layering.
Second hand is red line. Display mapping affects appearance.
Objects are basic primitives initially. Adjust canvas for intended display.
17
18
2.4.3 The Spectrum of Coordinate-System Choices
Prefer adaptable abstract coordinates.
Physical units aid precise sizing.
Abstract ranges ease shape manipulation.
Platform ties reduce code portability.
Choose convenient coordinate systems.
Maintain form-factor display independence.
Abstract system promotes flexibility, portability.
19
2.4.4 The WPF Canvas Coordinate System
Canvas has fixed bounds.
Origin at upper-left corner.
ClipToBounds hides outside drawings.
Positive X extends rightward.
Coordinates map abstract to physical.
Positive Y extends downward.
Multiple layers render final image.
20
21
22
2.4.5 Using Display Transformations
Circle appeared small, partly hidden. Most of circle gets clipped.
Abstract coordinates mapped to canvas. Solution: use display transformation.
Circle radius set at 20. Scale coordinates by factor 4.8.
Too small for one-inch clock. Translate scene right and down.
Circle center at canvas origin. Attach transformations to canvas objects.
Only positive quadrant is visible. Order matters: scale then translate.
23
24
25
2.4.6 Creating and Using Modular Templates
Templates streamline scene construction
Transformation utilities build/adjust scene.
process.
Control templates are reusable stencils.
Modeling transformations reshape clock hands.
Templates flexibly rotate, scale, translate.
Distinct hands by unique transforms.
Hour, minute hands share template.
Display transformations position full scene.
Nonuniform scaling creates differences.
Transform order changes final result.
XAML defines polygon as template.
Modeling and display transforms combined.
26
27
28
29
30
31
32
2.5 Dynamics in 2D Graphics Using WPF
WPF supports two dynamics types.
Application maintains synchronized scene
graph.
Animation objects enable noninteractive motion.
Platform auto-updates displayed images.
Callbacks handle interactive UI events.
33
2.5.1 Dynamics via Declarative Animation
WPF enables XAML-based animations. Almost any property is animatable.
Animations defined without procedural code. Clock uses grouped transformations.
Animation elements interpolate property changes. DoubleAnimation animates rotation angles.
Specify start, end, duration values. Storyboards organize multiple animations.
Animations triggered by application events. Labs exaggerate speed for clarity.
34
2.5.2 Dynamics via Procedural Code
WPF uses XAML plus code-behind.
XAML excels at visual setup.
Code handles logic and events.
Advanced features need procedural code.
XAML builds UI, code adds behavior.
35
2.6 Supporting a Variety of Form Factors
Apps adapt to various displays. Menus may hide with expansion buttons.
Logic evaluates current form factor. Scenes adapt by scaling or panning.
Scaling controls can harm usability. Apps may mix adaptation strategies.
Use elision or layout rearranging. WPF tools aid efficient adaptation.
36
37
