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

The one hundred and twenty-third part of the Windows Presentation Foundation Fundamentals tutorial looks at another of the WPF shapes. This article describes the Polyline class, which is similar to Polygon but does not ensure a closed shape.

Polyline

The fifth of the two-dimensional shapes is Polyline. This control gives similar results to the Polygon class. The key difference is that, unlike with Polygon, a Polyline does not necessarily describe a closed shape. The series of co-ordinates specified for the Points property are joined together to form a continuous line but the final point is not connected to the first.

To demonstrate, create a new WPF application in Visual Studio. Name the project, "PolylineDemo". Once prepared, replace the XAML in the main window with the following code:

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

The co-ordinates for the points describe a square spiral, as pictured below:

WPF Polyline demonstration window

Filled Polylines

As you can see, the syntax for Polyline is almost identical to that of the Polygon class. As with polygons, you can also add fill effects. The shape is filled as if it were a closed figure, which can mean that the missing line joining the last and first points is effectively drawn using shading.

To demonstrate, change the Polyline's XAML, as shown below, to fill the shape using a solid red brush.

<Polyline Stroke="Black" StrokeThickness="5" Fill="Red"
          Points="100,75 100,50 125,50 125,100 75,100 75,25 150,25 150,125"/>

The result should appear similar to the image below.

WPF Polyline with fill

1 January 2015