Vector Graphics : Polygon and Fill

<Grid Background="LightCyan">
    <Polyline Points="100 100, 380 100,
                      380 380, 100 380"
              Stroke="Red"
              StrokeThickness="20"
              StrokeStartLineCap="Round"
              StrokeEndLineCap="Round"
              StrokeLineJoin="Round"
              StrokeDashArray="0 2"
              StrokeDashCap="Round" />
</Grid>

But if you set the Fill brush, the interior is filled as if the polyline describes a closed area:

<Grid Background="LightCyan">
    <Polyline Points="100 100, 380 100,
                      380 380, 100 380"
              Stroke="Red"
              StrokeThickness="20"
              Fill="Blue"
              StrokeStartLineCap="Round"
              StrokeEndLineCap="Round"
              StrokeLineJoin="Round"
              StrokeDashArray="0 2"
              StrokeDashCap="Round" />
</Grid>

If you want the figure to be really closed, you can add another point to the Points collection that is the same as the first point, or you can use a Polygon rather than a Polyline:

<Grid Background="LightCyan">
    <Polygon Points="100 100, 380 100,
                     380 380, 100 380"
             Stroke="Red"
             StrokeThickness="20"
             Fill="Blue"
             StrokeStartLineCap="Round"
             StrokeEndLineCap="Round"
             StrokeLineJoin="Round"
             StrokeDashArray="0 2"
             StrokeDashCap="Round" />
</Grid>

Both elements have the same Points collection, but the Polygon is closed automatically if necessary.

Once you start filling enclosed area with Polygon, a question comes up about how the interior should be handled when boundary lines overlap. The Polygon class defines a property named FillRule that gives you a choice. The classic example is the five-pointed star. Here’s the default FillRule, called EvenOdd:

<Grid Background="LightCyan">
    <Polygon Points="240  48, 352 396,
                      58 180, 422 180,
                     128 396"
             Stroke="Red"
             StrokeThickness="10"
             Fill="Blue"
             FillRule="EvenOdd" />
</Grid>

The EvenOdd algorithm determines if an enclosed area should be filled or not by conceptually taking a point in that area, for example, somewhere in the center, and drawing an imaginary line out to infinity. That imaginary line will cross some boundary lines. If it crosses an odd number of boundary lines, such as happens in the five points, then the area is filled. For an even number, like the center, the area is not filled.

The alternative is a FillRule called NonZero:

<Grid Background="LightCyan">
    <Polygon Points="240  48, 352 396,
                      58 180, 422 180,
                     128 396"
             Stroke="Red"
             StrokeThickness="10"
             Fill="Blue"
             FillRule="NonZero" />
</Grid>

The NonZero fill rule is a bit more complex because it takes account of the directions that boundary lines are drawn. If the boundary lines drawn in one direction balance out the boundary lines drawn in the opposite direction, then the area is not filled. In any interior area of this star, however, all the boundary lines go in the same direction.

Neither of these two FillRule options guarantees that all interior areas get filled. Here’s a rather artificial figure that has an enclosed but unfilled area even with NonZero:

<Grid Background="LightCyan">
    <Polygon Points=" 80 160,  80 320,
                     240 320, 240  80,
                     400  80, 400 240,
                     160 240, 160 400,
                     320 400, 320 160"
             Stroke="Red"
             StrokeThickness="10"
             Fill="Blue"
             FillRule="NonZero" />
</Grid>