How to: Create a Timer in Silverlight

  • Article

Microsoft Silverlight version 1.0 does not provide a timer object. However, you can use a Storyboard object for the same purpose. This topic demonstrates how to use Storyboard to make function calls at every frame or at a time interval of your choice.

This topic contains the following sections:

  • Step-by-Step Instructions for Creating a Timer
  • Complete Example

Step-by-Step Instructions for Creating a Timer

The following simple example demonstrates how to create a timer with a Storyboard.

  1. Create the Storyboard: Create a Storyboard object in the resources block of your page. Give the Storyboard a name and a Duration. In this example, the Duration is 0, which will make the timer fire at every frame. You can adjust this duration to any time interval you want.

    XAML 
    


    <Canvas
xmlns="https://schemas.microsoft.com/client/2007"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<Canvas.Resources>
<!-- Timer Storyboard -->
<Storyboard Duration="0:0:0" x:Name="timerStoryboard" />
    

    </Canvas.Resources>
</Canvas>

    1. Add demonstration code: This example uses a simple animation to demonstrate the timer calls. The following code is added to create a rectangle that constantly fades in and out of view (Opacity is animated). In addition, a TextBlock, which is used later to output the current opacity value as that value is animated, is added.

      XAML 
      


      <Canvas
xmlns="https://schemas.microsoft.com/client/2007"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<Canvas.Resources>
<!-- Timer Storyboard -->
<Storyboard Duration="0:0:0" x:Name="timerStoryboard" />
      

      </Canvas.Resources>
<Rectangle
x:Name="MyAnimatedRectangle"
Width="100"
Height="100"
Fill="Blue"
Loaded="StartTimer">
<Rectangle.Triggers>
<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
<!-- This TextBlock is used to output the current opacity value of the Rectangle -->
<TextBlock Canvas.Top="110" x:Name="myTextBlock" ></TextBlock>
</Canvas>

      1. Start the timer: In the previous code, notice the Loaded event attached to the Rectangle that targets the StartTimer function. This function is used to start the timer at the same time the animation starts, as shown in the following code.

        JavaScript 
        


        // This function initially starts the timer. This
// function is called when the rectangle first loads.
function StartTimer(sender, mouseEventArgs)
{
// Retrieve the timer Storyboard and start it.
var timer =  sender.findName("timerStoryboard");
timer.begin();
}

        1. Iterate the timer: The next task is to call a function when the Storyboard ends, start the Storyboard again, call the function again, and so on. This creates an iterating timer. To do this, first attach a Completed event to the Storyboard.

          XAML 
          


          ...
<!-- Timer Storyboard -->
<Storyboard Completed="StoryboardFinished" Duration="0:0:0" x:Name="timerStoryboard" />
...

          Now create the **StoryboardFinished** function. 
          <table>
<thead>
<tr class="header">
<th>JavaScript</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><pre class="codeblock" style="background: transparent; border: none; margin: 0px; padding: 0px; font-family:'Courier New', Courier, monospace;" IsFakePre="true" xmlns="https://www.w3.org/1999/xhtml">

          // This function is called when the Completed event fires on // the timer Storyboard. It allows you to do something programmatically // after the Storyboard ends. It then starts the Storyboard again. // Because the timer Storyboard has a Duration of 0, this function // gets called at every frame. function StoryboardFinished(sender, mouseEventArgs) { var rect = sender.findName("MyAnimatedRectangle"); var txtBlock = sender.findName("myTextBlock"); // Output the current opacity value of the rectangle to the TextBlock. txtBlock.text = String(rect.opacity); var timer = sender.findName("timerStoryboard"); // Begin the timer Storyboard again. Because the Storyboard begins again // immediately after it last finished, this function gets called over // and over indefinitely. timer.begin(); }

          When you run this sample, you will see the opacity value update at each frame (very rapidly). You can adjust the timing interval by setting a different **Duration** value on the timing **Storyboard**.

          Complete Example

          XAML 
          <Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Resources>
    <!-- Timer Storyboard -->
    <Storyboard Duration="0:0:0" Completed="StoryboardFinished" x:Name="timerStoryboard" />
    
  </Canvas.Resources>
  <Rectangle
    x:Name="MyAnimatedRectangle"
    Width="100"
    Height="100"
    Fill="Blue"
    Loaded="StartTimer">
    <Rectangle.Triggers>
      <!-- Animates the rectangle's opacity. -->
      <EventTrigger RoutedEvent="Rectangle.Loaded">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="MyAnimatedRectangle"
              Storyboard.TargetProperty="Opacity"
              From="1.0" To="0" Duration="0:0:5" 
              AutoReverse="True" RepeatBehavior="Forever" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Rectangle.Triggers>
  </Rectangle>
  <!-- This TextBlock is used to output the current opacity value of the Rectangle -->
  <TextBlock Canvas.Top="110" x:Name="myTextBlock" ></TextBlock>
</Canvas>
          JavaScript 
          // This function initially starts the timer. This
// function is called when the rectangle first loads.
function StartTimer(sender, eventArgs)
{
    // Retrieve the timer Storyboard and start it.
    var timer =  sender.findName("timerStoryboard");
    timer.begin();
}
// This function is called when the Completed event fires on
// the timer Storyboard. It allows you to do something programmatically
// after the Storyboard ends. It then starts the Storyboard again. 
// Because the timer Storyboard has a Duration of 0, this function
// gets called at every frame.
function StoryboardFinished(sender, eventArgs)
{
  var rect = sender.findName("MyAnimatedRectangle");
  var txtBlock = sender.findName("myTextBlock");
  // Output into the TextBlock the current opacity value of the rectangle.
  txtBlock.text = String(rect.opacity);
  var timer =  sender.findName("timerStoryboard");
  // Begin the timer Storyboard again. Because the Storyboard begins again
  // immediately after it last finished, this function gets called over
  // and over indefinitely. 
  timer.begin();
}

          See Also

          Animation Overview
          Overviews and How-to Topics