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 |
Subscribe
5 comments:
Very cool! I like it!
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.
As the anonymous guy said, there's some bug when you click the tiles. You instead have to move them with the mouse.
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.
Thanks for your nice post!
Post a Comment