1. Brown Bag Seminar Summer 2007 WPF-Visuals
By Kester Marrain

2. 2D Graphics Three layers of 2D Graphics:
Shapes
Drawings
Drawing Instructions
All 2D operations boils down to:
A Geometry
A Brush
A Pen

3. Principles of 2D
Composite Rendering - allow elements to paint on top of each other.
Resolution Independence – uses logical pixels, which equate to 1/96 of an inch.
Pixel Snapping – render with the logical system but when translated to the output device, lines are made to fall exactly on pixels.

4. Pixel Snapping Illustration

5. Transforms Three most common transforms are:
TranslateTransform
ScaleTransform
RotateTransform
Transforms can also be combined.

6. Geometry
Are the basic building blocks of all 2D graphics in WPF.

7. Geometry (continued)

8. Geometry (continued)
Two final geometries are the combining geometries:
CombineGeometry
GeometryGroup

9. Color
sRGB (standard RGB) – is the native color model for most monitors, and it is the default color model for the Web.
Allows for 3 channels of data, each having 8 bits.
scRGB – is a variable size floating-point encoding for color.
All the encoding support an alpha field.

10. Color

11. Brushes WPF has six brushes: SolidColorBrush LinearGradientBrush
RadialGradientBrush
ImageBrush
DrawingBrush
VisualBrush

12. Gradient Brush

13. Gradient Brush

14. Gradient Brush

15. Gradient Brush

16. Tiling Brush
ImageBrush, DrawingBrush and VisualBrush are all tiling brushes, they are designed to stretch, or repeat a pattern.
Three operations are used with tiling brushes:
Selecting the content to tile (Viewbox and ViewboxUnits).
Scaling the content (Viewport, ViewportUnits, AlignmentX, and AlignmentY).
Filing the Area with the viewport.

17. Tiling Brush

18. Visual Brush
Visual brushes accept any control and uses it as its source.

19. Pens
Pens are used to outline shapes.

20. Pens

21. Pens

22. Drawings
Drawings are the API for directly talking to the low-level composition engine.
Uses a graph structure which allows a single drawing to appear in multiple places.

23. Shapes
Shapes bring drawing into the control world.

24. Shape (continued)

25. Image
Anything derived from ImageSource in WPF is classified as an Image.
Images have a natural size and metadata associated with it.
WPF has no formal notion of a vector image file format.
However, DrawingImage type offers the ability to use any drawing as an image.

26. Basic Imaging Image can be stretched using one of four options:
None: Image is displayed with its natural size.
Fill: The image is scaled to fit entire space.
Uniform: Image made to fit one direction or the other maintaining aspect ratio.
UniformToFill: The image is made to fit the entire space.

27. Basic Imaging (continued)

28. Image Metadata
Inclusion of all sorts of information about photographs taken with a digital camera.
Every ImageSource object has a metadata property.
Metadata has two views:
A simplified view of well-known properties
And a query API (GetQuery).

29. Image Metadata (continued)

30. Image Metadata (continued)

31. Image Metadata (continued)

32. Creating Images
To programmatically generate a raster image, we can use either RenderTargetBitmap or WritableBitmap.
RenderTargetBitmap allows rendering any visible display to a fixed-size raster image.

33. Creating Images

34. Saving Images

35. Opacity
Because opacity composition requires reading of previously rendered display, large portions of an application may be forced into software rendering.

36. Opacity (continued)

37. Opacity Mask Applies opacity to a tree of visuals.
Any brush can be used to apply opacity to a set of visuals.

38. Opacity Mask (continued)

39. Opacity Mask (continued)

40. Opacity Mask (continued)

41. Bitmap Effects
The ability to perform pixel-by-pixel operations on the output of visuals is usually supported by the BitmapEffect property on UIElement.

42. Bitmap Effects (continued)

43. 3D Graphics Visual3D is the 3D equivalent of Visuals.
Model3D is the equivalent of Drawing.
3D lacks a control framework.
3D inherently has four basic concepts:
Models
Materials
Lights
Camera

44. 3D Graphics (continued)
Models and materials have simple corollaries in the 2D world: Drawings and Brushes.
Geometry3DModel represents a 3D version of a geometry. It is exactly like GeometryDrawing in 2D.

45. 3D Graphics (continued)

46. 3D Graphics (continued)

47. 3D Graphics (continued)

48. Principles of 3D - Models
All 3D objects eventually are decomposed to a set of triangles.
All texts, shapes, controls, drawings – everything is rendered as 3D triangles.
For all 2D constructs the decomposition is done behind the scenes.
The set of 3D triangles that make up a model is called a mesh.
GeometryModel3D and MeshGeometry3D go hand in hand for creating a model.

49. Principles of 3D - Models

50. Principles of 3D – Models (cont)

51. Principles of 3D – Models (cont)

52. Principles of 3D – Models (cont)

53. Principles of 3D – Materials
Materials are a combination of a brush with a behavior with respect to light.
Diffuse materials diffuse light, which makes the object look flat.
Specular materials reflect light, making the object shiny.
Emissive materials emit light.

54. Principles of 3D – Materials (cont)

55. Principles of 3D – Materials (cont)

56. Principles of 3D – Lights
WPF supports several lights:
PointLight – works like an exposed light bulb.
SpotLight – works like a flash light.
DirectionalLight – a plane of light is projected in one direction.
AmbientLight – projects light from every direction to every direction.
Properly lighting a scene requires a combination of lights.

57. Principles of 3D – Lights

58. Principles of 3D – Cameras
The camera represents the eye of the user looking at the scene.
Three types of cameras:
PerspectiveCamera
MatrixCamera
OrthographicCamera
PerspectiveCamera displays the scene “naturally” (objects farther away are smaller).

59. Transforms
There are several models to define rotation in a 3D space, but the easiest one to understand is the AxisAngleRotation3D.
To define a rotation, we need to define a vector (axis) and an angle around that vector (angle).

60. Transforms (continued)

61. Documents and Text Everything goes through the 3D pipeline.
Text elements belong to one of two families:
In-Line Elements
Block Elements
FlowDocuments accept only block elements.

62. Documents and Text (continued)

63. Documents and Text (continued)

64. Documents and Text (continued)
There are two ways to print a document:
By sending the instructions directly to the printer.
By creating a fixed-format document that contains the same information. The XML Paper Specification (XPS) serves this purpose.

65. Documents and Text - Font
WPF has no Font class, but has a set of attributes that when bundled together can be seen as defining a font, such as:
Font-Family
Font-Size
Font-Stretch
Font-Style
Font-Weight

66. Text Layout - Paragraphs
Paragraphs supports a box-model for layout.
Each block element has: Margin, Padding, and BorderThickness properties that control the size of the element.

67. Text-Layout – Paragraph (cont)

68. Text Layout - List
List is a block element that contains ListItem objects.
ListItem can contains only block elements and not text directly, which means that each ListItem contains one or more paragraphs.

69. Text Layout – List (continued)

70. Text Layout – List (continued)

71. Text Layout - Tables
Tables can contain only TableRowGroup objects, TableRowGroup object can contain only TableRow objects, TableRow objects can contain only TableCell objects, and TableCell is a block container so it can contain one or more paragraphs.

72. Text Layout – Tables (cont)

73. Text Layout – Tables (cont)

74. Text Layout – Tables (cont)

75. Text Layout – Figures and Floaters
Figures can span columns and can be positioned relative to the page on which they’re placed.
Floaters are like floating boxes that accompanying the content to which they are anchored.

76. Text Layout – Figures and Floaters

77. Text Layout – Figures and Floaters

78. Columns and Page-Level Formatting
FlowDocument offers a set of properties to control how columns are applied and pages are formatted.

79. Advanced Typography
WPF has an entirely new font engine, and a world class page layout engine has been integrated in the platform.
Some new features are hyphenation, justification, etc.

80. Animation – The Hard Way
The modification of a value based on time.

81. Animation – The Hard Way (continued)

82. Animation – The WPF Way
Animation can be made by deriving from the AnimationTimeLine class.

83. Animation – Code that uses Animation

84. Animation – Predefined in WPF
WPF has predefined animations for all of the common data types.
Thus the animation previous seen could have been done using:

85. StoryBoards
StoryBoards are conceptually like a movie storyboard, used in Hollywood.
We can write all of the various actions we want and then we yell “Action”, and everything happens in order.

86. StoryBoards (continued)

87. StoryBoard (continued)

88. StoryBoard (continued)

89. Triggers

90. Triggers (continued)

91. Time and TimeLine

92. Defining an Animation Has a starting point
A number of intermediate points
What happens when the end is reached
FillBehavior
RepeatBeahavior
AutoReverse

93. Animation Integration
Any property of any value (only properties implemented by the DependencyProperty system) type can be animated

94. Animation – With Control Templates
Animations can be embedded into controls.

95. Animation – With Text
Issue – Text cannot be laid out character by character, so we can’t simply break text up into character size Span elements.
WPF supports character by character layout with the help of a text feature: TextEffects.

96. Media A stream of timed data is what is considered media in WPF.
Three basic objects: timeline, clock, and player, are common to any media scenario.
Audio and Video shares a common implementation: MediaTimeline.

97. Media - Audio
To play an audio file, first we need to create an instance of MediaTimeline and set the source property to point at the media.

98. Media – Audio (MediaPlayer)

99. Media - Audio

100. Media - Video

101. Media – Video (continued)

102. Media – Video (continued)