Your first animations using XAML and Silverlight- Double animation: Part II

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

<Window x:Class="myWpfApplication.Window1"
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">
<!—The rectangle extends the Animatable class so it can be target of an Animation therefore a chose it -->
<Rectangle Name="myRectangle" Width="300" Height="300">
<Rectangle.Triggers>
<!—The mouse enter event is the one that triggers the animation -->
<EventTrigger RoutedEvent="Rectangle.MouseEnter">
<BeginStoryboard>
<!—The Storyboard is a sort of aniamtion container-->
<Storyboard>
<!—The duration and the targeted properties witch are RadiusX, RadiusY, will Be subject of the aniamtions, all parameters are set within the animations tag -->
<DoubleAnimation Storyboard.TargetName="myRectangle"
Storyboard.TargetProperty="(Rectangle.RadiusX)"
From="0" To="100"
Duration="0:0:8"/>
<DoubleAnimation Storyboard.TargetName="myRectangle"
Storyboard.TargetProperty="(Rectangle.RadiusY)"
From="0" To="100"
Duration="0:0:8"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Rectangle.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="myRectangle"
Storyboard.TargetProperty="(Rectangle.RadiusX)"
From="100" To="0"
Duration="0:0:8"/>
<DoubleAnimation Storyboard.TargetName="myRectangle"
Storyboard.TargetProperty="(Rectangle.RadiusY)"
From="100" To="0"
Duration="0:0:8"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</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:

//This animation is for RadiusX
DoubleAnimation oDoubleAnimation1;
//This animation is for RadiusY
DoubleAnimation oDoubleAnimation2;
private void Window_Loaded(object sender, RoutedEventArgs e)
{
//Change the rectangle back color to beige
myRectangle.Fill = Brushes.Beige;
//Those two lines are responsibles for triggering events MouseEnter and MouseLeave
myRectangle.MouseEnter += new MouseEventHandler(myRectangle_MouseEnter);
myRectangle.MouseLeave += new MouseEventHandler(myRectangle_MouseLeave);
}
private void myRectangle_MouseEnter(object sender, RoutedEventArgs e)
{
//Set the oDoubleAnimation1
oDoubleAnimation1 = new DoubleAnimation();
//Set the transformation duration to 8 seconds
oDoubleAnimation1.Duration = TimeSpan.FromSeconds(8);
//The initial RadiusX value
oDoubleAnimation1.From = 0;
//The final RadiusX value
oDoubleAnimation1.To = 100;
//Trigger the animation
myRectangle.BeginAnimation(Rectangle.RadiusXProperty, oDoubleAnimation1);
//Set the oDoubleAnimation2
oDoubleAnimation2 = new DoubleAnimation();
//Set the transformation duration to 8 seconds
oDoubleAnimation2.Duration = TimeSpan.FromSeconds(8);
//The initial RadiusY value
oDoubleAnimation2.From = 0;
//The final RadiusY value
oDoubleAnimation2.To = 100;
//Trigger the animation
myRectangle.BeginAnimation(Rectangle.RadiusYProperty, oDoubleAnimation2);
}
private void myRectangle_MouseLeave(object sender, RoutedEventArgs e)
{
//Set the oDoubleAnimation1
oDoubleAnimation1 = new DoubleAnimation();
//Set the transformation duration to 8 seconds
oDoubleAnimation1.Duration = TimeSpan.FromSeconds(8);
//The initial RadiusX value
oDoubleAnimation1.From = 100;
//The final RadiusX value
oDoubleAnimation1.To = 0;
//Trigger the animation
myRectangle.BeginAnimation(Rectangle.RadiusXProperty, oDoubleAnimation1);
//Set the oDoubleAnimation2
oDoubleAnimation2 = new DoubleAnimation();
//Set the transformation duration to 8 seconds
oDoubleAnimation2.Duration = TimeSpan.FromSeconds(8);
//The initial RadiusY value
oDoubleAnimation2.From = 100;
//The final RadiusY value
oDoubleAnimation2.To = 0;
//Trigger the animation
myRectangle.BeginAnimation(Rectangle.RadiusYProperty, oDoubleAnimation2);
}

As you see the same task could be performed using either XAML or C# code behind.

Part III

Good Dotneting!!!