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 - PolyBezier Segments

The one hundred and thirty-first part of the Windows Presentation Foundation Fundamentals tutorial looks at two types of segment that can be used within Paths. Both generate a continuous path from a series of connected Bézier curves.

PolyQuadraticBezierSegment and PolyBezierSegment

In previous articles we've seen how to include Bézier curves in a Path, using PolyQuadraticBezierSegments for curves with one tangent point and PolyBezierSegments for curves with two. We've also seen the PolylineSegment, which generates a set of straight lines, connected in series to form a continuous path.

WPF includes two classes that create segments that combine these two types of behaviour. PolyQuadraticBezierSegments are created from a set of points that define a series of connected curves, each with an end point and a single tangent point. PolyBezierSegments also connect multiple curves, each with two control points.

To demonstrate, we'll create an example program that shows three paths. One will be made from a PolylineSegment and two from the two Bézier series. To begin, create a new WPF application in Visual Studio named, "PolyBezierSegmentDemo". Once the solution is ready, replace the XAML of the main window with the following:

<Window x:Class="PolyBezierSegmentDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF Path Demo"
        Height="240" Width="240">
    <Canvas>
        <Path Stroke="#FF0000" StrokeThickness="3" Fill="#40FF0000">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="20,100" IsClosed="True">
                            <PolyLineSegment Points="100,20 180,100 100,180"/>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>
</Window>

This XAML produces a window containing a Path built from straight lines. The result is shown below:

WPF Path with Polyline segment

PolyQuadraticBezierSegments

PolyQuadraticBezierSegments are created in a similar manner to PolylineSegments. The route for the curves is defined as a set of Points within the Points property. The difference is that each curve requires two pairs of co-ordinates instead of one. In each pair, the first defines the location of the tangent point and the second positions the end of the line. The start point for the curve is either the start of the Path or the end of the previous segment.

Add the following Path XAML within the Canvas, directly after the first Path. Note the use of the Points property, which has two pairs of co-ordinates per curve.

<Path Stroke="#00C000" StrokeThickness="3" Fill="#4000C000">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigure StartPoint="20,100" IsClosed="True">
                    <PolyQuadraticBezierSegment
                        Points="0,0 100,20
                                100,100 180,100
                                200,200 100,180,
                                100,100 20,100"/>
                </PathFigure>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

The above XAML creates a series of curves where each starts and ends in the same place as the straight lines in the existing Path. However, the addition of the control points means that the end result is quite different. The image below shows the results, with the original shape shown in red and the new path in green.

WPF Path with PolyQuadraticBezier segment

PolyBezierSegments

PolyBezierSegments are defined in the same way as the segments shown above. The key difference is the requirement for three sets of co-ordinates for each Bézier curve. The first two set the tangent points and the third is the end position for the curve.

Add the following XAML to create a third path. Note that the Points property has three sets of co-ordinates per curve.

<Path Stroke="#0000FF" StrokeThickness="3" Fill="#400000FF">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigure StartPoint="20,100" IsClosed="True">
                    <PolyBezierSegment
                        Points="0,0 100,100 100,20
                                200,0 100,100 180,100
                                200,200 100,100 100,180,
                                0,200 100,100 20,100"/>
                </PathFigure>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

The new path is rendered in blue.

WPF Path with PolyBezier segment

28 January 2015