WPF "15 Puzzle" Sample Application

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.

Comments (6)

  1. Anonymous says:

    Hmmmm. the exe seems to work however, the src hangs when extracting… might be a problem on my end.

    Nice concept for a sample.


  2. JoeW says:

    Great sample.  I’m still concerned with performance on XP.

    Running this on my Protege 205 gives about one frame every 3 seconds for the spinning cube.  

    I known WPF does more to present a scene, but once it’s presented shouldn’t we be seeing perf close to DX9?  My Protege has a NVidia GeForce Go5200.  

    I’ve done my own testing and found that the perf isn’t really a function of polygons – it seems to be a a factor of total screen size.  Maybe it’s just an issue with presenting the buffer to window.

    Joe Wood

  3. Anonymous says:

    On my box (2.8GHz P4 + Radeon 9800pro) this demo sucks up 100% CPU when displaying anything but the most basic of the settings.

    Im really not convinced that the hardware acceleration promised by Avalon/WinFX does in fact exist, and Im pretty sure an all-software solution such as Flash would perform better for the same kinds of tasks I see in these demos.

  4. Anonymous says:

    An Introduction to XAML, Cider and all things WPF: by Andy Sithers

    Let me begin with a confession. I’m…

  5. Is there the same application, but working with the Feb CTP of WinFX ?


  6. Tim Sneath says:

    Latest version of this app is now included in the SDK. Check out the Samples / Windows Presentation Foundation Samples / Application Samples / Slide Puzzle Demo node.

Skip to main content