MIX09 - The Gratuitous Graphics Demo

It hasn't been nearly as long as I thought but it's certainly been a while since I've posted.  I helped out with one of the MIX09 keynote demos - the Silverlight 3 "Gratuitous Graphics" demo.  Instead of keeping it tied up on my machine, I thought I'd share it:)

Try it here! (click “Open” if prompted)

I'm fixing a problem with the linked source; for now, you'll need to download and build the project (see link below.)

The Demo

Some of you may recall a very similar demo from MIX08 done with WPF.  When the internal builds of SL3 included the new Perspective 3D feature as well as custom pixel shader support, I thought, "I wonder how hard it would be to replicate the WPF demo?"  Turns out it wasn't very hard.

While visually they're very similar, the mechanism for creating the 3D look is different.  WPF uses a 3D model and 3D rendering.  In SL3, it's a perspective transform exposed as the Projection property on UIElement.  It's of type ProjectionPlane which allows you to apply a perspective transform by specifying rotations about the X, Y and Z axes.

·         SL3 Projection Property

o   The 3D effect was created with UIElement.Projection property.

·         Custom Effects

o   I used the ones for WPF found on codeplex.  These are written in HLSL (looks very similar to C.)  I added some custom properties to these exposed on the defined Effects classes (e.g. I created the “ColorKey” property on the ColorKeyAlphaEffect so that you can dynamically pick which color to key from.)  If you’re going to edit or create any of your own effects, you’ll need the Microsoft DirectX SDK to compile the shaders.

·         Custom Physics Model

o   I built a very simple physics model to create the bounce effect.  I could have used the animation easing functions but I geeked out and used some long lost stuff I learned in college.)

·         DataGrid & Validation

o   Aside from video and images, the demo shows how you can apply the bouncy effect to standard controls.  Inside the DataGrid, I took advantage of some of the new validation support in SL (try entering a 3 or more letters for the State and press “tab”.)

Net, you get something that looks like the following (RippleEffect applied):

And for pure gratuitousness, double-click on the top 5-10% of the top edge of the floating frame; you should get a nice little flip:

Otherwise, I’ve zipped up the entire solution (after doing some simplification) and made it available for download.  If you have any questions about the code, let me knowJ

Download here:

Thanks

Henry