Porting a simple Silverlight game loop to Windows 8 Metro style

The other evening I went on the hunt for a XAML/C#-based example of a game loop. I ran into a couple of OLD blog posts by Mike Snow. Naturally it caught my eye, simply because of his last name.

In his posts he described game loop based on Silverlight 2. OK. Silverlight uses XAML, and the code was C#. XAML/C# are first-class citizens in the Windows 8 Metro style app world, so I figured, why not see what it takes to make this work on Windows 8?

The posts I used as reference:

The first post contains the code for the majority of the application – the XAML and the C# code. In second post Mike switches the game loop to use CompositionTarget.Rendering instead of DispatcherTimer or the Storyboard timer. Are they still around in the Metro XAML world?

To find out, I open Visual Studio and took a look in the Object Browser. Guess what I found.

Yep. DispatcherTimer, Storyboard, and CompositionTarget are all alive and well in the Windows.UI.XAML namespaces.

So I figured, why not give it a try?

It turned out that most of the “work” was simple copy & paste. I had to change the using statements to point to the Windows.UI.Xaml namespaces for the controls. Had to change the signature for a couple of the event handlers. And a few other minor things.

Here are the steps I took to make the port.


  1. Create a new C# Metro style BlankApplication called Win8Snowflakes.
  2. Delete BlankPage.xaml then added a new UserControl named MainPage.xaml. (Yes, we’re adding a UserControland naming it a page.)
  3. Replace the contents of MainPage.xaml with the XAML for the UserControl Snowflakes.Page(from the blog post “making it snow”). Then . . .
    1. Replace All UserControl with Page
    2. Change x:Class="Snowflakes.Page" to x:Class=“Win8Snowflakes.MainPage”to match the name of the app & page.
    3. Remove the full screen Button. Just delete that entire tag. We won’t worry about going full screen.


  1. Replace the contents of MainPage.xaml.cs with the C# code sample for public partial class Page : UserControl(from the blog post “making it snow”). Then. . .
    1. In the using statements you’ll see some red squigglies. To get rid of them, change Controls, Documents, Media, Media.Animation, Input, and Shapes to reference Windows.UI.Xaml instead of System.Windows
    2. Add the following using statement: using Windows.UI.Xaml.Controls.Primitives;
    3. Change namespace Snowflakes to namespace Win8Snowflakes
    4. Change Page : UserControl to MainPage : Page
    5. The method prototypes for the event handlers for Slider_ValueChanged and Wind_ValueChanged need to be changed. You need to replace RoutedPropertyChangedEventArgs<double> with RangeBaseValueChangedEventArgs, such as from this:
      1. Wind_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) to this: private void Wind_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
    6. Remove the Button_Clickmethod. (We’re not going to deal with changing the window size for now.)
    7. In the MainPage()constructor, we need to change the way the event handler is defined and the signature for the event handler.
      1. To wire up the event handler, _snowflakeTimer.Completed +=_snowflakeTimer_Completed;
      2. And the new signature for the event handler: void _snowflakeTimer_Completed(object sender, object e)


  1. Add a new UserControl to your project and name it Snowflake.xaml
  2. Replace the contents of Snowflake.xaml with the XAML for the Snowflakes.Snowflake (from the blog post “making it snow”). Then . . .
    1. Change x:Class="Snowflakes.SnowFlake" to x:Class="Win8Snowflakes.SnowFlake"


  1. Replace the contents of Snowflake.xaml.cs with the C# code sample for public partial class Snowflake : UserControl (from the blog post “making it snow”). Then. . .
    1. Change the using statements just as we did in MainPage.xaml.cs to reference the Windows.UI.Xaml namespaces for Controls, Documents, Media, Media.Animation, Input, and Shapes
    2. Change namespace Snowflakes to namespace Win8Snowflakes


  1. In the OnLaunched() method, change rootFrame.Navigate(typeof(BlankPage)); to rootFrame.Navigate(typeof(MainPage));


  1. Download the zip file containing the two image files (one is for the background and the other for the snowflake) from Mike’s download link.
  2. Unzip the files and copy them to your project’s folder.
    1. Right click on the project and Add Existing Item, and select the two files, to add them to the project itself.

Time to run the app. You should see this

The running app.Congratulations.

One more change

It’s very easy to change the game loop to use the CompositionTarget.Rendering event instead of a Storyboard.

  1. In the MainPage() constructor for MainPage.xaml.cs
    1. Remove the following 3 lines:_snowflakeTimer.Duration = TimeSpan.FromMilliseconds(10); _snowflakeTimer.Completed +=_snowflakeTimer_Completed; _snowflakeTimer.Begin();
    2. And replace them with this one line: CompositionTarget.Rendering += CompositionTarget_Rendering;
    3. Change the signature for the event handler method itself
      1. from void _snowflakeTimer_Completed(object sender, object e)
      2. to void CompositionTarget_Rendering(object sender, object e)

And that’s it.

As you’ve probably heard over and over again, if you’re a Silverlight developer you have the skills to be a Windows 8 Metro style developer.

A great resource for developing Metro style apps on Windows 8 is http://dev.windows.com.

Happy Windows 8 developing!

--bliz (@snowstormlife)

Comments (6)
  1. Jason says:

    Thanks to Mr. Blizzard and Mr. Snow on this one! I had been asking around for suggestions on converting my XNA/Silverlight games using XNA Dispatchtimer for the game loop and everybody kept staring at me blankly saying HTML5. Well here it is, thanks again.

    So cold in here! 🙂

  2. Hi Jason, glad you found the info helpful. — bliz

  3. Jan says:

    Very glad to have found this ahead of the Windows 8 Hackathon in Berlin 🙂

  4. @Jan – I hope it helps. Have fun at the hackathon!  (By the way, I haven't taken a look yet to see if there were any breaking changes for this app using Windows 8 Release Preview and VS 2012 Release Candidate. That's on my to-do list. The code in the blog post was using the Windows 8 Consumer Preview release and VS11 BETA.)

  5. ian says:

    Hi.  I just wanted to point out that the links you have in your article no longer point to pages/files that you had intended.

    Thanks for the great article though.

  6. Alex Schearer says:

    While using CompositionTarget.Rendering works I think it's not a great option. It ties your updates to framerate which is not suitable for many types of games. You also have no idea how much time passed between frames which again is a problem for certain games. I have detailed two alternatives (as well as this option) on my blog:


    In a nutshell I would recommend developers interested in making a game for Windows 8 to either:

     1. Use MonoGame and effectively XNA, or

     2. Use MonoGame's GameTimer

    Hope this helps!

Comments are closed.

Skip to main content