WPF "15 Puzzle" Sample Application

  • Article

I want to start sharing a couple of small demos that highlight various facets of Windows Presentation Foundation. We've just finished delivering a one-day overview of WPF to a selected audience of ISVs here in Redmond, and from next week we'll be taking this material around the world to a number of regional events. The demo I'm sharing today, 15 Puzzle, is a particular favorite of mine because it ties together a lot of Avalon concepts into a single application. This demo was written by Greg Schechter, one of the architects for WPF - I appear in the roll of credits somewhere between the carpenter and the make-up assistant since all I've added is an extra visualization and porting it to the latest (January 2006 CTP) build of WinFX.

Here's a screenshot to whet your appetite:

The application mimics one of those little plastic fifteen puzzle games that used to be popular in the innocent days of childhood before Xbox and Nickelodeon. You can click on a tile to move it into the empty square - the objective is to reorder the puzzle correctly.

One nice aspect of the application is that it demonstrates the use of templates in WPF. The The default tiles are just buttons numbered from 1-15, but you can change this using the Source drop-down listbox to vector content, animated vector content, an image, a playing video, a form, a document, or a spinning 3D cube. The application uses a VisualBrush to apply any of these content types to each of the puzzle portions, without requiring any logic in the manipulation of the puzzle to change. That's the nice thing about control templates - you can completely replace the look of any control (in this case a button) without fundamentally altering the behavior of that control.

Just for fun, the application also demonstrates the use of image effects - get a move wrong, and the application applies a progressively increasing blur effect to the UI, making it harder to adjust the settings. Very Dr. Evil!

I've uploaded both executable and source versions of this - to run the application, you'll just need the WinFX Runtime Components, which are available here. I should add a slight caveat that the media components aren't flawless right now, so it's possible you'll hit problems playing the video - make sure you've got the latest video driver installed as well as Windows Media Player 10.