Did You Know… That You Can Create A Timer Using XAML Animation?

To do so, create a Storyboard and mark that you will handle the Completed event.

<Storyboard Completed="OnTimerCompleted">

Put in the simplest Animation you can manage (name it, so that you can set the duration programmatically).

<DoubleAnimation x:Name="TimerDuration"

make sure you give it a duration, and point it at the simplest object you can create.


When the duration expires you can take action and, if you wish, reset the timer.

function OnTimerCompleted…

Here's a complete sample…

<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
            <DoubleAnimation x:Name="TimerDuration"
                Storyboard.TargetProperty="Height" />

        <Rectangle x:Name="MyRect"/>


Here's the javascript…

MyDemo.Scene.prototype =
    handleLoad: function(plugIn, userContext, rootElement) 
        // set the timer duration
        timer = plugIn.content.findName("TimerDuration"); 
        // start the timer
        myStoryboard = plugIn.content.findName("myTimer"); 

function OnTimerCompleted(sender, args)
       alert ("Timer completed!");
       myStoryboard = sender.findName("myTimer");
       myStoryboard.begin();  //restart timer

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen Pluralsight & LinkedIn Learning courses. He was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP and a Microsoft MVP.
This entry was posted in z Silverlight Archives and tagged . Bookmark the permalink.