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 - Polygon

The one hundred and twenty-second part of the Windows Presentation Foundation Fundamentals tutorial continues the examination of the WPF shapes. This article considers the Polygon class, which creates a closed shape from a series of points.

Polygon

In the previous three articles we've looked at three shapes that you can draw using WPF. These are provided by the Line, Rectangle and Ellipse classes. Each generates a simple shape. When you need something more complex, you can use other classes, including Polygon.

As the name suggests, the Polygon class allows you to draw a polygon. The WPF version of a polygon is defined as a series of co-ordinates. These are connected, in the order specified, to create a closed shape. Depending upon the settings for the Stroke, StrokeThickness and Fill properties, the shape can be a simple outline or a filled figure.

To demonstrate the use of the class, let's create a new WPF application in Visual Studio. Name the project, "PolygonDemo". Once it is ready, replace the XAML of the main window with the code below.

<Window x:Class="PolygonDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Polygon Demo" Height="200" Width="250">
    <Canvas>
        <Polygon Stroke="Black" StrokeThickness="5" Fill="Yellow"
                 Points="5,5 50,5 150,50 150,150 100,150 5,100"/>
    </Canvas>
</Window>

We've seen the first three properties that are assigned to the above Polygon before. They specify that the shape will be surrounded by a black line with a thickness of five device independent units, and that it will be filled using a solid yellow brush.

The property that we have not seen before is Points. This holds a PointCollection, which is a list of Point values, each with X and Y co-ordinates. In XAML, these points are defined using plain text. When the shape is rendered, the co-ordinates define the corners of the polygon and are joined up with the line. The final point is connected to the first to close the shape.

NB: In the sample code the co-ordinates are grouped into pairs. Each pair is separated from the others with a space and a comma is used between the X and Y values. This format is not enforced. You can elect to separate the individual values using just spaces or commas. However, pairing the co-ordinates as shown is more readable.

Run the program to see the results. You should see a six-sided shape, similar to that pictured below:

WPF Polygon Demo

Fill Rules

The shape in the first example is quite a simple one. There are no internal angles over 180 degrees and the lines never cross. This means that it is simple to determine which areas should be filled and which should not. A simple flood fill, as used in drawing software, would be sufficient to add the yellow colour.

Some shapes are more complex to fill because they include cut outs, crossed lines and large internal angles. In these situations, the system must use a fill rule to determine which areas should be coloured. WPF supports two fill rules. They are the Even-Odd Rule and the Nonzero Winding Rule.

Even Odd Fill Rule

The default fill rule for polygons is the even-odd rule. To determine whether an area should be filled or not, an imaginary, straight line is drawn from a point to infinity. If the line crosses an even number of the shape's lines, it is outside of the polygon and will not be filled. If it would cross an odd number of lines, it is deemed to be within the boundaries of the shape.

Although the rule is used by default, you can set it explicitly by setting the FillRule property to EvenOdd, as in the following example. Replace the existing Polygon with the XAML below and run the program.

<Polygon Stroke="Black" StrokeThickness="5" Fill="Yellow"
            Points="5,5 155,5 155,80 80,130 80,30 155,80 155,155 5,155"
            FillRule="EvenOdd"/>

In this case, the shape includes a cut out section. The imaginary line from within the triangular area always intersects with two edges of the polygon, so it is not filled and remains white.

WPF Polygon Even Odd Fill Rule

Nonzero Fill Rule

The second fill rule is the nonzero fill rule. Again, to determine whether or not a section should be filled, an imaginary line is drawn from the point to infinity. This time, the direction in which each intersecting edge crosses the line is considered. An edge crossing from left to right adds one to a counter and a line crossing from right to left subtracts one. If the total of the intersection values is zero, the point is considered to be outside of the shape.

To switch to the second rule, set the FillRule property to Nonzero.

<Polygon Stroke="Black" StrokeThickness="5" Fill="Yellow"
            Points="5,5 155,5 155,80 80,130 80,30 155,80 155,155 5,155"
            FillRule="Nonzero"/>

Run the program to see the updated shape. You can see that the triangular section is now filled.

WPF Polygon Nonzero Fill Rule

20 December 2014