.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Create animations in Silverlight : Part 1

Posted By:Mahadesh Mahalingappa       Posted Date: September 30, 2011    Points: 200    Category: Silverlight    URL: http://www.dotnetspark.com  

In this article we are going to see how we can create animations in Silverlight .
 

In this article we are going to see how we can creata animations in Silverlight .

Silverlight offers a much simpler way to create animations .

Lets see few examples of creating animations in Silverlight .





In this article we are going to check out the Double Animations in Silverlight .    Double Animation Animates the value of a Double property between two target values using linear interpolation over a specified Duration.

More Information can be found here . http://msdn.microsoft.com/en-us/library/system.windows.media.animation.doubleanimation%28v=vs.95%29.aspx

Xaml Code :

<UserControl.Resources>
 
  <Storyboard x:Name="Storyboard1">
  <DoubleAnimation
   Storyboard.TargetName="AnimatedRectangle"
   Storyboard.TargetProperty="Opacity"
   From="1.0" To="0.0" Duration="0:0:1"
   AutoReverse="True"
   RepeatBehavior="Forever" />
  Storyboard>
  UserControl.Resources>
 
  <Grid x:Name="LayoutRoot" Background="White">
 
  <Rectangle MouseLeftButtonDown="MyAnimatedRectangle_MouseLeftButtonDown"
   x:Name="AnimatedRectangle"
   Width="100" Height="100" Fill="Blue" />
 
 
  Grid>

Code Behind :

private void MyAnimatedRectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  {
  Storyboard1.Begin();
  }

Compile and Run to View the animation.

Lets understand the animation we just created .

  <DoubleAnimation
   Storyboard.TargetName="AnimatedRectangle"
   Storyboard.TargetProperty="Opacity"
   From="1.0" To="0.0" Duration="0:0:1"
   AutoReverse="True"
   RepeatBehavior="Forever" />

Storyboard.TargetName :  This indicates the Target Control on which the animation is to be applied .
 
<Storyboard x:Name="Storyboard1">
  <DoubleAnimation
   Storyboard.TargetName="AnimatedRectangle"
   Storyboard.TargetProperty="Opacity"
   From="1.0" To="0.0" Duration="0:0:1"
   AutoReverse="True"
   RepeatBehavior="Forever" />
 
Storyboard.TargetProperty

Storyboard.TargetProperty : This indicates the Property of the Control on which the animation is to be applied .

<DoubleAnimation
   Storyboard.TargetName="AnimatedRectangle"
   Storyboard.TargetProperty="Opacity"
   From="1.0" To="0.0" Duration="0:0:1"
   AutoReverse="True"
   RepeatBehavior="Forever" />

From and To indicate the intial and final values of the Target Property of the Target Control. Duration indicated the time the animation would last .

One would need to modify this to create a quick or a slow animation .

<DoubleAnimation
   Storyboard.TargetName="AnimatedRectangle"
   Storyboard.TargetProperty="Opacity"
   From="1.0" To="0.0" Duration="0:0:1"
   AutoReverse="True"
   RepeatBehavior="Forever" />

AutoReverse = True indicates that once the animation is over the values of the Target Property of the Target Control should return to as they were before the animation .

The Default value of this Property is False .

<DoubleAnimation
    Storyboard.TargetName="AnimatedRectangle"
   Storyboard.TargetProperty="Opacity"
   From="1.0" To="0.0" Duration="0:0:1"
   AutoReverse="True"
   RepeatBehavior="Forever" />

RepeatBehavior = Forever indicates that the animation runs forever .

Hope this provides a good startup . We will go indepth into animations in future articles .

 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend