Share via

MIX09 - The Gratuitous Graphics Demo

  • Article

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

Comments

  • Anonymous
    March 20, 2009
    PingBack from http://blog.a-foton.ru/index.php/2009/03/20/mix09-the-gratuitous-graphics-demo/

  • Anonymous
    March 21, 2009
    Note that in the running demo, the HD Video RadioButton doesn't do anything right now since I wanted to get this posted sooner rather than later and I didn't have any video less than about 15MB.  In the project, you can see the commented out source for it, though.

  • Anonymous
    March 22, 2009
    Build error: Error 1 Xap packaging failed. Could not find file 'C:ArchivesTestBouncingPlaneBouncingPlaneShaderBytecodeColorKeyAlpha.fx.ps'. BouncingPlane Donald Adams

  • Anonymous
    March 25, 2009
    I've been out of the office for the last few days but I've gotten some feedback indicating that the links are not working.  I'm working on getting that permanently fixed.

  • Anonymous
    March 26, 2009
    Figured out what was happening... the build was wiping out the files because I didn't have the directX SDK installed.  It would help if it was added to a Readme.txt file and removed so does not confuse people.

  • Anonymous
    March 30, 2009
    In part 2 of the series, I explained the different target scenarios for Silverlight and Windows Presentation

  • Anonymous
    March 30, 2009
    @Bydia - Thanks for the comments and feedback.  I'll keep this in mind for future posts.

  • Anonymous
    April 19, 2009
    The source code of the demo showed by Scott Guthrie during the Keynote at MIX09 is available thanks to

  • Anonymous
    April 19, 2009
    The source code of the demo showed by Scott Guthrie during the Keynote at MIX09 is available thanks to

  • Anonymous
    April 30, 2009
    Thanks again to Marc Schweigert for hosting last night’s DevDinner in Reston. My blog is at www.irritatedVowel.com/Blog

  • Anonymous
    May 29, 2009
    Saptamana asta am avut privilegiul de a tine o prezentare despre Silverlight 3, in fata celor prezenti