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


Comments (11)

  1. henryh says:

    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.

  2. Bydia says:

    Build error: Error 1 Xap packaging failed. Could not find file ‘C:ArchivesTestBouncingPlaneBouncingPlaneShaderBytecodeColorKeyAlpha.fx.ps’. BouncingPlane

    Donald Adams

  3. henryh says:

    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.

  4. Bydia says:

    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.

  5. In part 2 of the series, I explained the different target scenarios for Silverlight and Windows Presentation

  6. henryh says:

    @Bydia –

    Thanks for the comments and feedback.  I’ll keep this in mind for future posts.

  7. The source code of the demo showed by Scott Guthrie during the Keynote at MIX09 is available thanks to

  8. The source code of the demo showed by Scott Guthrie during the Keynote at MIX09 is available thanks to

  9. Thanks again to Marc Schweigert for hosting last night’s DevDinner in Reston. My blog is at http://www.irritatedVowel.com/Blog

  10. Saptamana asta am avut privilegiul de a tine o prezentare despre Silverlight 3, in fata celor prezenti