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

The one hundred and thirtieth part of the Windows Presentation Foundation Fundamentals tutorial describes the Polyline segment. This generates a series of points, connected by straight lines, that can form part of a path.

PolylineSegment

In recent articles we've looked at several ways to build and render a two-dimensional figure using path segments. We've seen a segment type that draws straight lines and two Bézier curve segments. In each case, the segment represents a single line or curve. This means that to draw a series of lines requires a lot of XAML.

To simplify the process of linking several straight lines, you can use a PolylineSegment object. This type of segment starts from the start co-ordinates of the Path or the end point of the previous segment. You specify a series of points, either as space-separated co-ordinates in XAML or in a PointsCollection from .NET code. The points are connected using straight lines to form the segment.

To demonstrate, create a new WPF application in Visual Studio named, "PolylineSegmentDemo". Once the solution is generated, replace the XAML of the main window with the code below:

<Window x:Class="PolylineSegmentDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF Path Demo"
        Height="200" Width="250">
    <Canvas>
        <Path Stroke="Black" StrokeThickness="1" Fill="Yellow">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="20,80" IsClosed="True">
                            <PolyLineSegment
                                Points="60,60 90,75 75,45 95,5 115,45 100,75 130,60 170,80
                                        130,100 100,85 115,115 95,155 75,115 90,85 60,100"/>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>
</Window>

The key element in the XAML is the PolylineSegment. You can see that the Points property defines a series of co-ordinates. In this case there are fifteen co-ordinate pairs. This draws a sixteen-sided figure, as the Path's IsClosed property is set.

WPF Path containing Polyline segment

Combining Segment Types

The above image could be created using a Polygon or Polyline shape, either of which would require simpler code. However, the benefit of using a PolylineSegment is the ability for it to be combined with other items in a single path.

For example, the code below creates an arc segment that starts where the Polyline ends.

<Window x:Class="PolylineSegmentDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF Path Demo"
        Height="200" Width="250">
    <Canvas>
        <Path Stroke="Black" StrokeThickness="1" Fill="Yellow">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="20,80" IsClosed="True">
                            <PolyLineSegment
                                Points="60,60 90,75 75,45 95,5 115,45 100,75 130,60 170,80
                                        130,100 100,85 115,115 95,155"/>
                            <ArcSegment Point="20,80" Size="70 90" RotationAngle="45" />
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>
</Window>

The resultant path is shown below:

WPF Path containing Polyline and Arc segments

25 January 2015