WPF 2D Graphics

Features of 2D Graphics

  1. Vector Graphics supportScales based on Screen specific resolution without loss of quality as opposed to fixed size Raster graphics
  2. Hardware acceleration – Takes advantage of graphics hardware to minimize CPU usage; Utilizes GPU on Video Card implementing Direct X 7 or later  
  3. Resolution and Device independent graphics – Device independent pixel automatically scales with dots per inch setting
  4. Minimal screen redraw
  5. Simplifies Graphics programming – manages screen graph, No worry about screen processing, Rendering loops and bilinear interpolation.
  6. Hit testing support, Integrated animation system, Full alpha compositing support
  7. Improved Precision – Uses doubles than floats for coordinates even for Transformations and Opacities; Floating point logical pixel system;   
  8. Supports wide color gamut(scRGB) ; Supports 32 bit ARGB colors
  9. Integrated support for managing input from different color spaces
  10. Uses Direct 3D for Vector based Rendering

Windows Forms used different services like

  1. GDI/GDI+ for 2D graphics
  2. UI services/user32 for UI
  3. Direct 3D for 3D Graphics 

WPF unites all these services.

2D Shapes

Shape is a UIElement that draws a shape in screen and can be used inside Panel and other controls. The different shapes available are Ellipse, Line, Path, Polygon, Polyline, Rectangle. The properties of Shape are

  1. Stroke – How Shape’s outline is painted
  2. StrokeThickness – thickness of Shape’s outline
  3. Fill – How Shape’s interior is painted
  4. Coordinates and Vertices

Canvas Panel supports absolute Positioning and is a good choice for Complex drawings.

Line class draws a line between two points. Settings Line’s Fill property does nothing.

Ellipse is defined by Width and Height.

Path class draws curves and complex shapes, which are described by Geometry objects. Create a Geometry and set it to Path’s data property. LineGeometry, RectangleGeometry and EllipseGeometry are simple shapes. Complex shapes can be created using PathGeometry class.

PathGeometry class is composed of many PathFigure objects, each describing a different shape. Each PathFigure object contains many PathSegment objects, each describing a connected portion of a figure or shape. The different segments are LineSegment, BezierSegment and ArcSegment.

Brush objects are used to paint a Shape’s stroke and Fill properties, which contain a hexadecimal color properties, denoting the color of brush.

Line, Path, Polygon, Polyline and Rectangle have Stretch property, which determines how a Shape’s object’s contents is stretched to fill the shape of Shape’s object layout space, the amount of space the Space is allocated by the layout system, through Height, Weight, Horizontal Alignment and Vertical Alignment. Stretch property can be None, Fill (fills with different aspect ratio), Uniform (scales with same aspect ratio) and Uniform to Fill (fills with aspect ratio). When the contents are stretched, the object outline is painted after stretching.

Shapes can be transformed using Transform class which can be RotateTransform (Rotation), ScaleTransform (scale), SkewTransform (skew) and TranslateTransform (translation). RotateTransform can be specified using Angle and a point with X and Y values about which the element needs to rotated.


A Brush paints the Visible objects in a screen with solid colors to complex sets of patterns and images. The different brushes are

  1. SolidColorBrush – Paints an area with solid color
  2. LinearGradientBrush – Paints an area with Linear Gradient; Linear Gradient blends two or more colors across a line, gradient axis. GradientStops specifies the colors in the gradient and their positions.  
  3. RadialGradientBrush – Paints an area with Radial Gradient; Radial Gradient blends two or more colors across a circle. GradientStops specifies the colors in the gradient and their postitions.
  4. ImageBrush – Paints an area with ImageSource
  5. DrawingBrush – Paints an area with Drawing; Drawing contains shapes, images, text and media;
  6. VisualBrush – Paints an area with Visual object like Button, Page, MediaElement; Enables to project content from one portion of application into another area; creates Reflection effects and magnifying portions of screen;

The Brush properties for different visual objects are:

  1. Border – BorderBrush, Background
  2. Control – Background, Foreground
  3. Panel – Background
  4. Pen – Brush
  5. Shape – Fill, Stoke
  6. Textblock – Background

Brushes contain Opacity property that makes Brushes transparent (0) or partially transparent or opaque (1); Brushes contain Opacity property and color inside Brushes also contain Opacity property. The final Opacity is arrived by multiplying Opacity values of Brush and color.

Brush content can be rotated, scaled, skewed and translated using Transform objects.

Brushes are animatable objects and can be animated.

Brushes inherit from Freezable class and hence can be declared as resources, shared among multiple objects and cloned.

All Brushes except Visual Brush can be made Readonly to improve performance.

Drawing objects

Drawing object describes the visible content like shape, bitmap, video or text. The different drawing objects are

  1. GeometryDrawing – Draws a shape
  2. ImageDrawing – Draws an image
  3. GlyphRunDrawing – Draws text
  4. VideoDrawing – Plays audio or video text
  5. DrawingGroup – Draws other drawings; Combines many drawings into a single composite drawing

Drawing objects are created in different ways like

  1. Display an image using DrawingImage and Image Control
  2. Paint an object with DrawingBrush
  3. Describe the Appearance of DrawingVisual
  4. Enumerate the contents of a Visual

They are of type Freezable and lack support for Layout System, input and Focus and hence in case of Performance need and for low level drawing.

Check out more on http://msdn.microsoft.com/en-us/library/ms751619.aspx


A Transform defines how to map or transform coordinates from one coordinate space to other coordinate space. This mapping is defined by Transformation Matrix, a collection of three rows with three columns of Double values.  By manipulating matrix values, an object can be rotated, scaled, skewed and translated/moved.

The different Transforms are

  1. RotateTransform – rotates an element by specified angle
  2. ScaleTransform – scales an element by specified X and Y amounts
  3. SkewTransform – skews an element by specified AngleX and AngleY amounts
  4. TranslateTransform – translates an element by specified X and Y amounts.

TransformGroup groups multiple TransformGroup objects into a single Transform which can be applied

MatrixTransform creates custom transforms which are not provided by other Transform classes by manipulating a matrix.

Transformation properties of different objects are as follows:

  1. Brush – Transform, RelativeTransform
  2. ContainerVisual – Transform
  3. DrawingGroup – Transform
  4. FrameworkElement – RenderTransform, Layout Transform
  5. Geometry – Transform
  6. TextEffect – Transform
  7. UIElement – RenderTransform

Layout Tranform is the transform applied before the layout pass. After appllying the transform, the layout system processes the transform size and position of the element.

Render Transform is the transform that modifies the appearance of the element after the layout pass is complete.

Check out more on http://msdn.microsoft.com/en-us/library/ms750596.aspx


MSDN Documentation

  1. WPF Graphics Rendering Overview
  2. Graphics
  3. Visual Layer Programming
  4. Graphics overview

MSDN Articles

  1. Vector Graphics and WPF Shape Class


  1. WPF Soup to Nuts (Part 11 of 18): 2-D Graphics (Level 200)
About these ads
This entry was posted in WPF. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s