Introduction
My last two articles were based on Code behind Animation in Silverlight3 through for Double Animation and Color Animation. In this article we will try the similar thing but with Point Animation.
Creating a Simple Silverlight Application Open up Blend 3 and Create a new Silverlight Application. 
1) Draw a Path and Name it as MyPath. 
{codecitation class="brush: xml; gutter: true;" width="650px"}
<Path Height="277" Width="200" Canvas.Left="306" Canvas.Top="65" Fill="#FF4080FF" Stretch="None" x:Name="RedPath" Cursor="Hand">
<Path.Data>
<PathGeometry>
<PathFigure IsClosed="True" StartPoint="200,100">
<BezierSegment Point1="200,155.228469848633" Point2="155.228469848633,200" Point3="100,200"/>
<BezierSegment Point1="44.7715263366699,200" Point2="0,155.228469848633" Point3="0,100"/>
<BezierSegment Point1="0,44.7715263366699" Point2="44.7715263366699,0" Point3="100,0"/>
<BezierSegment Point1="155.228469848633,0" Point2="200,44.7715263366699" Point3="200,100"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
{/codecitation} 2) Open MainControl.xaml.cs in Visual Studio for editing.
3) As with DoubleAnimation and ColorAnimation, everything begins with the declaration of a storyboard. Before the MainControl() constructor, add the following code to declare a storyboard called MovePointDown:
{codecitation class="brush: csharp; gutter: true;" width="650px"}
private Storyboard MovePointDown = new Storyboard();
{/codecitation}
4) Inside the MainControl() constructor, the TargetName property for the storyboard is set to the MyPath object. This is a deviation from the previous examples where the target was set on the individual animations. While it is also acceptable to set the target for each PointAnimation object, all three animations affect the same object, so it saves a couple of lines of code doing it this way.
{codecitation class="brush: csharp; gutter: true;" width="650px"}
Storyboard.SetTargetName(MovePointDown,"MyPath");
{/codecitation}
5) Next, each of the three PointAnimation objects is created. Let’s go through each of them in order. Begin by declaring a new PointAnimation object for the first point. Place this code just below the storyboard declaration before the MainControl() constructor:
{codecitation class="brush: csharp; gutter: true;" width="650px"}
private PointAnimation P1Anim = new PointAnimation();
{/codecitation} 6) Now the animation must tell Silverlight which property will be affected. The following code specifies that we are setting the value for Point1 of segment 1. {codecitation class="brush: csharp; gutter: true;" width="650px"}
P1Anim.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("(Path.Data).
(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point1)"));
{/codecitation}
7) As with the DoubleAnimation and ColorAnimation types, Duration is assigned:
{codecitation class="brush: csharp; gutter: true;" width="650px"}
P1Anim.Duration = new Duration(TimeSpan.FromSeconds(0.5));
{/codecitation}
8) Then the To property value is assigned. Because this is a PointAnimation, the data type is expressed as an x,y point. This means that the To property must be created as type Point.
{codecitation class="brush: csharp; gutter: true;" width="650px"}
P1Anim.To = new Point(45,277);
{/codecitation}
9) Finish up by adding the animation to the storyboard:
{codecitation class="brush: csharp; gutter: true;" width="650px"}
MovePointDown.Children.Add(P1Anim);
{/codecitation}
10) Points 2 and 3 from the XAML example are coded in the same way. Start by declaring two more PointAnimation objects before the MainControl() constructor:
{codecitation class="brush: csharp; gutter: true;" width="650px"}
private PointAnimation P2Anim = new PointAnimation();
private PointAnimation P3Anim = new PointAnimation();
{/codecitation} 11) Inside the MainControl() constructor, use the values from the XAML as a guide to assign values to the properties of the animation. The code for that looks like the following: {codecitation class="brush: csharp; gutter: true;" width="650px"}
P2Anim.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(BezierSegment.Point2)"));
P2Anim.Duration = new Duration(TimeSpan.FromSeconds(0.5));
P2Anim.To = new Point(155, 277);
MovePointDown.Children.Add(P2Anim);
P3Anim.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(BezierSegment.Point3)"));
P3Anim.Duration = new Duration(TimeSpan.FromSeconds(0.5));
P3Anim.To = new Point(100, 277);
MovePointDown.Children.Add(P3Anim);
{/codecitation}
12) Once all three PointAnimations have been defined and added to the storyboard, the storyboard can be added to the LayoutRoot resources:
{codecitation class="brush: csharp; gutter: true;" width="650px"}
LayoutRoot.Resources.Add("MovePointDown",MovePointDown);
{/codecitation} 13) As with previous articles, an event listener and event handler are used to play the storyboard when the MouseEnter is raised.
14) Just after the closing brace of the MainControl()constructor, add the following code to the event handler:
{codecitation class="brush: csharp; gutter: true;" width="650px"}
private void MyPath_MouseEnter(object sender, MouseEventArgs e)
{
MovePointDown.Begin();
}
{/codecitation}
Compile and run the program by pressing F5. When you place the mouse pointer over the blue ellipse, the bottom point will move downward.
One of the nuances in working with PointAnimation types is that an animation to return the point to its starting location does not return the calues to 0, as was done in the examples that used translations. Instead, the points need to be returned to the locations that are specified in the XAML definition of the object. Here’s the code for the project: {codecitation class="brush: xml; gutter: true;" width="650px"}
<Path Height="277" Width="200" Canvas.Left="306" Canvas.Top="65" Fill="#FF4080FF" Stretch="None" x:Name="RedPath" Cursor="Hand">
<Path.Data>
<PathGeometry>
<PathFigure IsClosed="True" StartPoint="200,100">
<BezierSegment Point1="200,155.228469848633" Point2="155.228469848633,200" Point3="100,200"/>
<BezierSegment Point1="44.7715263366699,200" Point2="0,155.228469848633" Point3="0,100"/>
<BezierSegment Point1="0,44.7715263366699" Point2="44.7715263366699,0" Point3="100,0"/>
<BezierSegment Point1="155.228469848633,0" Point2="200,44.7715263366699" Point3="200,100"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
{/codecitation} Let’s do a quick walkthrough to see what happens when the points are returned to 0,0.
15) Add a second Storyboard object to the project above the MainControl() constructor:
{codecitation class="brush: csharp; gutter: true;" width="650px"}
private Storyboard MovePointUp = new Storyboard();
{/codecitation}
16) Inside the MainControl() constructor, set the target on the storyboard rather than the individual PointAnimation objects:
{codecitation class="brush: csharp; gutter: true;" width="650px"}
Storyboard.SetTargetName(MovePointUp, "RedPath");
{/codecitation} 17) Above the MainControl() constructor, declare three new PointAnimation objects: {codecitation class="brush: csharp; gutter: true;" width="650px"}
private PointAnimation P1AnimBack = new PointAnimation();
private PointAnimation P2AnimBack = new PointAnimation();
private PointAnimation P3AnimBack = new PointAnimation();
{/codecitation}
18) Assign the same properties used in the PointAnimations from the MoveointDown storyboard. Notice that the To property for each of the three PointAnimations has been set to an x,y point value of 0,0.
{codecitation class="brush: csharp; gutter: true;" width="650px"}
P1AnimBack.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point1)"));
P1AnimBack.Duration = new Duration(TimeSpan.FromSeconds(0.5));
P1AnimBack.To = new Point(45, 200);
MovePointUp.Children.Add(P1AnimBack);
P2AnimBack.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(BezierSegment.Point2)"));
P2AnimBack.Duration = new Duration(TimeSpan.FromSeconds(0.5));
P2AnimBack.To = new Point(155, 200);
MovePointUp.Children.Add(P2AnimBack);
P3AnimBack.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(BezierSegment.Point3)"));
P3AnimBack.Duration = new Duration(TimeSpan.FromSeconds(0.5));
P3AnimBack.To = new Point(100, 200);
MovePointUp.Children.Add(P3AnimBack);
{/codecitation} 19) The newly created storyboard needs to be added to the page resources: {codecitation class="brush: csharp; gutter: true;" width="650px"}
LayoutRoot.Resources.Add("MovePointUp", MovePointUp);
{/codecitation}
20) Finally, an event listener and associated event handler code are created for the MouseLeave event.
21) And the event handler code to call the new animation goes outside of the MainControl() constructor:
{codecitation class="brush: csharp; gutter: true;" width="650px"}
private void MyPath_MouseLeave(object sender, MouseEventArgs e)
{
MovePointUp.Begin();
}
{/codecitation} Press F5 to run the project. Place the pointer inside the BlueEllipse object. The bottom point will glide down as the MousePointDown storyboard plays. Now move the pointer off the BlueEllipse object. The point returns to the specified coordinate of 0,0, which is located at the top-left corner of the Path object’s bounding box, rather than its starting point on the ellipse. 
So how do you know which point from the XAML is the right one to use? Each BezierSegment has three sets of point data that describe the curve. With the reference storyboard for this project and a bit of detective work, we can identify the corresponding points between the object and those being modified by the storyboard.
The first PointAnimation in the MovePointUp storyboard has the following TargetProperty: {codecitation class="brush: csharp; gutter: true;" width="650px"}
(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point1)
{/codecitation} The BezierSegments in the object are numbered as follows
0. {codecitation class="brush: xml; gutter: true;" width="650px"}
<BezierSegment Point1="200,155.228469848633" Point2="155.228469848633,200" Point3="100,200"/>
{/codecitation}
1. {codecitation class="brush: xml; gutter: true;" width="650px"}
<BezierSegment Point1="44.7715263366699,200" Point2="0,155.228469848633" Point3="0,100"/>
{/codecitation}
2. {codecitation class="brush: xml; gutter: true;" width="650px"}
<BezierSegment Point1="0,44.7715263366699" Point2="44.7715263366699,0" Point3="100,0"/>
{/codecitation}
3. {codecitation class="brush: xml; gutter: true;" width="650px"}
<BezierSegment Point1="155.228469848633,0" Point2="200,44.7715263366699" Point3="200,100"/>
{/codecitation}
22) From the TargetProperty, we know that the P1Back animation is working with segment 1, and needs the coordinates for point 1, which are Point1="44.7715263366699,200" (which will be clean up to 45,200). Update the To property for the P1AnimBack animation as shown: {codecitation class="brush: csharp; gutter: true;" width="650px"}
P1AnimBack.To = new Point(45, 200);
{/codecitation} 23) The P2Back animation targets segment 0, point 2, which is located at Point1="155.228469848633,0" (155,200). The P2Back animation is updated to the following:
{codecitation class="brush: csharp; gutter: true;" width="650px"}
P2AnimBack.To = new Point(155, 200);
{/codecitation}
24) The P3Back animation targets segment 0, point 3, which is the point 100,200. Updating the P3Back animation makes the code look like this:
{codecitation class="brush: csharp; gutter: true;" width="650px"}
P3AnimBack.To = new Point(100, 200);
{/codecitation}
After plugging in those three sets of coordinates and recompiling, the object now behaves as expected when the MouseLeave event is raised, returning our point to its starting position.
That’s it you have experienced the PointAnimation through code behind. Hope you have enjoyed.
Enjoy Animating.
Thank you
| About the Author |
 | | Diptimaya Patra |
Description :I am a Master in Computer Application (MCA) from SRM University, Chennai. I am MCTS in ASP.Net Web Development, and MOSS 2007 Administration. I have extreme exposure to Microsoft Technologies in recent times like Silverlight 2, Silverlight 3. I am from Cuttack, Orissa. You can reach me using this mail (diptimaya.patra@gmail.com). Currently I am working as a Software Engineer in UST Global Inc in Trivandrum Center.
Occupation :Software Engineer
Company : UST Global.
Location : India
Follow me at twitter : http://twitter.com/dpatra
|
|
|