A Purely XAML Coded Animated Bezier Curve via WPF

Preface

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"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  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">
  <Canvas.Background>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="Black" Offset="0"/>
 <GradientStop Color="#FF00FFE8" Offset="1"/>
      <GradientStop Color="#FF00201D"/>
      </LinearGradientBrush>
   </Canvas.Background>
   <Path Stroke="Black" StrokeThickness="5">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="20,20">
<BezierSegment x:Name="bezierSegment" Point1="150,50"
Point2="60,160" Point3="250,230"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Path x:Name="path1" Fill="Red"
Stroke="Red">
<Path.Data>
<GeometryGroup>
<LineGeometry x:Name="line1" StartPoint="20,20"
  EndPoint="150,50"/>
<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" />
</GeometryGroup>
</Path.Data>
</Path>
 
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever"
  AutoReverse="True">
<PointAnimation
  Storyboard.TargetName="bezierSegment"
  Storyboard.TargetProperty="Point1"
  From="50 20" To="250 20"
  Duration="0:0:5"/>
<PointAnimation Storyboard.TargetName="line1"
  Storyboard.TargetProperty="EndPoint"
  From="50 20" To="250 20"
  Duration="0:0:5"/>
<PointAnimation
  Storyboard.TargetName="ellipse1"
  Storyboard.TargetProperty="Center"
  From="50 20" To="250 20"
  Duration="0:0:5"/>
<PointAnimation
  Storyboard.TargetName="bezierSegment"
  Storyboard.TargetProperty="Point2"
  From="60 50" To="60 250"
  Duration="0:0:5"/>
<PointAnimation Storyboard.TargetName="line2"
  Storyboard.TargetProperty="StartPoint"
  From="60 50" To="60 250"
  Duration="0:0:5"/>
<PointAnimation
  Storyboard.TargetName="ellipse2"
  Storyboard.TargetProperty="Center"
  From="60 50" To="60 250"
  Duration="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
</Border>
</Viewbox>
</Window>

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.