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 Shapes - Path - Simple Geometry

The one hundred and twenty-fourth part of the Windows Presentation Foundation Fundamentals tutorial starts to describe the last of the WPF shapes. This article looks at the Path class, which draws simple or complex geometrical shapes.

Path and Geometry

In recent articles in the WPF tutorial we've seen the basic shape classes, Line, Rectangle and Ellipse. We've also considered the Polygon and Polyline classes, which allow you to join points to create closed or open shapes respectively. In this article we'll start to look at the final shape, which is provided by the Path class.

Path allows you to create both simple and complex shapes. Path objects include some of the same properties that we've seen in the recent shape articles, such as Stroke, StrokeThickness and Fill. In addition, each Path object has a Data property that defines the drawing using a Geometry.

Geometry is the base class for a number of subclasses that can define the outlines of shapes but not the strokes or fills. The types of geometry are varied. The simple shapes can be recreated using line, ellipse and rectangle geometry. These shapes can be combined together to create shape groups. They can also be added or subtracted from each other with combined geometry. When these options are not sufficient, you can create shapes from lines, arcs and Bézier curves.

We'll use this article and the next few instalments of the tutorial to look at Path and the available Geometry types. In this article we will concentrate on creating a path to display a straight line, a rectangle and an ellipse.

Creating a Path

To demonstrate the use of the Path class, let's examine a simple example program. Create a new WPF application in Visual Studio named, "PathDemo". Once ready, replace the XAML of the main window with the code below:

<Window x:Class="PathDemo.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="2">
            <Path.Data>
                <LineGeometry StartPoint="10 10" EndPoint="200,150"/>
            </Path.Data>
        </Path>
    </Canvas>
</Window>

Here we have a Path within a Canvas layout control. As with the other shapes that we've seen, the outline for the path is defined using the Stroke and StrokeThickness properties; we're creating a black line with a thickness of two device independent units.

The geometry for the path is described in its Data property, added using property element syntax in the example. In this case we've used an instance of LineGeometry. This allows the creation of straight lines based upon two sets of co-ordinates, defined in StartPoint and EndPoint.

This is a very simple example to show the basic XAML required to define a Path. The end result should appear similar to the image below:

WPF Path with LineGeometry

Rectangle Geometry

The second geometry we'll consider is provided by the RectangleGeometry class. It allows you to define the shape of a rectangle. Unlike the Rectangle control, you don't just provide a width and height for the shape. Instead, you set the co-ordinates for the top-left and provide the width and height.

If you are creating a rectangle geometry from code, you can define its size by setting the Rect property. This holds a value of the Rect structure, which has a large number of properties for reading and setting the position and size of the shape. In XAML, you can simply provide the co-ordinates and dimensions in a string literal.

To demonstrate, replace the XAML for the Path element with the code below. This changes the geometry to draw a rectangle and adds a Fill value.

<Path Stroke="Black" StrokeThickness="2" Fill="Coral">
    <Path.Data>
        <RectangleGeometry Rect="10,10 200,140"/>
    </Path.Data>
</Path>

As the rectangle's top-left corner is not set to the co-ordinates, (0,0), there is a gap between the edge of the window and the shape:

WPF Path with RectangleGeometry

Ellipse Geometry

The third type of geometry allows you to define an ellipse, similar to that of the Ellipse control. However, rather than specifying a width and height for the shape, you set co-ordinates for the midpoint of the ellipse, using the Center property, and specify separate X and Y radiuses for using RadiusX and RadiusY.

To demonstrate, replace the RectangleGeometry with element the following:

<EllipseGeometry Center="120 80" RadiusX="90" RadiusY="50"/>

The resultant shape appears as shown below:

WPF Path with EllipseGeometry

4 January 2015