Click here to Skip to main content
13,508,889 members
Click here to Skip to main content
Add your own
alternative version


14 bookmarked
Posted 26 Apr 2011

A Purely XAML Coded Animated Bezier Curve via WPF

, 26 Apr 2011
Rate this:
Please Sign up or sign in to vote.
Using animation via XAML code to draw a Bezier curve object.


It is possible to create a Bezier curve using the BezierSegment object. Note that a Bezier curve is defined by four points: a start point, an end point, and two control points. The BezierSegment class doesn't contain a property for the starting point of the curve; it only defines the end point. The beginning point of the curve is the current point of the PathFigure to which the BezierSegment is added. Note that the PathFigure is a shape that is drawn using an unbroken line consisting of a number of segments. There are several types of segments, all of which derive from the PathSegment class.

If we imagine a straight line segment as being elastic, then the two control points push this line segment from either side to form a Bezier curve. The first control point affects the beginning portion of the curve; while the second control point affects the ending portion of the curve. The curve doesn't necessarily pass through either of the control points; each control point moves its portion of the line toward itself, not through itself. The following example is done purely through XAML: it does not use a code-behind file. It shows a Bezier curve, whose two control points are animated. The X-coordinate of the first control point and the Y-coordinate of the second control point vary in the range [50, 250].

Notice the images below. The first image depicts the straight line, the latter image depicts the curve drawn via the animation capabilities of the Microsoft Expression Blend IDE. The linear gradient brush contained within the XAML can be deleted to produce a default white:


After the animation:


<Window x:Class="BezierProject.BezierCurve"



  Title="Bezier Curve Animation"

  Height="300" Width="300">
<Viewbox Stretch="Fill">
<Border Margin="5" BorderBrush="Black" 

  BorderThickness="1" HorizontalAlignment="Left">
<Canvas x:Name="canvas1" Width="300" Height="270">
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="Black" Offset="0"/>
 <GradientStop Color="#FF00FFE8" Offset="1"/>
      <GradientStop Color="#FF00201D"/>
   <Path Stroke="Black" StrokeThickness="5">
<PathFigure StartPoint="20,20">
<BezierSegment x:Name="bezierSegment" Point1="150,50"

Point2="60,160" Point3="250,230"/>
<Path x:Name="path1" Fill="Red"

<LineGeometry x:Name="line1" StartPoint="20,20"

<EllipseGeometry x:Name="ellipse1" Center="150,50" 

  RadiusX="5" RadiusY="5" />
<LineGeometry x:Name="line2" 

  StartPoint="60,160" EndPoint="250,230"/>
<EllipseGeometry x:Name="ellipse2" 

  Center="60,160" RadiusX="5" RadiusY="5" />
<EventTrigger RoutedEvent="Canvas.Loaded">
<Storyboard RepeatBehavior="Forever"




  From="50 20" To="250 20"

<PointAnimation Storyboard.TargetName="line1"


  From="50 20" To="250 20"




  From="50 20" To="250 20"




  From="60 50" To="60 250"

<PointAnimation Storyboard.TargetName="line2"


  From="60 50" To="60 250"




  From="60 50" To="60 250"


This XAML file creates a Bezier curve using BezierSegment. The two control points, Point1 and Point2, of the Bezier curve are marked specifically by two ellipse shapes. At the same time, two line segments are created to guide your eye during the animation. The first line segment connects the starting point and Point1, while the second segment connects the end point and Point2. The animation is performed within a Storyboard element using PointAnimation. Here, you animate not only the control points of the Bezier curve, but also the red dots (ellipses) and the guide lines.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer Monroe Community
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralMy vote of 1 Pin
samdeepreddy21-Oct-11 0:58
membersamdeepreddy21-Oct-11 0:58 
GeneralGood Pin
aamironline1-May-11 22:48
memberaamironline1-May-11 22:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180417.1 | Last Updated 27 Apr 2011
Article Copyright 2011 by logicchild
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid