Porting a simple Silverlight game loop to Windows 8 Metro style

Yesterday 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:

• http://blogs.silverlight.net/blogs/msnow/archive/2008/09/22/silverlight-tip-of-the-day-44-making-it-snow-in-silverlight.aspx
• http://blogs.silverlight.net/blogs/msnow/archive/2008/09/29/silverlight-tip-of-the-day-50-main-game-loop-revisited.aspx

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.

MainPage.xaml

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 UserControl and 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.

MainPage.xaml.cs

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_Click method. (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)

Snowflake.xaml

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”

Snowflake.xaml.cs

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

App.xaml.cs

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

Images

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)