Vector Graphics : The Versatile PathGeometry

LineGeometry, RectangleGeometry, EllipseGeometry, GeometryGroup—those are all convenient special cases of PathGeometry, certainly the most versatile of the Geometry derivatives. With Path and PathGeometry you can perform any vector graphics job that Silverlight allows.

PathGeometry defines just two properties of its own: the familiar FillRule and a property named Figures of type PathFigureCollection, a collection of PathFigure objects.

Conceptually, a PathFigure is a series of connected lines and curves. The key word here is connected. The PathFigure starts at a particular point, indicated by the StartPoint property, and then the PathFigure continues in a series of connected segments.

For these connected segments, PathFigure defines a property named Segments of type PathSegmentCollection, a collection of PathSegment objects. PathSegment is an abstract class, as shown here:

Object
       DependencyObject (abstract)
              PathSegment (abstract)
                     LineSegment (sealed)
                     PolyLineSegment (sealed)
                     ArcSegment (sealed)
                     QuadraticBezierSegment (sealed)
                     PolyQuadraticBezierSegment (sealed)
                     BezierSegment (sealed)
                     PolyQuadraticBezierSegment (sealed)

The PathFigure indicates a StartPoint. The first PathSegment object in the Segments collection continues from that point. The next PathSegment continues from where the first PathSegment left off, and so forth.

The last point of the last PathSegment in the Segments collection might be the same as the StartPoint of the PathFigure or it might not. To ensure that a PathFigure is closed, you can set the IsClosed property. If necessary, this will cause a straight line to be drawn from the last point of the last PathSegment to the StartPoint of the PathFigure.

PathFigure also defines an IsFilled property that is true by default. This property is independent of any Fill brush you might set on the Path itself. It’s used instead for clipping and hit-testing. In some cases, Silverlight might perceive that an area is filled for purposes of clipping and hit-testing when that is not your intention. In that case, set IsFilled to false.

In summary, a PathGeometry is a collection of PathFigure objects. Each PathFigure object is a series of connected lines or curves indicated by a collection of PathSegment objects.

Let’s look at the PathSegment derivatives in more detail.

LineSegment defines just one property on its own, Point of type Point. It just needs one Point object because it draws a line from the StartPoint property of PathFigure (if the LineSegment is the first segment in the collection) or from the end of the previous segment.

PolyLineSegment defines a Points property of type PointCollection to draw a series of connected straight lines.

Here’s a PathGeometry with three PathFigure objects containing 3, 2, and 1 PathSegment objects, respectively:

<Grid Background="LightCyan">
  <Path Stroke="Blue"
        StrokeThickness="4"
        Fill="Green">
    <Path.Data>
      <PathGeometry>
        <PathFigure StartPoint="240 60">
          <LineSegment Point="380 240" />
          <LineSegment Point="100 240" />
          <LineSegment Point="240 60" />
        </PathFigure>

        <PathFigure StartPoint="240 150"
                    IsClosed="True">
          <LineSegment Point="380 330" />
          <LineSegment Point="100 330" />
        </PathFigure>

        <PathFigure StartPoint="240 240"
                    IsClosed="True">
          <PolyLineSegment
              Points="380 420, 100 420" />
        </PathFigure>
      </PathGeometry>
    </Path.Data>
  </Path>
</Grid>

					  

The second and third figures are explicitly closed with the IsClosed property, but all three PathFigure collections are filled.