WPF Path in XAML

The Path object represents a path shape and draws a path. The Path object draws both closed and open paths. A closed path is a shape that has same start and end points and an open path is a shape that has different start and end points.

The Fill property fills the interior of an ellipse. The Stroke property sets the color and StrokeThickness represents the width of the outer line of an ellipse.

The Data property of the Path object defines a shape or a collection of shapes in form of Geometry.

The following code snippet creates an arc shape using a path.

<Path Stroke="Black" StrokeThickness="4" 
        Data="M 80,200 A 100,50 45 1 0 100,50" />

The output looks like Figure 8.

Figure 8

Before I discuss paths any further, we need to understand the Geometry class, its members, and its related classes.

Understanding Geometry

The Geometry class that defines the geometry of a shape plays a vital role in creating paths. This class cannot be used directly but used in the forms of its derived classes LineGeometry, RectangleGeometry, EllipseGeometry, GroupGeometry, PathGeometry, CombinedGeometry, and StreamGeometry. These geometry objects can be used for clipping, hit-testing, and rending complex shapes.

The LineGeometry class represents the geometry of a line. The StartPoint and EndPoint properties of the LineGeometry class define the start and end points of a line. The following code snippet creates geometry of a line.

<LineGeometry StartPoint="20,50" EndPoint="200,50" />

The RectangleGeometry class represents the geometry of a rectangle. The Rect property of the RectangleGeomerty defines the starting points, width, and height of a rectangle. The following code snippet creates geometry of a rectangle.

<RectangleGeometry Rect="80,167 150 30"/>

The EllipseGeometry class represents the geometry of an ellipse. The Center property of the EllipseGeomerty defines the center of an ellipse. The RadiusX and RadiusY define the width and height of an ellipse. The following code snippet creates geometry of an ellipse.

<EllipseGeometry Center="80,150" RadiusX="50" RadiusY="50" />

The GeometryGroup is creates a composite geometry that is a combination of multiple Geometry objects.

The code listed in Listing 8 creates a GeometryGroup with three geometry shapes â€" a line, an ellipse, and a rectangle and sets the Data property of a path.

<Path Stroke="Black" StrokeThickness="3" Fill="Blue" >
    <Path.Data>
        <GeometryGroup >
            <LineGeometry StartPoint="20,200" EndPoint="300,200" />
            <EllipseGeometry Center="80,150" RadiusX="50" RadiusY="50" />
            <RectangleGeometry Rect="80,167 150 30"/>
        </GeometryGroup>
    </Path.Data>
</Path>

Listing 8

The output of Listing 8 looks like Figure 9.

Figure 9. A composite shape

The FillRule property of the GeometryGroup class specifies how the intersecting areas of geometry objects in a GeometryGroup are combined. It has two values  EvenOdd and NonZero.  The default value of the FillRule is EvenOdd. In this case, the intersecting area of two shapes is not filled. In case of NonZero, the interesting area of two shapes is filled. By setting the FillRule to NonZero generates Figure 10.

Figure 10. A composite shape with NonZero FillRule

The code listed in Listing 9 creates Figure 9 dynamically. As you can see from Listing 9, we create a LineGeometry, an EllipseGeometry, and a RectangleGeometry and then we create a GroupGeometry and add all three geometries to the GroupGeometry. After that, we simply set the Data property of Path to the GroupGeometry.

/// <summary>
/// Creates a blue path with black stroke
/// </summary>
public void CreateAPath()
{
    // Create a blue and a black Brush
    SolidColorBrush blueBrush = new SolidColorBrush();
    blueBrush.Color = Colors.Blue;
    SolidColorBrush blackBrush = new SolidColorBrush();
    blackBrush.Color = Colors.Black;

    // Create a Path with black brush and blue fill
    Path bluePath = new Path();
    bluePath.Stroke = blackBrush;
    bluePath.StrokeThickness = 3;
    bluePath.Fill = blueBrush;

    // Create a line geometry
    LineGeometry blackLineGeometry = new LineGeometry();
    blackLineGeometry.StartPoint = new Point(20, 200);
    blackLineGeometry.EndPoint = new Point(300, 200);

    // Create an ellipse geometry
    EllipseGeometry blackEllipseGeometry = new EllipseGeometry();
    blackEllipseGeometry.Center = new Point(80, 150);
    blackEllipseGeometry.RadiusX = 50;
    blackEllipseGeometry.RadiusY = 50;

    // Create a rectangle geometry
    RectangleGeometry blackRectGeometry = new RectangleGeometry();
    Rect rct = new Rect();
    rct.X = 80;
    rct.Y = 167;
    rct.Width = 150;
    rct.Height = 30;
    blackRectGeometry.Rect = rct;

    // Add all the geometries to a GeometryGroup.
    GeometryGroup blueGeometryGroup = new GeometryGroup();
    blueGeometryGroup.Children.Add(blackLineGeometry);
    blueGeometryGroup.Children.Add(blackEllipseGeometry);
    blueGeometryGroup.Children.Add(blackRectGeometry);

    // Set Path.Data
    bluePath.Data = blueGeometryGroup;

    LayoutRoot.Children.Add(bluePath);
}

Listing 9

If we need to generate a single geometry, we do not need to use a GeometryGroup. We can simply set a geometry as the Data of the Path. The following code snippet sets an EllipseGeometry as the Data property of a Path.

<Path Stroke="Black" StrokeThickness="3" Fill="Blue" >
    <Path.Data>            
            <EllipseGeometry Center="80,150" RadiusX="50" RadiusY="50" />
   </Path.Data>
</Path>