Brown Bag Seminar Summer 2007 WPF-Visuals By Kester Marrain

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

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.

Pixel Snapping Illustration

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

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

Geometry (continued)

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

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.

Color

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

Gradient Brush

Gradient Brush

Gradient Brush

Gradient Brush

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.

Tiling Brush

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

Pens Pens are used to outline shapes.

Pens

Pens

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.

Shapes Shapes bring drawing into the control world.

Shape (continued)

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.

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.

Basic Imaging (continued)

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

Image Metadata (continued)

Image Metadata (continued)

Image Metadata (continued)

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.

Creating Images

Saving Images

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

Opacity (continued)

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

Opacity Mask (continued)

Opacity Mask (continued)

Opacity Mask (continued)

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

Bitmap Effects (continued)

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

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.

3D Graphics (continued)

3D Graphics (continued)

3D Graphics (continued)

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.

Principles of 3D - Models

Principles of 3D – Models (cont)

Principles of 3D – Models (cont)

Principles of 3D – Models (cont)

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.

Principles of 3D – Materials (cont)

Principles of 3D – Materials (cont)

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.

Principles of 3D – Lights

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

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

Transforms (continued)

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.

Documents and Text (continued)

Documents and Text (continued)

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.

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

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.

Text-Layout – Paragraph (cont)

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.

Text Layout – List (continued)

Text Layout – List (continued)

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.

Text Layout – Tables (cont)

Text Layout – Tables (cont)

Text Layout – Tables (cont)

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.

Text Layout – Figures and Floaters

Text Layout – Figures and Floaters

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

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.

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

Animation – The Hard Way (continued)

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

Animation – Code that uses Animation

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:

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.

StoryBoards (continued)

StoryBoard (continued)

StoryBoard (continued)

Triggers

Triggers (continued)

Time and TimeLine

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

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

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

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.

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.

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.

Media – Audio (MediaPlayer)

Media - Audio

Media - Video

Media – Video (continued)

Media – Video (continued)