.NET 4.0+

WPF Shapes - Path - Path Geometry

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

The one hundred and twenty-seventh part of the Windows Presentation Foundation Fundamentals tutorial starts to look at path geometry. This provides the most flexible way to draw open or closed shapes. However, it is the most complex option.

Path Geometry

Often the shapes and geometry options that we've seen so far in the WPF tutorial do not allow you to create the designs you need. When all other options are insufficient, you can use Path objects that hold path geometries. A path geometry defines the outline of one or more open or closed figures, each a series of connected lines, arcs and Bézier curves.

The PathGeometry class holds a collection of figures, each held as a PathFigure. A figure is an open or closed shape, defined as a series of segments using classes that inherit from PathSegment. Each segment defines a line, arc or curve that starts at the initial co-ordinates of the figure or at the end point of the previous segment. This configuration allows a single geometry to include many separate or overlapping shapes.

To demonstrate, we'll look at several examples. Start by creating a new WPF application in Visual Studio named, "PathGeometryDemo". Once the solution is prepared, replace the XAML in the main window with the code below:

<Window x:Class="PathGeometryDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF Path Demo"
        Height="200" Width="250">
    <Canvas>
        <Path Stroke="Black" StrokeThickness="5" Fill="Goldenrod">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="100,50" IsClosed="True">
                            <LineSegment Point="140,60"/>
                            <LineSegment Point="150,100"/>
                            <LineSegment Point="125,120"/>
                            <LineSegment Point="90,110"/>
                            <LineSegment Point="80,80"/>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>
</Window>

This XAML uses a relatively simple path geometry to draw a shape. The Path element defines the colours and stroke thickness for the entire shape, as we've seen earlier in the tutorial. The interesting part is the PathGeometry element. You can see that this includes a Figures property, which holds a single PathFigure.

The example PathFigure object has two properties set. StartPoint defines the starting co-ordinates for the shape, using device independent units. IsClosed is a Boolean property. It's set to true here to indicate that the shape should be closed by joining the final position to the starting point.

Within the PathFigure we have a collection of segments. For simplicity, we'll only use LineSegment objects in this article. Each defines a straight line. The first line begins at the start point defined in its parent figure and ends at the co-ordinates in the Point property. Each subsequent segment draws a line from the previous segment's end point to the position specified in its Point property.

The end result is a six-sided shape, shown below:

Using Multiple Figures

To add extra figures to a path geometry you define them within the Figures element. Each adds an extra shape within the overall geometry. To show this, replace the PathGeometry with the code below. This adds two further figures.

<PathGeometry>
    <PathGeometry.Figures>
        <PathFigure StartPoint="100,50" IsClosed="True">
            <LineSegment Point="140,60"/>
            <LineSegment Point="150,100"/>
            <LineSegment Point="125,120"/>
            <LineSegment Point="90,110"/>
            <LineSegment Point="80,80"/>
        </PathFigure>
        <PathFigure StartPoint="20,40" IsClosed="True">
            <LineSegment Point="70,15"/>
            <LineSegment Point="80,30"/>
            <LineSegment Point="65,70"/>
            <LineSegment Point="80,115"/>
            <LineSegment Point="10,80"/>
        </PathFigure>
        <PathFigure StartPoint="140,40" IsClosed="True">
            <LineSegment Point="170,50"/>
            <LineSegment Point="180,90"/>
            <LineSegment Point="180,120"/>
            <LineSegment Point="140,150"/>
            <LineSegment Point="130,130"/>
            <LineSegment Point="160,100"/>
        </PathFigure>
    </PathGeometry.Figures>
</PathGeometry>

The program now draws three six-sided figures. These act as a single item when transformed or when effects are applied.