I presented this application during the MIX11 Day 2 keynote to demonstrate the new 3D features in Silverlight 5 along with a few other new Silverlight 5 features including RelativeSource Ancestor, Data Binding Debugging, Implicit DataTemplates, and Binding in Style Setters.

Download it now

You can download the source for the 3D Housebuilder on the MSDN Code Sample Gallery

4-27-2011 4-33-10 PM

Application workflow

  • Select a type of house to start from a base model
  • Add details like doors and windows and customize their color
  • Change the camera angle using the arrow keys
  • The brick house has layering, so you can remove layers and view the interior of the house
  • View the final price list of materials
  • Technical topics

    • Integrate Silverlight UI with XNA 3D using DrawingSurface
    • Load and render a 3D model (partial COLLADA support)
    • Configure the graphics pipeline for rendering
    • Load and mipmap textures
    • Apply pixel and vertex shaders
    • Project 2D mouse coordinates into 3D space
    • Use the MVVM pattern
    • Create custom UI controls
    • The color swatches in step 2 use binding in style setters to apply the colors to the door and shutter models
    • The construction list in step 3 uses implicit data templates
    • Some templates in the construction list in step 3 use the RelativeSource Ancestor feature to load their ItemsSource
    • The demo set a breakpoint on the price of the door in the door template (in the construction list in step 3) to demonstrate data binding debugging. You can do this anywhere you choose.
    • 4-27-2011 2-48-47 PM

      Building the Project

      The project depends on behaviors in the ExpressionBlend Preview for Silverlight 5, so install it along with the included Silverlight 5 SDK first.

      Open the HouseBuilder solution to build the project. To run the application after building, ensure HouseBuilderSite is the startup project and start with or without debugging from the Debug menu.

      Other included projects (created by Archetype):