esponjasoft

During a recent assignment I got to create several Silverlight  proof of concepts for different clients. One of the things that catch my eye during this assignment was how easy it is to create animations in Silverlight, and how well they look.  While I'm definitely not a master of Silverlight animations, I intend to create a series of posts reflecting what I learn, as a way to share knowledge. The first posts will explain the simplest animations, increasing its complexity over time, eventually reaching complex animation scenarios.

For the first post in the series, I will talk about the simplest type of animation, Color-changing animations.

1. First, let's create a basic shape to use as the target of our animation. A red circle should be enough.

   <UserControl x:Class="SilverlightAnimations.Page"

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="70" Height="70">

       <Grid x:Name="LayoutRoot" Background="White">

           <Ellipse x:Name="RedCircle" Height="60" Width="60" Fill="Red" />

       </Grid>

   </UserControl>

2. For this sample, the circle will change colors when the mouse enters and leaves. In order for this to be controlled programmatically, we need to add the MouseEnter and MouseLeave attributes to our XAML.

   <UserControl x:Class="SilverlightAnimations.Page"

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="70" Height="70">

       <Grid x:Name="LayoutRoot" Background="White">

           <Ellipse x:Name="RedCircle" Height="60" Width="60" Fill="Red"

          MouseEnter="RedCircle_MouseEnter" MouseLeave="RedCircle_MouseLeave" />

       </Grid>

   </UserControl>

3. Now it's time to add the animation. The first thing to do when creating an animation is to create an StoryBoard. In this case, we'll add two Storyboards, one for the MouseEnter animation, and one for the MouseLeave animation.

   <UserControl x:Class="SilverlightAnimations.Page"

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="70" Height="70">

       <Grid x:Name="LayoutRoot" Background="White">

           <Ellipse x:Name="RedCircle" Height="60" Width="60"

              Fill="Red"

              MouseEnter="RedCircle_MouseEnter"

              MouseLeave="RedCircle_MouseLeave" >

               <Ellipse.Resources>

                   <Storyboard x:Name="RedCircleAnimation_MouseEnter" >

                   </Storyboard>

                   <Storyboard x:Name="RedCircleAnimation_MouseLeave" >

                   </Storyboard>

               </Ellipse.Resources>

           </Ellipse>

       </Grid>

   </UserControl>       

4. Once we created a storyboard for each of the animations we intend to have, it's time to add the animation element to  each storyboard. For this example, we'll use a ColorAnimation. A ColorAnimation, according to msdn "Animates the value of a Color property between two target values using linear interpolation over a specified duration". For our example, we will use the ColorAnimation to change the Fill color from Red to Blue (in the case of the MouseEnter event) and back (in the case of the MouseLeave event).

   <UserControl x:Class="SilverlightAnimations.Page"

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="70" Height="70">

       <Grid x:Name="LayoutRoot" Background="White">

           <Ellipse x:Name="RedCircle" Height="60" Width="60"

              Fill="Red"

              MouseEnter="RedCircle_MouseEnter"

              MouseLeave="RedCircle_MouseLeave" >

               <Ellipse.Resources>

                   <Storyboard x:Name="RedCircleAnimation_MouseEnter" >

                       <ColorAnimation

                          Duration="00:00:02"

                          To="Blue"

                          Storyboard.TargetName="RedCircle"

                          Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />

                   </Storyboard>

                   <Storyboard x:Name="RedCircleAnimation_MouseLeave" >

                       <ColorAnimation

                          Duration="00:00:02"

                          To="Red"

                          Storyboard.TargetName="RedCircle"

                          Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />

                   </Storyboard>

               </Ellipse.Resources>

           </Ellipse>

       </Grid>

   </UserControl>

   The first attribute to modify is Duration (which marks how long the animation will run), setting it to "00:00:02" (2 seconds). Next, we set the To attribute (which defines the result of the animation) to "Blue", the color we want the circle to have at the end of the animation. Next, we set the Storyboard.TargetName attribute (which defines the target of the animation), to "RedCircle".

   Finally, we set the Storyboard.TargetProperty attribute (which defines which property of the StoryTargetName is affected by the animation) to "(Shape.Fill).(SolidColorBrush.Color)".  This last value probably seems overly complicated, but that's the correct way to modify the fill of a shape.

   For the second storyboard we repite the same values, just changing the To attribute to "Red" (the color for the circle once the mouse leaves it).

5. Once we define the animations, all that it's left is the code to launch them. We'll go to the C# code behind, and write the RedCircle_MouseEnter and RedCircle_MouseLeaves. In each of the methods, we'll call the corresponding animation's Begin method in order to start the animation.

   private void RedCircle_MouseEnter(object sender, MouseEventArgs e)

   {

       RedCircleAnimation_MouseEnter.Begin();

   }

    

   private void RedCircle_MouseLeave(object sender, MouseEventArgs e)

   {

       RedCircleAnimation_MouseLeave.Begin();

   }

   Since the animation has a set duration, there is no need to invoke any methods to stop the animation. The animation itself will stop at 2 seconds (the set Duration), and the color will be changing during it.

6. After setting up the code, we'll have a circle that changes color from to red to blue and back as the mouse enters and leaves the shape.

With this, we have our first Silverlight animation completed. While it's a very simple one, animations like this are the foundation of more complex ones.

The complete code of the animation can be obtained here.