.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.
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:
25 January 2015