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.

Line Caps

When your shapes are not closed, you can add end caps to the lines. These are similar to dash caps but can be set individually for the start and end points using StrokeStartLineCap and StrokeEndLineCap respectively.

To demonstrate, replace the Polygon with a Polyline. Use the XAML below to create a line with a rounded start cap and a triangular end cap.

<Polyline Stroke="Black" StrokeThickness="10"
          Points="20,20 200,20 200,150 100,75"
          StrokeStartLineCap="Round"
          StrokeEndLineCap="Triangle"/>

The results are shown below. Note the different cap shapes.

WPF polyline with line end caps

Line Joins

The last way in which you may modify the stroke of a shape is to change the way that the joins are drawn. Where two lines meet at an angle, the corner is rendered according to the StrokeLineJoin property, which is set to a value from the PenLineJoin enumeration. Three options are available:

  • Miter. The default option. Where the two lines intersect, a simple pointed corner is used. You can see this in the previous image.
  • Bevel. With this option, each join is shortened with a bevelled corner.
  • Round. The third option rounds the corners where lines connect.

Let's modify the Polyline to use bevelled corners.

<Polyline Stroke="Black" StrokeThickness="10"
          Points="20,20 200,20 200,150 100,75"
          StrokeLineJoin="Bevel"/>

You can see the results in the image below:

WPF polyline with bevelled line joins

It is possible to combine the miter and bevel options for a shape's corners. When the StrokeLineJoin property is set to Miter, you can also set the StrokeMiterLimit to a double-precision floating-point value. This value determines the maximum length for a miter join. If the point extends too far it will be bevelled instead. The position of the bevel is related to the value. Larger numbers give a longer corner before the bevel begins or may eliminate the bevel altogether.

To demonstrate, replace the single Polyline with the following two shapes.

<Polyline Stroke="Black" StrokeThickness="10"
          Points="20,20 100,20 100,130 50,75"
          StrokeLineJoin="Miter"
          StrokeMiterLimit="1"/>
<Polyline Stroke="Black" StrokeThickness="10"
          Points="120,20 200,20 200,130 150,75"
          StrokeLineJoin="Miter"
          StrokeMiterLimit="3"/>

The first Polyline, which appears at the left of the window, has a smaller StrokeMiterLimit than the second. This means that the leftmost shape is more likely to include bevelled corners, or will have larger bevels. Compare the two shapes in the image below to see the differences.

WPF polyline with limited mitres

8 February 2015