Silverlight DoubleAnimation Example

In this article we will be seeing how to create Silverlight DoubleAnimation using Visual studio 2010.

Animations are created using the animating property values of objects. In this article we will be seeing how the Opacity property is animated. For creating animations in the Silverlight we need to create a Storyboard which is a container that contains the animation objects and we have to make the Storyboard a resource that is available to the object that we want to animate.

DoubleAnimation:

Double animation is used to animate the value of a Double property between two target values. Here we are going to animate the Opacity property which uses double, so we need to use the DoubleAnimation object. 

Namespace: System.Windows.Media.Animation

Assembly: System.Windows

It is defined by the following properties.

• AutoReverse.
• BeginTime.
• By.
• Duration.
• FillBehavior.
• From.
• RepeatBehavior.
• To.

AutoReverse:

It is used to specify a value that indicates whether the timeline plays in reverse after it completes a forward iteration.

BeginTime:

It is used to specify the time at which this Timeline should begin.

By:

It is used to specify the total amount by which the animation changes its starting value.

Duration:

It is used to specify the length of time for which this timeline plays.

FillBehavior:

It is used to specify a value that specifies how the animation behaves after it reaches the end of its active period.

From:

It is used to specify the animation's starting value.

RepeatBehavior:

It is used to specify the repeating behavior of this timeline.

To:

It is used to specify the animation's end value.

StoryBoard:

<Canvas Height="200" Width="200" Background="White">

        <Canvas.Resources>

            <Storyboard x:Name="storyBoard">

            </Storyboard>   

        </Canvas.Resources>

        <Rectangle x:Name="rectangle" Height="50" Width="50" Canvas.Left="75" Canvas.Top="75" Fill="Red"></Rectangle>

</Canvas>

Adding DoubleAnimation to StoryBoard:

<Storyboard x:Name="storyBoard">

    <DoubleAnimation Storyboard.TargetName="rectangle"

                     Storyboard.TargetProperty="Opacity"

                     From="1.0"

                     To="0.0"

                     Duration="0:0:1"

                     RepeatBehavior="Forever"

                     AutoReverse="True">

    </DoubleAnimation>

</Storyboard>    

Steps Involved:

Creating a Silverlight Application:

1. Open Visual Studio 2010. 
2. Go to File => New => Project. 
3. Select Silverlight from the Installed templates and choose the Silverlight Application template. 
4. Enter the Name and choose the location. 
5. Click OK. 
6. In the New Silverlight Application wizard check the "Host the Silverlight Application in a new Web site". 
7. Click OK.

Creating the UI:

Open MainPage.xaml file and replace the code with the following.

<UserControl x:Class="SilverlightDropShadowEffect.MainPage"

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

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

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

<Canvas Height="200" Width="200" Background="White">      

        <Canvas.Resources>

            <Storyboard x:Name="storyBoard">

                <DoubleAnimation Storyboard.TargetName="rectangle"

                                            Storyboard.TargetProperty="Opacity"

                                            From="1.0"

                                            To="0.0"

                                            Duration="0:0:1"

                                            RepeatBehavior="Forever"

                                           AutoReverse="True">

                </DoubleAnimation>

            </Storyboard>   

        </Canvas.Resources>

        <Rectangle x:Name="rectangle" Height="50" Width="50" Canvas.Left="75" Canvas.Top="75" Fill="Red"></Rectangle>

    </Canvas>

</UserControl>

Open MainPage.xaml.cs file and replace the code with the following.

public MainPage()

{

    InitializeComponent();

    storyBoard.Begin();

}

Testing the solution:

1. Build the solution. 
2. Hit ctrl+F5. 
3. Rectangle Fill color (which is red) , opacity will vary from 1.0 to 0.0.