BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Base Classes - Shape

The one hundred and thirty-fourth part of the Windows Presentation Foundation Fundamentals tutorial looks at the base class for the shape controls. The Shape class provides members that control the fill and the stroke used when rendering two-dimensional shapes.

Shape

In recent articles in the WPF tutorial we've looked at the shape classes provided by WPF. These allow you to draw two-dimensional objects, from simple lines, rectangles, ellipses and polygons, to complex shapes made by grouping or combining other shapes or building paths from lines, arcs and Bézier curves. All of the shapes that we've considered use types that inherit from a shared base class, Shape.

The Shape class includes several properties that we've already examined in earlier articles. These include Fill, which allows you to set the brush used to fill a shape, and Stroke and StrokeThickness, which determine the colour and width of a shape's outline. In this article will look at other Shape properties, which allow you to modify the style of the outline. With these members, you can create dotted or dashed lines, add end caps to lines and control the way that corners are rendered.

To begin, create a new WPF application in Visual Studio. Name the new solution, "ShapeDemo". Once prepared, replace the XAML in the main window with the following code:

<Window x:Class="ShapeDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Polygon Demo" Height="200" Width="250">
    <Canvas>
        <Polygon Stroke="Black" StrokeThickness="10" Fill="LightPink"
                 Points="20,20 200,20 200,150"/>
    </Canvas>
</Window>

The above XAML generates a window containing a simple, filled triangle:

WPF polygon

Dotted and Dashed Lines

The first Shape property that we'll look at allows you to modify the outline of the shape to make it dotted or dashed. Rather than allowing a selection from several styles, the StrokeDashArray property lets you create any combination of dash and gap sizes, defined in an array of doubles.

The first number in the array specifies the length of the first dash. The length is equal to the product of the value and the thickness of the stroke. For example, with a stroke width of ten and a length of three, the dash will be thirty device independent units in length.

Subsequent values in the array specify the length of the gaps and dashes in a repeating pattern. Once enough dashes have been drawn to use all of the array's values, the size of the next element is based upon the first value in the list. If there are an odd number of items in the array, this will be a gap. This means that you can create a simple dotted or dashed line with a single number in the array.

Update the Polygon in the example code as shown below:

<Polygon Stroke="Black" StrokeThickness="10" Fill="LightPink"
         Points="20,20 200,20 200,150"
         StrokeDashArray="3,1"/>

The shape now has an outline made of dashes that are three times as long as the gaps between them.

WPF polygon with dashed line

Two properties permit you to modify the dashes in the outline when a StrokeDashArray is applied. The first, StrokeDashOffset, lets you move the starting point for the dashes. You set this to a number to offset the position of the initial dash. The value is a multiple of the stroke thickness, similar to the dash sizes.

StrokeDashCap changes the shape of the individual dashes. You set this to one of the values defined in the PenLineCap enumeration. Four options are available:

  • Flat. The default option ends each dash with a straight line that is perpendicular to the direction of the dash.
  • Square. The square option is similar to Flat. It draws a square with edges that are the same length as the line's thickness. The squares are centered on the midpoint of the line's ends. Effectively, this extends each dash by half of the stroke thickness at each end.
  • Round. This option is similar to Square, except that it draws a circle at the ends of each dash. This gives rounded ends to the lines.
  • Triangle. The Triangle option adds an isosceles triangle to each dash end point, giving a set of pointed ends.

Let's modify the polygon to give rounded ends to each of the dashes and to offset the starting point of the dash array:

<Polygon Stroke="Black" StrokeThickness="10" Fill="LightPink"
         Points="20,20 200,20 200,150"
         StrokeDashArray="3,2"
         StrokeDashOffset="1"
         StrokeDashCap="Round"/>

The results are shown below. Compare this to the previous image to see the changes.

WPF polygon with offset dashed line with round dash caps

8 February 2015