In the previous article "Your first animations using xaml and silverlight - Color animation: Part I", we've exposed a technique of how to deal with color animation. In this article, I will do same thing but with a different animation. I mean the DoubleAnimation class this time.

Remember if you have already deal with some Ajax frameworks, when under certain conditions you can obtain rounded corners div or panel. We will do the same thing through using a double animation to perform an interpolation between two states. I mean, we will transform the four sharp corners of a given rectangle to rounded corners when the mouse enters the rectangle and the inverse animation will be performed if the mouse leaves the rectangle. We do so using the both RadiusX and RadiusY properties.

If you run both XAML and C# pieces of code, you will observe this phenomenon:


Figure 1


Figure 2

To perform this I propose both codes:

XAML code

  1. <Window x:Class="myWpfApplication.Window1"
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="400" Width="400" Loaded="Window_Loaded">
  3. <!—The rectangle extends the Animatable class so it can be target of an Animation therefore a chose it -->
  4. <Rectangle Name="myRectangle" Width="300" Height="300">
  5. <Rectangle.Triggers>
  6. <!—The mouse enter event is the one that triggers the animation -->
  7. <EventTrigger RoutedEvent="Rectangle.MouseEnter">
  8. <BeginStoryboard>
  9. <!—The Storyboard is a sort of aniamtion container-->
  10. <Storyboard>
  11. <!—The duration and the targeted properties witch are RadiusX, RadiusY, will Be subject of the aniamtions, all parameters are set within the animations tag -->
  12. <DoubleAnimation Storyboard.TargetName="myRectangle"
  13. Storyboard.TargetProperty="(Rectangle.RadiusX)"
  14. From="0" To="100"
  15. Duration="0:0:8"/>
  16. <DoubleAnimation Storyboard.TargetName="myRectangle"
  17. Storyboard.TargetProperty="(Rectangle.RadiusY)"
  18. From="0" To="100"
  19. Duration="0:0:8"/>
  20. </Storyboard>
  21. </BeginStoryboard>
  22. </EventTrigger>
  23. <EventTrigger RoutedEvent="Rectangle.MouseLeave">
  24. <BeginStoryboard>
  25. <Storyboard>
  26. <DoubleAnimation Storyboard.TargetName="myRectangle"
  27. Storyboard.TargetProperty="(Rectangle.RadiusX)"
  28. From="100" To="0"
  29. Duration="0:0:8"/>
  30. <DoubleAnimation Storyboard.TargetName="myRectangle"
  31. Storyboard.TargetProperty="(Rectangle.RadiusY)"
  32. From="100" To="0"
  33. Duration="0:0:8"/>
  34. </Storyboard>
  35. </BeginStoryboard>
  36. </EventTrigger>
  37. </Rectangle.Triggers>
  38. </Rectangle>
  39. </Window>
C# code

In order to perform the same task, open a new project > WPFApplication then drag and drop a new rectangle.


Figure 3

Then right click on it and choose the properties menu.


Figure 4

Then, select the properties menu item and set it property name to "myRectangle" width to "250" and it height to "250".

Then implement the code as below, but don't forget to append System.Windows.Media.Animation namespace to the project:

  1. //This animation is for RadiusX
  2. DoubleAnimation oDoubleAnimation1;
  3. //This animation is for RadiusY
  4. DoubleAnimation oDoubleAnimation2;
  5. private void Window_Loaded(object sender, RoutedEventArgs e)
  6. {
  7. //Change the rectangle back color to beige
  8. myRectangle.Fill = Brushes.Beige;
  9. //Those two lines are responsibles for triggering events MouseEnter and MouseLeave
  10. myRectangle.MouseEnter += new MouseEventHandler(myRectangle_MouseEnter);
  11. myRectangle.MouseLeave += new MouseEventHandler(myRectangle_MouseLeave);
  12. }
  13. private void myRectangle_MouseEnter(object sender, RoutedEventArgs e)
  14. {
  15. //Set the oDoubleAnimation1
  16. oDoubleAnimation1 = new DoubleAnimation();
  17. //Set the transformation duration to 8 seconds
  18. oDoubleAnimation1.Duration = TimeSpan.FromSeconds(8);
  19. //The initial RadiusX value
  20. oDoubleAnimation1.From = 0;
  21. //The final RadiusX value
  22. oDoubleAnimation1.To = 100;
  23. //Trigger the animation
  24. myRectangle.BeginAnimation(Rectangle.RadiusXProperty, oDoubleAnimation1);
  25. //Set the oDoubleAnimation2
  26. oDoubleAnimation2 = new DoubleAnimation();
  27. //Set the transformation duration to 8 seconds
  28. oDoubleAnimation2.Duration = TimeSpan.FromSeconds(8);
  29. //The initial RadiusY value
  30. oDoubleAnimation2.From = 0;
  31. //The final RadiusY value
  32. oDoubleAnimation2.To = 100;
  33. //Trigger the animation
  34. myRectangle.BeginAnimation(Rectangle.RadiusYProperty, oDoubleAnimation2);
  35. }
  36. private void myRectangle_MouseLeave(object sender, RoutedEventArgs e)
  37. {
  38. //Set the oDoubleAnimation1
  39. oDoubleAnimation1 = new DoubleAnimation();
  40. //Set the transformation duration to 8 seconds
  41. oDoubleAnimation1.Duration = TimeSpan.FromSeconds(8);
  42. //The initial RadiusX value
  43. oDoubleAnimation1.From = 100;
  44. //The final RadiusX value
  45. oDoubleAnimation1.To = 0;
  46. //Trigger the animation
  47. myRectangle.BeginAnimation(Rectangle.RadiusXProperty, oDoubleAnimation1);
  48. //Set the oDoubleAnimation2
  49. oDoubleAnimation2 = new DoubleAnimation();
  50. //Set the transformation duration to 8 seconds
  51. oDoubleAnimation2.Duration = TimeSpan.FromSeconds(8);
  52. //The initial RadiusY value
  53. oDoubleAnimation2.From = 100;
  54. //The final RadiusY value
  55. oDoubleAnimation2.To = 0;
  56. //Trigger the animation
  57. myRectangle.BeginAnimation(Rectangle.RadiusYProperty, oDoubleAnimation2);
  58. }
As you see the same task could be performed using either XAML or C# code behind.
Part III

Good Dotneting!!!