Color Animation In Silverlight 3

The following animations can be done in Blend3 without even touching the C# code behind.

1) Create an Ellipse. Name it as MyEllipse.

Now let’s take a look at how color animations can be implemented via code. This project illustrates how to work with ColorAnimation objects. In this example, we will create a ColorAnimation that turns a red ellipse blue when the MouseEnter event is raised. The storyboard equivalent for this animation looks like the following.

{codecitation class="brush: xml; gutter: true;" width="650px"}

<Storyboard x:Name="Storyboard1">
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="00:00:00.5000000" Value="#FF0000FF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>


{/codecitation}

2) In Visual Studio, open the MainControl.xaml.cs file for editing. Just above the MainControl() constructor, add the following code, which declares a storyboard:

{codecitation class="brush: csharp; gutter: true;" width="650px"}
private Storyboard TurnsBlue = new Storyboard();

{/codecitation}

3) On the next line, declare a new ColorAnimation object called BlueColor:

{codecitation class="brush: csharp; gutter: true;" width="650px"}
private ColorAnimation BlueColor = new ColorAnimation();

{/codecitation}

4) Next, code the animation object’s properties inside the MainControl() constructor. In this case, the TargetName for the BlueColor animation is the MyEllipse object, and the TargetProperty is the object’s fill.

{codecitation class="brush: csharp; gutter: true;" width="650px"}
BlueColor.SetValue(Storyboard.TargetNameProperty, "MyEllipse");
BlueColor.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("(Shape.Fill).(SolidColorBrush.Color)"));

{/codecitation}

5) In my previous article, double data types were being used. In this example, data of type Color will be manipulated. To change a color fill for an object, define the target color as a color from alpha, red, green and blue color values. Note that the code shown below here is using an Argb value (alpha, red, green, blue) to specify a color; where as the storyboard produced in Blend utilizes a hex value. Argb color values get their value from four byte values (0 through 255), separated by commas. This is probably a familiar format for you if you have worked in almost any paint program. Once a color had been defined, it can be assigned to the To property in the animation.

{codecitation class="brush: csharp; gutter: true;" width="650px"}
Color ToColor = Color.FromArgb(255, 13, 8, 116);
BlueColor.To = ToColor;

{/codecitation}

6) The animation can now be added to the storyboard, and the storyboard added to the LayoutRoot element:

{codecitation class="brush: csharp; gutter: true;" width="650px"}

TurnsBlue.Children.Add(BlueColor);
LayoutRoot.Resources.Add("TurnsBlue",TurnsBlue);

{/codecitation}

7) All that’s left is an event listener and a little bit of event handler code.

8) The event handler is placed after the closing curly brace of the MainControl() constructor method:

{codecitation class="brush: csharp; gutter: true;" width="650px"}

private void MyEllipse_MouseEnter(object sender, MouseEventArgs e)
{
TurnsBlue.Begin();
}

{/codecitation}

Compile and run this project and place the pointer on the red ellipse. The object’s color will shift to blue.

That’s it you have successfully used animation in code behind.Similarly you can add another storyBoard for MouseLeave event.

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