Click here to Skip to main content
15,566,443 members
Articles / Programming Languages / C# 3.5
Article
Posted 26 Apr 2011

Stats

31K views
14 bookmarked

A Purely XAML Coded Animated Bezier Curve via WPF

Rate me:
Please Sign up or sign in to vote.
4.67/5 (10 votes)
26 Apr 2011CPOL2 min read
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

XML
<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)


Written By
Software Developer Monroe Community
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questionmegulhan Pin
Member 139096067-Aug-18 5:50
professionalMember 139096067-Aug-18 5:50 
GeneralMy vote of 1 Pin
samdeepreddy21-Oct-11 1:58
samdeepreddy21-Oct-11 1:58 
GeneralGood Pin
aamironline1-May-11 23:48
aamironline1-May-11 23: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.