Silverlight-Create Four Kinds Frequently Used Animations in Background CS

Usually, we crate aniomation in XAML. But in some particular cases, we need to create animation from background customize modification. In this post, I will introduce something about animation creation. In silverlight, there are four kinds frquently used animations: DoubleAnimation, ColorAnimation, PointAnimation, DooubleAnimationUsingKeyFrames.

  • DoubleAnimation: Generate animation by controlling some Double value. For example, largen or diminish space and transparency.
  • ColorAnimation: Control color changes, from green to blue.
  • PointAnimation: Operate animation by controlling Point location changes.
  • DoubleAnimationUsingKeyFrames: Add frame clips. Control some properties of one control changes on timer shaft.

DoubleAnimation, ColorAnimation, PointAnimation have the similar properties.

  • TargeName: Name of animation processing object
  • TargeProperty: Property of animation processing object
  • BeginTime: Time to trigger animation
  • From: Initial value of animation
  • To: End value of animation
  • By: Total amount of changes from intial value to end value
  • Duration: Lasting time of timeline
  • RepeatBehavior: Animation repeatedly playing time, times or kind.

DoubleAnimationUsingKeyFrames can add keys of several animation kinds interiorly, such as ColorAnimationUsingKeyFrames, DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames and so on.

There is one xaml file. There are four buttons and four controls. We can call different animations by clicking different buttons.

<Canvas x:Name=“LayoutRoot” Background=“White”>

        <Rectangle  RadiusX=“5” RadiusY=“5” Fill=“#FFE8BE59”  Height=“92” Name=“rectangle1” Stroke=“Black” StrokeThickness=“1” Width=“148” Canvas.Left=“47” Canvas.Top=“76” />

        <Button Canvas.Left=“47” Canvas.Top=“195” Content=“Start DoubleAnimationHeight=“23” Name=“button1” Width=“148” Click=“button1_Click” />

        <Rectangle Canvas.Left=“231” Canvas.Top=“76” Fill=“Green” Height=“92” Name=“rectangle2” RadiusX=“5” RadiusY=“5” Stroke=“Black” StrokeThickness=“1” Width=“148” />

        <Rectangle Canvas.Left=“414” Canvas.Top=“76” Fill=“DarkGoldenrod” Height=“92” Name=“rect” Opacity=“0.1” RadiusX=“5” RadiusY=“5” Stroke=“Black” StrokeThickness=“1” Width=“148” />

        <Button Canvas.Left=“414” Canvas.Top=“195” Content=“Start ColorAnimationHeight=“23” Name=“button2” Width=“148” Click=“button2_Click” />

        <Button Canvas.Left=“231” Canvas.Top=“195” Content=“Start ColorAnimationHeight=“23” Name=“button3” Width=“148” Click=“button3_Click” />

        <Button Canvas.Left=“593” Canvas.Top=“195” Content=“Start PointAnimationHeight=“23” Name=“button4” Width=“148” Click=“button4_Click” />

        <Ellipse Canvas.Left=“579” Canvas.Top=“76” Height=“92” Name=“ellipse1” Fill=“Blue” Stroke=“Black” StrokeThickness=“1” Width=“183” >


                <EllipseGeometry Center=“100,100” x:Name=“elgeome” RadiusX=“90” RadiusY=“60” />




Then, turn to MainPage.xaml.cs file. Create four global storyboards.

            //Load DoubleAnimation Animation Storyboard

            Storyboard sboard = new Storyboard();

            //Load ColorAnimation Animation Storyboard

            Storyboard colorboard = new Storyboard();

            //Load DoubleAnimationUsingKeyFrames Animation Storyboard

            Storyboard keyFrameboard = new Storyboard();

            //Load PointAnimation Animation Storyboard

            Storyboard pointboard = new Storyboard();

DoubleAnimation Background Code Creation and Operation

            #region Add DoubleAnimation in Background

            DoubleAnimation danima = new DoubleAnimation();

            //Set Double Type Number Change of Rectangle Control Transparency

            danima.SetValue(Storyboard.TargetNameProperty, “rectangle1”);

            danima.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath(“UIElement.Opacity”));

            //Transparency from 0.1 to 1

            danima.From = 0.1;

            danima.To = 1;

            danima.Duration = new Duration(new TimeSpan(0, 0, 5));


            this.LayoutRoot.Resources.Add(“Storyboard”, sboard);

            #end region

ColorAnimation Background Code Creation and Operation:

            #region Add ColorAnimation Animation in Background

            ColorAnimation coloranima = new ColorAnimation();

            //Set rectangle2 Control Color Change Animation

            coloranima.SetValue(Storyboard.TargetNameProperty, “rectangle2”);

            coloranima.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath(“(Shape.Fill).(SolidColorBrush.Color)”));

            //Set Color from Green to Blue

            coloranima.From = Colors.Green;

            coloranima.To = Colors.Blue;


            LayoutRoot.Resources.Add(“colorboard”, colorboard);

            #end region

PointAnimation Background Code Creation and Operation:

            #region Add PointAnimation in Background

            PointAnimation pointanima = new PointAnimation();

            //Center Point Change of EllipseGeometry

            pointanima.From = new Point(100, 100);

            pointanima.To = new Point(200, 100);

            //2 Seconds Passed

            pointanima.Duration = new TimeSpan(0, 0, 2);

            //Set Center Point EllipseGeometry.CenterProperty Location Change of EllipseGeometry Control

            Storyboard.SetTarget(pointanima, elgeome);

            Storyboard.SetTargetProperty(pointanima, new PropertyPath(EllipseGeometry.CenterProperty));


            LayoutRoot.Resources.Add(“pointboard”, pointboard);

            #end region

DoubleAnimationUsingKeyFrames Background Code Creation and Operation:

            #region DoubleAnimationUsingKeyFrames Animation in Background

            DoubleAnimationUsingKeyFrames dakeyframe = new DoubleAnimationUsingKeyFrames();

            //Set rect Control Opacity Transparency and the Beginning Time of Animation as 0 sec

            Storyboard.SetTarget(dakeyframe, rect);

            Storyboard.SetTargetProperty(dakeyframe, new PropertyPath(“UIElement.Opacity”));

            dakeyframe.BeginTime = new TimeSpan(0, 0, 0);

            //Add One Key with Opacity Transparency Value as 1 on 2 sec.

            SplineDoubleKeyFrame SKeyFrame = new SplineDoubleKeyFrame();

            SKeyFrame.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2));

            SKeyFrame.Value = 1;


            //Add One Key with Opacity Transparency Value as 0.1 on 4 sec.

            SplineDoubleKeyFrame SKeyFrame1 = new SplineDoubleKeyFrame();

            SKeyFrame1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4));

            SKeyFrame1.Value = 0.1;



            #end region

Finally, click button and run storyboard Begin() method to start animation.

Two Components Recommend:

Spire.Doc, is used to operate MS Word document for .Net and Silverlight, including basic manipulations (generate, open, edit documents), mail merge and other Word functions manipulations.

Spire.XLS, is used to operate MS Excel for .NET and Silverlight, including basic manipulations (generate, open, edit files), chart creation and data exporting.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s