Search
Author
ASP.NET Tutorials
Author
Sheo Narayan
Silverlight 4.0 Tutorials
Silverlight 1.0 Tutorials
Latest Articles
Winners

Win Prizes

Social Presence
Like us on Facebook
Silverlight Tutorials | Report a Bug in the Tutorial
Bookmark It
Silverlight Animation Tutorials
The great thing about animation in Silverlight is that you can animate the object by specifying simple xaml syntaxes :). To animate a particular object you need to know three basic things.
  • Find an object to animate
  • Create an EventTrigger
  • Create a storyboard and specify animation effects
 
DEMO : Animating Objects Show Source Code
Finding object to animate
Finding object to animate is very simple, just you need to specify the x:Name attribute of the object. 
<Canvas 
xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Rectangle x:Name="objectToAnimate" Canvas.Left="5" Fill="Red" Canvas.Top="5" 
        Height="25" Width="25" Stroke="Blue" StrokeThickness="3">
    </Rectangle>
</Canvas>
Creating an EventTrigger
Now that you have your object to animate, the next step is to create an EventTrigger. An EventTrigger performs an action when something triggers it. Here "something" must be an event specified by its RoutedEvent property. EventTrigger only support Loaded event so we need to set the RoutedEvent property to Canvas.Loaded. This will start the animation when the parent Canvas object will be loaded. Now as we want the EventTrigger to start the animation, so we need to use a specific BeginStoryboard tag. 
 <Canvas 
xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Canvas.Triggers>
    <Rectangle x:Name="objectToAnimate" Canvas.Left="5" Fill="Red" 
        Canvas.Top="5" Height="25" Width="25" Stroke="Blue" StrokeThickness="3" />
</Canvas>
Creating a Storyboard and an Animation
A StoryboardM describes and control one or more animations for an object. Generally, we animate an object by changing the properties of an object. In this case I am going to use DoubleAnimation to change the Canvas.Left property of the Rectangle object. Here I am using DoubleAnimation because Canvas.Left is of Double data type. For an object to animate, we need to specify the target name of the object as Storyboard.TargetName="objectToAnimate", a target property as Storyboard.TargetProperty="(Canvas.Top)" , a value till that point it will animate To="200" and a duration as Duration="0:0:3". Here notice the value of Duration, it specifies the length of the animation and takes value as hour:minute:seconds, so in this case after every 3 seconds the Canvas.Top property will be changed. 
<Canvas 
xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
  <EventTrigger.Actions>
    <BeginStoryboard>
      <Storyboard>
        <DoubleAnimation Storyboard.TargetName="objectToAnimate" 
            Storyboard.TargetProperty="(Canvas.Top)"
                          To="350" Duration="0:0:3"/>
      </Storyboard> 
    </BeginStoryboard>
  </EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
<Rectangle x:Name="objectToAnimate" Canvas.Left="5" Fill="Red"
     Canvas.Top="5" Height="25" Width="25" Stroke="Blue" StrokeThickness="3" />
</Canvas>
Show/Hide Example
Color Animation
ColorAnimation is simplest thing to do. You just need to specify the Storyboard.TargetProperty as "(Fill).(Color)" with From and To color with Duration. 
<Canvas 
    xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation Storyboard.TargetName="objectToAnimate" 
                    Storyboard.TargetProperty="(Fill).(Color)"
                                From="Black" To="Yellow" Duration="0:0:2"/>
              </Storyboard> 
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Canvas.Triggers>
      <Rectangle x:Name="objectToAnimate" Canvas.Left="5" 
        Fill="Red" Canvas.Top="15" Height="100" Width="100" Stroke="Blue" 
            StrokeThickness="3" />
  </Canvas>
Show/Hide Example
Other Animations

In the right side, you can see that the 1st Rectangle is same as above, I am simply using ColorAnimation to animate the color.

2nd Rectangle object, I have specified the Storyboard.TargetProperty="Height" and specified the From and To property with Duration to animate the height of the object. In addition to that I have again added ColorAnimation to the same object and animating the color. You can specify more than one animation behavior to a particular object.

3rd object, this is nothing but a Rectangle object but I have not specified Stroke property and the Width is only 5 so it is looking like a line. To rotate it I have specified its Storyboard.TargetProperty="(Rectangle.RenderTransform).Angle property and From, To as 0 and 360 respectiverly. But you will also notice that this object is under 2nd BeginStoryboard because I want it to follow the Duration property different than the 1st one. I have also specified ColorAnimation> to animate the color while it is rotating.

4th TextBlock object, I have specified the Opacity property as the Storyboard.TargetProperty value and changing the value of opacity from 0.0 to 1.0.

5th Ellipse object, I have specified Storyboard.TargetProperty="Offset" and From To property to animate the color of the Ellipse

Important Properties

AutoReverse: This property will automatically reverse the animation to the begining point, I have used it in the Ellipse object.
RepeatBehavior: This property will let you specify the repeat behavior of the animation. If you want your animation to continue forever, you may specify Forever or you can specify 1x or 2x ie. one time or two times.
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
      
        <!-- 1st Storyboard -->
        <BeginStoryboard>
          <Storyboard AutoReverse="True" RepeatBehavior="Forever" Duration="0:0:2">
            <ColorAnimation Storyboard.TargetName="objectToAnimate" 
                Storyboard.TargetProperty="(Fill).(Color)"
                            From="Black" To="Yellow" Duration="0:0:1"/>
            <DoubleAnimation Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Height" 
                From="0" To="150" Duration="0:0:1"/>
            <ColorAnimation Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="(Fill).(Color)" 
                From="Red" To="White" Duration="0:0:1"/>
            <DoubleAnimation Storyboard.TargetName="textblock1" 
                             Storyboard.TargetProperty="Opacity"
                              From="0.0" To="1.0" Duration="0:0:1"/>
          </Storyboard> 
        </BeginStoryboard>
        
        <!-- 2nd Storyboard -->
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Storyboard.TargetName="rectangle2" AutoReverse="False" 
                RepeatBehavior="Forever" Storyboard.TargetProperty="(Rectangle.RenderTransform).Angle" 
                    From="0" To="360" Duration="0:0:3"/>
            <ColorAnimation Storyboard.TargetName="rectangle2" RepeatBehavior="Forever" 
                Storyboard.TargetProperty="(Fill).(Color)" From="Blue" To="Red" Duration="0:0:3"/>
            
            <DoubleAnimation Storyboard.TargetName="elOffset1" Storyboard.TargetProperty="Offset" 
                From="0.5" To="0.0" RepeatBehavior="Forever" AutoReverse="True"/>
            <DoubleAnimation Storyboard.TargetName="elOffset2" Storyboard.TargetProperty="Offset" 
                From="1.0" To="0.5" RepeatBehavior="Forever" AutoReverse="True"/>
          </Storyboard>
        </BeginStoryboard>
        
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
    
  <Rectangle x:Name="objectToAnimate" Canvas.Left="5" Fill="Red" Canvas.Top="15" 
    Height="50" Width="50" Stroke="Blue" StrokeThickness="3" />
    
  <Rectangle x:Name="rectangle1" Canvas.Left="70" Fill="Red" Canvas.Top="15" 
    Height="50" Width="50" />
    
  <Rectangle x:Name="rectangle2" Canvas.Left="30" Fill="Black" Canvas.Top="110" 
    Height="25" Width="5">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="30"/>
    </Rectangle.RenderTransform>
  </Rectangle>
  
  <TextBlock x:Name="textblock1" Canvas.Left="10" Canvas.Top="200" Text="DotNetFunda.com" 
    FontSize="21" FontStyle="Normal" FontWeight="ExtraBold" FontFamily="Arial" FontStretch="ExtraExpanded">
    <TextBlock.Foreground>
      <RadialGradientBrush>
        <GradientStop  Color="Green" Offset="0.25"/>
        <GradientStop Color="Blue" Offset="0.6" />
        <GradientStop Color="Brown" Offset="1" />
      </RadialGradientBrush>
    </TextBlock.Foreground>
  </TextBlock>
  
  <Ellipse Canvas.Left="15" Canvas.Top="235" Width="150" Height="150">
    <Ellipse.Fill>
      <RadialGradientBrush>
        <GradientStop x:Name="elOffset1" Color="Red" Offset="0.0"/>
        <GradientStop x:Name="elOffset2" Color="Yellow" Offset="0.50"/>
        <GradientStop x:Name="elOffset3" Color="White" Offset="1.0"/>
      </RadialGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
  
</Canvas>