XAML PolyQuadraticBezierSegment

How to draw multiple quadratic Bezier curves using PolyQuadraticBezierSegment in XAML and WPF.

The PolyQuadraticBezierSegment object in WPF represents one or more quadratic Bezier curves. The Points property represents all the points for multiple Bezier curves. The element PolyQuadraticBezierSegment represents the PolyQuadraticBezierSegment object in XAML.

The following XAML code snippet sets the Points property of the PolyQuadraticBezierSegment. 

<PolyQuadraticBezierSegment Points="0,0 50,0 100,100 100,0 150,0 200,100" />
         
A Path object is used to draw Bezier curves by setting a PathGeomerty as Path.Data. The following code snippet creates a Path and sets a PolyQuadraticBezierSegment as a part of PathFigure.Segments.

<Path Stroke="Blue" StrokeThickness="2" >
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure StartPoint="10,100">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <PolyQuadraticBezierSegment Points="0,0 50,0 100,100 100,0 150,0 200,100" /> 
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

The output looks as in Figure 1. 

PolyQuadraticBezierSegment1.jpg
Figure 1

We can paint a Bezier curve by simply painting the path using the Fill method. The following code snippet has been changed from the previous code and fills a path.  

<Path StrokeThickness="2" Fill="Yellow" >

The new output looks as in Figure 2. 

PolyQuadraticBezierSegment2.jpg
 
Figure 2

The following code snippet creates a poly quadratic Bezier segment dynamically that looks as in Figure 2. 

private void CreatePolyQuadraticBezierSegment()
{
    PathFigure pthFigure = new PathFigure();
    pthFigure.StartPoint = new Point(10, 100);

    PolyQuadraticBezierSegment pqbzSeg = new PolyQuadraticBezierSegment();
    pqbzSeg.Points.Add(new Point(0, 0));
    pqbzSeg.Points.Add(new Point(50, 0));
    pqbzSeg.Points.Add(new Point(100, 100));
    pqbzSeg.Points.Add(new Point(100, 0));
    pqbzSeg.Points.Add(new Point(150, 0));
    pqbzSeg.Points.Add(new Point(200, 100));


    PathSegmentCollection myPathSegmentCollection = new PathSegmentCollection();
    myPathSegmentCollection.Add(pqbzSeg);

    pthFigure.Segments = myPathSegmentCollection;

    PathFigureCollection pthFigureCollection = new PathFigureCollection();
    pthFigureCollection.Add(pthFigure);

    PathGeometry pthGeometry = new PathGeometry();
    pthGeometry.Figures = pthFigureCollection;

    Path arcPath = new Path();
    arcPath.Stroke = new SolidColorBrush(Colors.Black);
    arcPath.StrokeThickness = 1;
    arcPath.Data = pthGeometry;
    arcPath.Fill = new SolidColorBrush(Colors.Yellow);

    LayoutRoot.Children.Add(arcPath);
}