Source view of ANIMATION.ASPX
 		DotNet Funda: Code Viewer
animation.aspx | animation.aspx.cs 		Close Window  
    AutoEventWireup="true" CodeFile="animation.aspx.cs" Inherits="tutorials_controls_tutorialtemplate_Animation"
    Title="Silverlight Animation Tutorials : DotNetFunda.com" %>

<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderForTitleAndIntro" runat="Server">
    <table width="100%" cellpadding="2" cellspacing="0">
        <tr valign="top" class="ArticleTitle">
            <td style="padding-left: 10px;" valign="middle">
                Silverlight Animation Tutorials</td>
        </tr>
        <tr>
            <td class="ArticleContents">
                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.<br />
                <ul>
                    <li>Find an object to animate<br /></li>
                    <li>Create an EventTrigger<br /></li>
                    <li>Create a storyboard and specify animation effects<br /></li>
                </ul>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                &nbsp;</td>
        </tr>
    </table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" runat="Server">
        <!-- START - Demo Section -->
        <table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
            <tr>
                <td class="DemoTitle" style="width:50%;">
                    DEMO : Animating Objects
                </td>
                <td align="right">
                    <a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/silverlight/animation.aspx"
                        target="_blank">Show Source Code</a>
                </td>
            </tr>
            <tr valign="top">
                <td>
                   <b>Finding object to animate</b><br />
                   Finding object to animate is very simple, just you need to specify the <span class="DemoCP">x:Name</span> attribute of the object.
                    <pre>
&lt;Canvas 
xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
    &lt;Rectangle x:Name="objectToAnimate" Canvas.Left="5" Fill="Red" Canvas.Top="5" 
        Height="25" Width="25" Stroke="Blue" StrokeThickness="3"&gt;
    &lt;/Rectangle&gt;
&lt;/Canvas&gt;        
                    </pre>
                </td>
                <td>
                    <!-- START - Define XAML content. -->
                    <script type="text/xaml" id="xamlScript1">
                    <?xml version="1.0"?>
                      <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>
                    </script>
                    <!-- END - Define XAML content. -->
                    <div id="pluginHost1">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost1', '200', '100', '#xamlScript1')
                        </script>
                    </div>
                </td>
            </tr>
             <tr valign="top">
                <td>
                   <b>Creating an EventTrigger</b><br />
                   Now that you have your object to animate, the next step is to create an <span class="DemoCP">EventTrigger</span>. An EventTrigger performs an action when something triggers it. Here "something" must be an event specified by its <span class="DemoCP">RoutedEvent</span> property. EventTrigger only support Loaded event so we need to set the <span class="DemoCP">RoutedEvent</span> property to <span class="DemoCP">Canvas.Loaded</span>. 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 <span class="DemoCP">BeginStoryboard</span> tag.
                    <pre>
 &lt;Canvas 
xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
    &lt;Canvas.Triggers&gt;
        &lt;EventTrigger RoutedEvent="Canvas.Loaded"&gt;
            &lt;EventTrigger.Actions&gt;
                &lt;BeginStoryboard&gt;
                    
                &lt;/BeginStoryboard&gt;
            &lt;/EventTrigger.Actions&gt;
        &lt;/EventTrigger&gt;
    &lt;/Canvas.Triggers&gt;
    &lt;Rectangle x:Name="objectToAnimate" Canvas.Left="5" Fill="Red" 
        Canvas.Top="5" Height="25" Width="25" Stroke="Blue" StrokeThickness="3" /&gt;
&lt;/Canvas&gt;                    </pre>
                </td>
                <td>
                    <!-- START - Define XAML content. -->
                    <script type="text/xaml" id="xamlScript2">
                    <?xml version="1.0"?>
                      <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>
                    </script>
                    <!-- END - Define XAML content. -->
                    <div id="pluginHost2">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost2', '200', '300', '#xamlScript2')
                        </script>
                    </div>
                </td>
            </tr>
            <tr valign="top">
                <td>
                <b>Creating a Storyboard and an Animation</b><br />
                    A <span class="DemoCP">StoryboardM</span> 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 <span class="DemoCP">DoubleAnimation</span> to change the <span class="DemoCP">Canvas.Left</span> property of the Rectangle object. Here I am using <span class="DemoCP">DoubleAnimation</span> because <span class="DemoCP">Canvas.Left</span> is of <span class="DemoCP">Double</span> data type.
                    For an object to animate, we need to specify the target name of the object as <span class="DemoCP">Storyboard.TargetName="objectToAnimate"</span>, a target property as <span class="DemoCP">Storyboard.TargetProperty="(Canvas.Top)"</span> , a value till that point it will animate <span class="DemoCP">To="200"</span> and a duration as <span class="DemoCP">Duration="0:0:3"</span>. Here notice the value of <span class="DemoCP">Duration</span>, it specifies the length of the animation and takes value as hour:minute:seconds, so in this case after every 3 seconds the <span class="DemoCP">Canvas.Top</span> property will be changed.
                
                    <pre>
&lt;Canvas 
xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
&lt;Canvas.Triggers&gt;
&lt;EventTrigger RoutedEvent="Canvas.Loaded"&gt;
  &lt;EventTrigger.Actions&gt;
    &lt;BeginStoryboard&gt;
      &lt;Storyboard&gt;
        &lt;DoubleAnimation Storyboard.TargetName="objectToAnimate" 
            Storyboard.TargetProperty="(Canvas.Top)"
                          To="350" Duration="0:0:3"/&gt;
      &lt;/Storyboard&gt; 
    &lt;/BeginStoryboard&gt;
  &lt;/EventTrigger.Actions&gt;
&lt;/EventTrigger&gt;
&lt;/Canvas.Triggers&gt;
&lt;Rectangle x:Name="objectToAnimate" Canvas.Left="5" Fill="Red"
     Canvas.Top="5" Height="25" Width="25" Stroke="Blue" StrokeThickness="3" /&gt;
&lt;/Canvas&gt;
                    </pre>
                </td>
                <td>
                    <!-- START - Define XAML content. -->
                    <script type="text/xaml" id="xamlScript3">
                    <?xml version="1.0"?>
                      <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>
                    </script>
                    <!-- END - Define XAML content. -->
                    <a href="javascript:ShowHide('pluginHost3')">Show/Hide Example</a>
                    <div id="pluginHost3" style="display:none;">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost3', '200', '400', '#xamlScript3')
                        </script>
                    </div>
                </td>
            </tr>
            <tr valign="top">
                <td>
                <b>Color Animation</b><br />
                    <span class="DemoCP">ColorAnimation</span> is simplest thing to do. You just need to specify the <span class="DemoCP">Storyboard.TargetProperty</span> as <span class="DemoCP">"(Fill).(Color)"</span> with <span class="DemoCP">From</span> and <span class="DemoCP">To</span> color with <span class="DemoCP">Duration</span>. 
                    <pre>
&lt;Canvas 
    xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
    &lt;Canvas.Triggers&gt;
        &lt;EventTrigger RoutedEvent="Canvas.Loaded"&gt;
          &lt;EventTrigger.Actions&gt;
            &lt;BeginStoryboard&gt;
              &lt;Storyboard&gt;
                &lt;ColorAnimation Storyboard.TargetName="objectToAnimate" 
                    Storyboard.TargetProperty="(Fill).(Color)"
                                From="Black" To="Yellow" Duration="0:0:2"/&gt;
              &lt;/Storyboard&gt; 
            &lt;/BeginStoryboard&gt;
          &lt;/EventTrigger.Actions&gt;
        &lt;/EventTrigger&gt;
      &lt;/Canvas.Triggers&gt;
      &lt;Rectangle x:Name="objectToAnimate" Canvas.Left="5" 
        Fill="Red" Canvas.Top="15" Height="100" Width="100" Stroke="Blue" 
            StrokeThickness="3" /&gt;
  &lt;/Canvas&gt;
                    </pre>
                </td>
                <td>
                    <!-- START - Define XAML content. -->
                    <script type="text/xaml" id="xamlScript4">
                    <?xml version="1.0"?>
                      <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>
                    </script>
                    <!-- END - Define XAML content. -->
                    <a href="javascript:ShowHide('pluginHost4')">Show/Hide Example</a>
                    <div id="pluginHost4" style="display:none;">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost4', '200', '400', '#xamlScript4')
                        </script>
                    </div>
                </td>
            </tr>            
<tr valign="top">
                <td>
                                <b>Other Animations</b><br />
                    <p>In the right side, you can see that the 1st <span class="DemoCP">Rectangle</span> is same as above, I am simply using <span class="DemoCP">ColorAnimation</span> to animate the color.</p>
                    <p>2nd <span class="DemoCP">Rectangle</span> object, I have specified the <span class="DemoCP">Storyboard.TargetProperty="Height"</span> and specified the <span class="DemoCP">From</span> and <span class="DemoCP">To</span> property with Duration to animate the height of the object. In addition to that I have again added <span class="DemoCP">ColorAnimation</span> to the same object and animating the color. You can specify more than one animation behavior to a particular object.</p>
                    <p>3rd object, this is nothing but a <span class="DemoCP">Rectangle</span> object but I have not specified <span class="DemoCP">Stroke</span> property and the <span class="DemoCP">Width</span> is only 5 so it is looking like a line. To rotate it I have specified its <span class="DemoCP">Storyboard.TargetProperty="(Rectangle.RenderTransform).Angle</span> property and <span class="DemoCP">From, To</span> as 0 and 360 respectiverly. But you will also notice that this object is under 2nd <span class="DemoCP">BeginStoryboard</span> because I want it to follow the <span class="DemoCP">Duration</span> property different than the 1st one. I have also specified <span class="DemoCP">ColorAnimation></span> to animate the color while it is rotating.</p> 
                    <p>4th <span class="DemoCP">TextBlock</span> object, I have specified the <span class="DemoCP">Opacity</span> property as the <span class="DemoCP">Storyboard.TargetProperty</span> value and changing the value of opacity from 0.0 to 1.0.</p>
                    <p>5th <span class="DemoCP">Ellipse</span> object, I have specified <span class="DemoCP">Storyboard.TargetProperty="Offset"</span> and <span class="DemoCP">From To</span> property to animate the color of the <span class="DemoCP">Ellipse</span></p>
                    <p>Important Properties</p>
                    <b>AutoReverse:</b> This property will automatically reverse the animation to the begining point, I have used it in the <span class="DemoCP">Ellipse</span> object.<br />
                    <b>RepeatBehavior:</b> This property will let you specify the repeat behavior of the animation. If you want your animation to continue forever, you may specify <span class="DemoCP">Forever</span> or you can specify <span class="DemoCP">1x or 2x</span> ie. one time or two times.<br />
                    
                    
                    <pre>
&lt;Canvas xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
   
  &lt;Canvas.Triggers&gt;
    &lt;EventTrigger RoutedEvent="Canvas.Loaded"&gt;
      &lt;EventTrigger.Actions&gt;
      
        &lt;!-- 1st Storyboard --&gt;
        &lt;BeginStoryboard&gt;
          &lt;Storyboard AutoReverse="True" RepeatBehavior="Forever" Duration="0:0:2"&gt;
            &lt;ColorAnimation Storyboard.TargetName="objectToAnimate" 
                Storyboard.TargetProperty="(Fill).(Color)"
                            From="Black" To="Yellow" Duration="0:0:1"/&gt;
            &lt;DoubleAnimation Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Height" 
                From="0" To="150" Duration="0:0:1"/&gt;
            &lt;ColorAnimation Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="(Fill).(Color)" 
                From="Red" To="White" Duration="0:0:1"/&gt;
            &lt;DoubleAnimation Storyboard.TargetName="textblock1" 
                             Storyboard.TargetProperty="Opacity"
                              From="0.0" To="1.0" Duration="0:0:1"/&gt;
          &lt;/Storyboard&gt; 
        &lt;/BeginStoryboard&gt;
        
        &lt;!-- 2nd Storyboard --&gt;
        &lt;BeginStoryboard&gt;
          &lt;Storyboard&gt;
            &lt;DoubleAnimation Storyboard.TargetName="rectangle2" AutoReverse="False" 
                RepeatBehavior="Forever" Storyboard.TargetProperty="(Rectangle.RenderTransform).Angle" 
                    From="0" To="360" Duration="0:0:3"/&gt;
            &lt;ColorAnimation Storyboard.TargetName="rectangle2" RepeatBehavior="Forever" 
                Storyboard.TargetProperty="(Fill).(Color)" From="Blue" To="Red" Duration="0:0:3"/&gt;
            
            &lt;DoubleAnimation Storyboard.TargetName="elOffset1" Storyboard.TargetProperty="Offset" 
                From="0.5" To="0.0" RepeatBehavior="Forever" AutoReverse="True"/&gt;
            &lt;DoubleAnimation Storyboard.TargetName="elOffset2" Storyboard.TargetProperty="Offset" 
                From="1.0" To="0.5" RepeatBehavior="Forever" AutoReverse="True"/&gt;
          &lt;/Storyboard&gt;
        &lt;/BeginStoryboard&gt;
        
      &lt;/EventTrigger.Actions&gt;
    &lt;/EventTrigger&gt;
  &lt;/Canvas.Triggers&gt;
    
  &lt;Rectangle x:Name="objectToAnimate" Canvas.Left="5" Fill="Red" Canvas.Top="15" 
    Height="50" Width="50" Stroke="Blue" StrokeThickness="3" /&gt;
    
  &lt;Rectangle x:Name="rectangle1" Canvas.Left="70" Fill="Red" Canvas.Top="15" 
    Height="50" Width="50" /&gt;
    
  &lt;Rectangle x:Name="rectangle2" Canvas.Left="30" Fill="Black" Canvas.Top="110" 
    Height="25" Width="5"&gt;
    &lt;Rectangle.RenderTransform&gt;
      &lt;RotateTransform Angle="30"/&gt;
    &lt;/Rectangle.RenderTransform&gt;
  &lt;/Rectangle&gt;
  
  &lt;TextBlock x:Name="textblock1" Canvas.Left="10" Canvas.Top="200" Text="DotNetFunda.com" 
    FontSize="21" FontStyle="Normal" FontWeight="ExtraBold" FontFamily="Arial" FontStretch="ExtraExpanded"&gt;
    &lt;TextBlock.Foreground&gt;
      &lt;RadialGradientBrush&gt;
        &lt;GradientStop  Color="Green" Offset="0.25"/&gt;
        &lt;GradientStop Color="Blue" Offset="0.6" /&gt;
        &lt;GradientStop Color="Brown" Offset="1" /&gt;
      &lt;/RadialGradientBrush&gt;
    &lt;/TextBlock.Foreground&gt;
  &lt;/TextBlock&gt;
  
  &lt;Ellipse Canvas.Left="15" Canvas.Top="235" Width="150" Height="150"&gt;
    &lt;Ellipse.Fill&gt;
      &lt;RadialGradientBrush&gt;
        &lt;GradientStop x:Name="elOffset1" Color="Red" Offset="0.0"/&gt;
        &lt;GradientStop x:Name="elOffset2" Color="Yellow" Offset="0.50"/&gt;
        &lt;GradientStop x:Name="elOffset3" Color="White" Offset="1.0"/&gt;
      &lt;/RadialGradientBrush&gt;
    &lt;/Ellipse.Fill&gt;
  &lt;/Ellipse&gt;
  
&lt;/Canvas&gt;
                    </pre>
                </td>
                <td>
                    <!-- START - Define XAML content. -->
                    <script type="text/xaml" id="xamlScript5">
                    <?xml version="1.0"?>
                    <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 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>
        
        <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>

                    </script>
                    <!-- END - Define XAML content. -->
                    <div id="pluginHost5" style="display:;">
                        <script language="javascript" type="text/javascript">
                            createSilverlightPlugin('pluginHost5', '200', '400', '#xamlScript5')
                        </script>
                    </div>
                </td>
            </tr>               
    </table>

</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" runat="Server">
</asp:Content>

Go Top