Drawing Bezier Curve With BezierSegment in XAML

The BezierSegment represents a cubic Bezier curve drawn between two lines. A cubit bezier curve is defined by four points: a starting point, an ending point, and two control points. The BezierSegment class has the three properties: Point1, Point2, and Point3 that does not include the start point of the Bezier. The start point is defined as a part of PathFigure that is used to draw a Bezier. 

The following XAML code snippet sets the Point1, Point2, and Point3 properties of a BezierSegment. 

<BezierSegment Point1="100,0"  Point2="200,200"  Point3="300,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 BezierSegment as a part of PathFigure.Segments.

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

The output looks like Figure 1. 

 

Figure 1

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

<Path Stroke="Blue" StrokeThickness="2" Fill="Black" >

The new output looks like Figure 2. 

 

Figure 2

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

private void CreateBezierSegment() {     PathFigure pthFigure = new PathFigure();     pthFigure.StartPoint = new Point(10, 100);     System.Windows.Point Point1 = new System.Windows.Point(100, 0);     System.Windows.Point Point2 = new System.Windows.Point(200, 200);     System.Windows.Point Point3 = new System.Windows.Point(300, 100);     BezierSegment bzSeg = new BezierSegment();     bzSeg.Point1 = Point1;     bzSeg.Point2 = Point2;     bzSeg.Point3 = Point3;     PathSegmentCollection myPathSegmentCollection = new PathSegmentCollection();     myPathSegmentCollection.Add(bzSeg);     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); }

Now using the Bezier curves and a path, we are going to create a cool image. This image can also be as in Figure 3.

 

Figure 3

This is done by the following code, where you can see we create two Bezier curves and fill them with black and blue colors. We also use TranslateTransform to move one curve to the right position. 

<Path Stroke="Blue" StrokeThickness="2" Fill="Black" >     <Path.RenderTransform>         <TransformGroup>             <TranslateTransform X="50" Y="50" />         </TransformGroup>     </Path.RenderTransform>     <Path.Data>         <PathGeometry>             <PathGeometry.Figures>                 <PathFigureCollection>                     <PathFigure StartPoint="10,100">                         <PathFigure.Segments>                             <PathSegmentCollection>                                 <BezierSegment Point1="100,0"                                                 Point2="200,200"                                                 Point3="300,100"                                                 />                                                                     </PathSegmentCollection>                         </PathFigure.Segments>                     </PathFigure>                 </PathFigureCollection>             </PathGeometry.Figures>         </PathGeometry>     </Path.Data> </Path> <Path Margin="120,20,0,0" Stroke="Black" StrokeThickness="2" Fill="Blue">     <Path.RenderTransform>         <TransformGroup>             <RotateTransform Angle="90" CenterX="100" CenterY="30" />                <TranslateTransform X="50" Y="50" />                             </TransformGroup>     </Path.RenderTransform>     <Path.Data>         <PathGeometry>             <PathGeometry.Figures>                 <PathFigureCollection>                     <PathFigure StartPoint="10,100">                         <PathFigure.Segments>                             <PathSegmentCollection>                                 <BezierSegment Point1="100,0"                                                 Point2="200,200"                                                 Point3="300,100"                                                 />                             </PathSegmentCollection>                         </PathFigure.Segments>                     </PathFigure>                 </PathFigureCollection>             </PathGeometry.Figures>         </PathGeometry>     </Path.Data> </Path>

You get the idea. Using this approach, you can draw some cool images and shapes and apply animations to them. For example, we can apply an animation on Figure 3 that can give an impression of a running fan.