.NET 4.0+

WPF Shapes - Path - Path Markup Syntax

by Richard Carr, published at http://www.blackwasp.co.uk/WPFPathMarkupsyntax.aspx

The one hundred and thirty-second part of the Windows Presentation Foundation Fundamentals tutorial completes the examination of Paths. This article describes path markup syntax, which provides a shorter way to describe complex paths of lines, arcs and Bézier curves.

Elliptical Arcs

You can use the "A" command to include an elliptical arc in a figure. This uses the same rules as the ArcSegment class, so I won't repeat them here. The markup command requires five parameters. The first is a pair of values that define the width and height of the ellipse that the arc follows. The second is the angle of rotation to apply to the ellipse before its edge is traced. The third value allows you to decide whether to trace the small arc or the large version. Set it to zero or one respectively. The fourth parameter sets the sweep direction. A zero indicates anticlockwise and one is clockwise. Finally, you must specify the location of the end point of the arc.

Let's create a second figure containing an arc. Modify the Path's Data property as follows:

Data="M50,50 L100,100 L150,50 H200 V100 Z
      M50,100 A50,25 45 1 0 100,150"

The second figure's markup begins with an "M" command to set the start position. The arc is defined afterwards. This markup uses an ellipse with a width of 50 device independent units and a height of 25. The ellipse is rotated by 45 degrees before the large, anticlockwise arc that ends at (100,150) is plotted. The results are shown below:

Bézier Curves

WPF supports two types of Bézier curve. A quadratic Bézier has a single control point, or tangent point, that determines the shape of a smooth curve between two points. A cubic Bézier curve has two tangent points, allowing more complex curves. Both can be created using path markup syntax.

To create a quadratic Bézier curve, you use the "Q" command and provide two pairs of co-ordinates. The first pair locates the control point and the second pair sets the end position for the line. For a cubic Bézier curve, use the "C" command. This requires three pairs of co-ordinates. The first and second are the tangent points. The third is the end point.

Update the Data property as shown below. This adds two further figures that show a quadratic and a cubic Bézier.

Data="M50,50 L100,100 L150,50 H200 V100 Z
      M50,100 A50,25 45 1 0 100,150
      M50,200 Q30,260 100,250
      M130,250 C120,100 170,350 200,200"

The two new figures are shown at the bottom of the window.

Smooth Bézier Curves

Sometimes you will want to combine a series of Bézier curves, with no sharp angles at the connection points. You can do so with smooth Béziers. A smooth quadratic Bézier curve is created with the "T" command and the co-ordinates for the end of the line. The tangent point for the curve is automatically calculated by mirroring the control point from the previous segment, ensuring a smooth join.

Update the Data property to add a new figure made from two quadratic Bézier curves. The first includes a control point, the second does not.

Data="M50,50 L100,100 L150,50 H200 V100 Z
      M50,100 A50,25 45 1 0 100,150
      M50,200 Q30,260 100,250
      M130,250 C120,100 170,350 200,200
      M130,120 Q130,180 180,140 T200,160"

You can see the combination of curves at the middle-right of the window below:

For smooth cubic Bézier curves, use the "S" command. The first tangent point is calculated automatically. You specify the second control point and the end point using two co-ordinate pairs.

Let's add another figure, constructed from three cubic Bézier curves, two of which are smooth:

Data="M50,50 L100,100 L150,50 H200 V100 Z
    M50,100 A50,25 45 1 0 100,150
    M50,200 Q30,260 100,250
    M130,250 C120,100 170,350 200,200
    M130,120 Q130,180 180,140 T200,160
    M250,30 C300,70 200,70 250,110 S200,110 250,150 S200,180 250,250"

The new figure creates a wavy line at the right of the window: