I am in the process of creating my first game in Silverlight, and one of the first things that I noticed I was missing from my Javascript-era toolkit was the setTimeout() function.

In short, this little function is the be-all, end-all of Javascript animation. It is the device you use to insert little “pauses” into your code so that objects appear to be moving. Without it, your pieces would simply start at one position, and appear at the final destination. I use it primarily to make sure that the browser takes the time to draw each step of the animation. Here’s an example of me using the setTimeout() function in Javascript, circa 1999 (it’s also less than 5K in total size!):

1. Create a new UIToolkit Class.

It was tempting when starting this tutorial to just create a class that does one thing. But as I move forward in my Silverlight adventures, it occurs to me that we’re probably going to encounter more of these types of needs in the future. So, I’m creating a UIToolkit class in my project. This will contain all of the little helper functions I create going forwards.

public static class UIHelper
    {
       
    }

2. Inherit from System.Windows.Threading.DispatcherTimer

We are primarily going to be using the DispatcherTimer as is, but we also need it to accept an Action to execute when the timer expires. So we will be creating a new class that inherits from the standard DispatcherTimer, adding an Action to its definition.

public class ActionTimer: System.Windows.Threading.DispatcherTimer
    {
        public Action Action { get; set; }
    }

3. Create a setTimeout method in UIToolkit

To keep it familiar for the Javascript folks out there, I’m keeping the name of the method setTimeout. It’s not even my usual casing, but for this example, I’m going to stick with the Javascript syntax.

Inside this method, we’re going to need an instance of our new ActionTimer, including the interval we want, and the method to call, as well as the calls to kick off the timer, and an event handler to manage each tick of the timer. Here’s the code:

public static void setTimeout(int milliseconds, Action action)
        {
            var timer = new ActionTimer
            {
                Interval = new TimeSpan(0, 0, 0, 0, milliseconds),
                Action = action
            };
            timer.Tick += new EventHandler(timer_Tick);
            timer.Start();
        }

        static void timer_Tick(object sender, EventArgs e)
        {
            var t = sender as ActionTimer;
            t.Stop();
            t.Action();
            t.Tick -= timer_Tick;
        }

Or, just copy this into a new class file

public static class UIToolkit
    {
        public static void setTimeout(int milliseconds, Action action)
        {
            var timer = new ActionTimer
            {
                Interval = new TimeSpan(0, 0, 0, 0, milliseconds),
                Action = action
            };
            timer.Tick += new EventHandler(timer_Tick);
            timer.Start();
        }

        static void timer_Tick(object sender, EventArgs e)
        {
            var t = sender as ActionTimer;
            t.Stop();
            t.Action();
            t.Tick -= timer_Tick;
        }
    }

    public class ActionTimer : System.Windows.Threading.DispatcherTimer
    {
        public Action Action { get; set; }
    }

4. How to call our new method

Now that we’ve got a setTimeout method that takes a number of milliseconds and an action, we need to call it for testing purposes. Below is the syntax we’ll be using. The major difference you’ll notice between this and the Javascript implementation is that our new method will take an entire block of code as our Action. In Javascript, we’re forced to concatenate a string of commands together, and it can get pretty messy fast. We are setting this up to call our method every 1000 milliseconds, or every ONE second.

Let’s see it in action!

Click here if the Silverlight below doesn’t load. Click here to download this sample code.