XAML QuadraticBezierSegment

The code snippet in this article demonstrates how to draw a quadratic Bezier curve between two points using QuadraticBezierSegment object in XAML.

The QuadraticBezierSegment object represents a quadratic Bezier curve between two points. The Point1 and Point2 properties represent the two points.  

The following XAML code snippet creates a quadratic Bezier curve by setting Point1 and Point2 properties of a QuadraticBezierSegment. 

 <QuadraticBezierSegment Point1="50,200" Point2="200,50" />     

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 QuadraticBezierSegment as a part of PathFigure.Segments.

 <Path Stroke="Blue" StrokeThickness="2" >
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure StartPoint="10,100">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
<QuadraticBezierSegment Point1="50,200" Point2="200,50" />    
                                      
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>


The output looks as in Figure 1. 

QuadraticBezierSegment1.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 to fill the path.  

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

The new output looks as in Figure 2. 

QuadraticBezierSegment2.jpg
Figure 2


The following code snippet creates a quadratic Bezier segment dynamically, as shown in Figure 2. 

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

    QuadraticBezierSegment qbzSeg = new QuadraticBezierSegment();
    qbzSeg.Point1 = new Point(50, 200);
    qbzSeg.Point2 = new Point(200, 50);


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

    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);
}