Masked Video Silverlight Interface

Here’s a simple sample of a Silverlight Video Interface. The idea came to me from something I was watching on television. I wanted to create a simple grid-like interface that could just mask an underlying video. The exercise also includes animated transitions to random UI arrangements each time the video ends.

Starting Position…

Transitioning…

Next Position…

I created the app using only Microsoft’s Expression Blend. The interactivity is mostly based on behaviours and visual states. Here is the simple code I used to play the video and transition between states whenever the MediaEnded event is fired.



The XAML is just a 4x4 grid with a bunch of rectangles.

The Visual States definition is the one making the changes and firing up the animations. The beauty of Blend is that you can achieve complex levels of interactivity with pre-built behaviours and tweak them to your needs really fast. This as you could guess, allows rapid prototyping to prove concepts and interaction behaviours.
Since I don’t think is worth to go through the visual states of the app here, I have posted the full solution for download on Github. Feel free to get the code and play with it. Try to use only Blend and change the transitions, animations and timing. Hope you have fun with it!
Cheers!