Silverlight 5 3D Housebuilder Project Shown at MIX11 | John Papa

John Papa

Evangelist on the loose

Silverlight 5 3D Housebuilder Project Shown at MIX11


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):

  • A3D contains types to import and render 3D assets like a Model
  • MeshMender is for mesh stitching on import
  • Pina is a partial COLLADA file parser

More Information

For more information on Silverlight 3D and XNA:

Special thanks to Aaron Oneal of Microsoft and to Luigi Rosso of Archetype and his colleagues for their tremendous efforts on bringing life to the Housebuilder!


tags: 3d mix11 Silverlight xna
  • Denis

    I know, this can sound crazy, but please, please create a video tutorial how to create this application. There are no good tutorials about creating real world applications.

  • john

    Some folks have mentioned that the demo does runs but the models do not display well on their PCs. This is a beta and we are aware of a 1 issue we need to fix, so if you run into any problems please feel free to contact me at john dot papa at microsoft dot com and send me a screen shot of the problem.
    John Papa

  • Fanco

    Your page seems great, keep concerning :)

  • Manas

    Great news , was waiting for the sample since Mix .Thanks for sharing.

  • Leo

    (sorry for my bad english) I tried to run the sample on a Virtual Machine running windows 7 64bits (i can’t install the sl 5 bits on my main, “real” machine) and when running the project the 3d model do not show, just the silver background. If I enable “Use GPU Acceleration”, it changes a bit, the result is this:
    The white dots move on the screen like a rotating 3d model, but i cant see anything.
    Maybe is something caused by the VM virtualized 3D hardware?

  • Aaron Oneal

    @Denis – Can you tell me more about the specific features you would like to see a walkthrough of how to do?
    @Leo – We do require a hardware GPU for the feature, and so there might be an issue with certain virtualized drivers. Can you tell me more about your setup? Send a dxdiag log to aaron dot oneal at microsoft dot com and we can check it out.

  • Denis

    @Aaron Oneal – I’m new to 3D. I’m interested to learn how the whole application is created, from start to finish.

  • Stefan

    The project does not run on some computers because of the local language settings. On my German PC it looks similar than the image Leo posted. This is because in German the decimal separator is the comma, but the stuff that is parsed contains a point.
    Quick fix: Use Control Panel to switch Windows number format to English.
    Maybe setting the CurrentUICulture of the XNA rendering thread to English will help.
    Better fix: Add CultureInfo.InvariantCulture to every Parse and TryParse of float and double in the whole source code (several dozen places). That works, but I’m not sure if that is all that must be fixed.
    @John&Aaron: Please verify the code and fix this issue.
    -Stefan Lange

  • shaggygi

    @Aaron Oneal. In addition to Denis’ comments, I would also like to see a basic 3D app start to finish.
    Example… Build a living room with various items…. couch, picture frame, table, etc.
    How do you build the 3D room? What tools are available outside of Silverlight can we use?
    How do you import the 3D images create into Silverlight app?
    Include how to create animations on how to zoom to a specific view….. Have it look at the couch and then rotate the view to zoom into a picture on the wall.
    I’m sure others have comments to add in addition to this example we would like to see.
    Thanks again.

  • Denis

    @shaggygi – Yes, agree. It would be great to see a video series about creating a basic 3D app.

  • lidia

    Thank you for share !

  • Silverlight Blog

    This Post demonstrates how to use the new 3D features and other new features of silverlight 5 for housebuiler project.This is best example for silverlight developers to develop other projects.

  • JunCocoa

    在Silverlight 5 3D Housebuilder Project ,为什么运行没有房子,只有其它 UI 界面,我的运行环境是VS2010 SP1 , Silverlight 5 Bate 和 Silverlight 5 Tools,请多多指教,哪儿架设错误咯。

  • JunCocoa

    This project set up, why running without house, only other UI interface, my operation environment is VS2010 SP1 rc Silverlight 5 Bate, Silverlight 5 Tools. Exe and give advice or comments please

  • JunCocoa

    Silverlight 5 3D Housebuilder Project is running, why running without house, only other UI interface, my operation environment is VS2010 SP1 , Silverlight 5 Bate, Silverlight 5 Tools , give advice or comments please.
    Thank you John Papa

  • Nodir Yuldashev

    It’s great to see how Silverlight is maturing as one of the best UI development platforms. Good Job! Keep it up!

  • Randy

    The houses show up fine under Windows 7 but not under XP SP3. I’ve got two instance of XP and the houses don’t show on either.
    Can you let us know if there is an update to the code which fixes this?

  • Andrey

    Where can I play with it without building the application?

  • peaker

    my operation environment
    is win2003,
    Silverlight 5 3D Housebuilder Project is running, why running without house, only other UI interface, my operation environment is VS2010 SP1 , Silverlight 5 Bate, Silverlight 5 Tools , give advice or comments please.
    Thank you John Papa

  • Doug

    Just wanted to let people know about my project on CodePlex
    which is a 3D game engine targeting Silverlight 5 Xna. There is also a link to an online demo at CodePlex.

  • Zeng

    hi,why “The type or namespace name ‘Color’ could not be found (are you missing a using directive or an assembly reference?)”,?tks !

  • rod

    I tryed to compile the app against the RC version of silverlight.
    I changed some reference according David Catuhe blog.
    The problem is that now the application works but I cannot see any 3D content. I see only the 2d parts.

  • sa

    Please post haw to run this sample, a lot of error pops up, old references or so,
    I’ve Downloaded Xna Game Studio but still another problems exists

  • Antxon

    I have dowloaded the project and try to open the solution under Visual Studio 2010 Sp1 Spanish release. The house builder project could not be opened and is marked as non available.
    Any Idea?

  • Antxon

    I solved the problem. The Expression Blend Preview for SL5 should be installed in the computer. Then, the HouseBuilder project is opened.

  • hi

    Hi. Thanks for sharing! Do you mean I can open this project using visual studio 2010 silverlight 5 3D?
    May I know what app did you used to create this HouseBuilder Project?

  • hi

    Sorry. May I also know is there a storyboard to new created such that when I mouse over a certain object in the house, it will show the content?

%d bloggers like this: