Visual Studio 2008 and .Net framework 3.5 provide us several new features not found in the precedent version. The WPF, the XAML and Silverlight are among the new features introduced in a WPF context. They contribute to the amelioration of the application ergonomic side by introducing something new like 2D/3D animations. For instance, Visual studio 2008 and Silverlight products must be installed before starting with animations. For me, this is my first experience within VS 2008, XAML, WPF and Silverlight.
As you will see, a given animation can target a given control such as a rectangle, a grid or an even a button witches are called canvas. The animation by definition is this context is the given control property or properties changement from given statue to another via an interpolation that could be monitored by the developer via code xaml or via the page code behind. I mean C # code. It is similar phenomenon when comparing with the flash animations, if you have already dealt with flash projects especially the movement and the form interpolations. There are three main animations in addition to a set of witches those provided by the System.Window.Media.Animation namespace, all could be used in order to achieve a particular goal, but in this article and the ones witches will follow this one, we'll concentrate on the three kind of animations, namely the Double animation, the Color animation and the point animation, moreover, the .Net frameworks provides a set of base classes such DoubleAnimationBase, ColorAnimationBase and PointAnimationBase to customize your code in addition to other classes like Aniamtable and interfaces such as IAnimatable. All of them are provided to perform customized animations within your WPF application.
In this article, I will give a trick of how to deal with ColorAnimation class within VS2008 and Silverlight context using both xaml and C# 4.0, afterward, and in the two subsequent articles, we'll focus on the DoubleAnimation and PointAnimation:
The Color animation:
In this example we will define a rectangle that changes color from yellow to red if the mouse enters the given object boundaries and then returns to the first color if the mouse leaves the rectangle.
XAML code:
Create a new WPF application by open New>Project>WPFApplication then name your application my first WPF application. Copy and paste this under code to the xaml zone.
<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 Width="250" Height="250" ToolTip="This is myRectangle" Name="myRectangle" Visibility="Visible" Fill="Yellow">
<Rectangle.Triggers>
<!—The mouse enter event is the one that triggers the animation -->
<EventTrigger RoutedEvent="Rectangle.MouseEnter">
<!—The Storyboard is a sort of aniamtion container-->
<BeginStoryboard>
<Storyboard>
<!—The color, the duration, and the targeted property that will
Be subject of the aniamtion, all parameters are set within the animation tag -->
<ColorAnimation Storyboard.TargetName="myRectangle"
Storyboard.TargetProperty="(Fill).(Color)"
Duration="00:00:08"
From="Yellow" To="Red"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!—As you see, you can implement more that one animation for the same
Object at the same time -->
<EventTrigger RoutedEvent="Rectangle.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="myRectangle" Storyboard.TargetProperty="(Fill).(Color)"
Duration="00:00:08" From="Red" To="Yellow"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Window>
C# code:
Also this task could be performed using the form code behind, I mean C#, to do so open a new window drag and drop a new rectangle.
![]()
Figure 1
Then right click on it and choose the properties menu.
![]()
Figure 2
Afterward, 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 bellow, but don't forget to append System.Windows.Media.Animation namespace to the project:
//It is used to fill myRectangle object
SolidColorBrush TransformBrush;
//This animation is for changing the color
ColorAnimation oColorAnimation;
private void Window_Loaded(object sender, RoutedEventArgs e)
{
//First we set the color to yellow
TransformBrush = new SolidColorBrush(Colors.Yellow);
//Fill the rectangle using the TransformBrush
myRectangle.Fill = TransformBrush;
//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 animation
oColorAnimation = new ColorAnimation();
//The initial brush state
oColorAnimation.From = Colors.Yellow;
//The final brush state
oColorAnimation.To = Colors.Red;
//The animation duration
oColorAnimation.Duration = TimeSpan.FromSeconds(8);
//Trigger the animation
TransformBrush.BeginAnimation(SolidColorBrush.ColorProperty, oColorAnimation);
}
private void myRectangle_MouseLeave(object sender, RoutedEventArgs e)
{
//Set the animation
oColorAnimation = new ColorAnimation();
//The initial brush state
oColorAnimation.From = Colors.Red;
//The final brush state
oColorAnimation.To = Colors.Yellow;
//The animation duration
oColorAnimation.Duration = TimeSpan.FromSeconds(8);
//Trigger the animation
TransformBrush.BeginAnimation(SolidColorBrush.ColorProperty, oColorAnimation);
}
As you remark, the code is not very complex, especially for someone who had already good experience with .Net environment. You should not miss the second part "Your first animation using XAML and Silverlight - double animation: Part II".
Good Dotneting!!!