Click here to Skip to main content
Click here to Skip to main content

A Purely XAML Coded Animated Bezier Curve via WPF

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

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:

1.jpg

After the animation:

2.jpg

<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.

License

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

Share

About the Author

logicchild
Other Pref. Trust
United States United States
I started electronics training at age 33. I began studying microprocessor technology in an RF communications oriented program. I am 43 years old now. I have studied C code, opcode (mainly x86 and AT+T) for around 3 years in order to learn how to recognize viral code and the use of procedural languages. I am currently learning C# and the other virtual runtime system languages. I guess I started with the egg rather than the chicken. My past work would indicate that my primary strength is in applied mathematics.

Comments and Discussions

 
GeneralMy vote of 1 Pinmembersamdeepreddy21-Oct-11 1:58 
GeneralGood Pinmemberaamironline1-May-11 23:48 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.1411028.1 | Last Updated 27 Apr 2011
Article Copyright 2011 by logicchild
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid