Friday, February 16, 2007

WPF/E - Movie Slider Puzzle (Take 2)!

UPDATE - 05.05.2007 - The content of this post is no longer valid with the 1.0 beta release of Silverlight. The updated post and source code can be found here.

I decided that I wanted to play with the following WPF/E elements/features:
  • MediaElement
  • Clip
  • Drag and Drop functionality
  • The Downloader object
In the process I created a slider puzzle whose pieces are based upon a video! A sample of the project and the source code is available below. Please be patient as it may take a couple of minutes to download the video. You will know that the video is loaded when the playback buttons are positioned below the play surface. The video provides the following functionality:
  • Play/Pause
  • Stop
  • Re-scatter the pieces
  • Order the pieces in case you grow impatient :)
The project works by taking the video and measuring 9 pieces. Then, the video is loaded 9 separate times, one for each piece, which is defined as a Canvas. This is necessary because you can't actually cut up a video. This reveals the power of the "Clip" property. Each piece contains a clip that is the size of the piece. After the clip is in place, some good old-fashioned mathmatical calculations are used to define how to offset the position of the video within the canvas. If you look in the code, you'll notice that we use negative values to define the Canvas.Left and Canvas.Top proerties of the MediaElement. This positioning, in conjunction with the previously defined Clip, define what part of the video is visible to the user.

I look forward to your comments. This example can be improved upon, but I'm pretty excited about it. Enjoy!

Project Information
Source Code: here
WPF/E Runtime: Febuary 2007 CTP


Bryant Likes said...

Very cool! I like it!

Anonymous said...

Hmm it glitched up. The white part started to grow and took over all the video pieces.

Damn cool though.

Can you disable sound on all but one of the videos? I'm not sure if it's doing it on your machine, but on my machine it's chorusing.

tobi said...

As the anonymous guy said, there's some bug when you click the tiles. You instead have to move them with the mouse.

Chad Campbell said...

The reason why you have to move the tiles with the mouse is by design. I wanted to play around with the drag-n-drop functionality available within WPF/E. Sorry for any confusion. I hope you enjoyed the sample though.

Michael said...

Thanks for your nice post!