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

WPF/E - The Matrix Reloaded

Bryant has taken the Matrix example and really polished it up. You can see the new and improved version here.

Great work Bryant!

WPF/E - How to Animate your Name!

Hey Readers...

During my undergraduate career I studied computer science. I was looking to expand my knowledge into working with some technologies that were closer to the user experience. Because of this, I took a Flash class in another department. One of the required projects was to create a basic animation that would animate our name. At that time, the movie "The Matrix" was pretty big, so I used that as the premise for the animation. I'm sure you've all seen it.

I decided to take that animation and re-create it using WPF/E. My main focus was I wanted to see how efficient the JavaScript was while attempting to "animate" (please note, I'm not using the WPF/E Animation, rather animation via JavaScript) several items. The code for this project is available here. It would definately have been more savvy to let the JavaScript generate the textblocks. However, I wanted to see how the technology would perform with the manipulating each textblock individually. I was very happy with the result.

If you have any questions about the code, please feel free to post a comment. In addition, I have some ideas for some other types of controls I would like to post over the next couple of weeks, so stay tuned! Now, here is the little name animator. Enjoy!



NOTE: This code was written with the WPF/E Febuary 2007 CTP

WPF/E - How use drag and drop

One very important feature of rich internet applications is the ability to implement drag-n-drop. Lorin from the WPF/E Developer Content Team has posted a great walkthrough of how to implement drag-n-drop within WPF/E. In addition, there is a demo application.

Personally, one of the cool features that I noticed was, if you drag and drop the sunglasses on the dog, you can still see the dogs eyes. I really appreciated the fact that the sunglasses utilized other WPF content instead of just using a bitmap. It demonstrates how powerful the platform is.