10 Laps around Silverlight 5 (Part 3 of 10)

This article is sponsored by Telerik RadControls for Silverlight. For similarly awesome content check out Telerik XAMLflix, your step-by-step guide to Telerik Silverlight and WPF controls. Get access to video tutorials, written tutorials, and tons of code!

This article is Part 3 of the series “10 Laps around Silverlight 5.” If you have missed any other section then please see the Roadmap below.

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

To refresh your memory on what Silverlight is:

Microsoft Silverlight is an application framework for writing Rich Internet Applications.

To recap what we learned in the previous section:

• We created a sample project for Ancestor Relative Source Binding and Implicit Data Templates.
• We took a look at other binding features that are included with Silverlight 5 and provided a definition and relevant links.

In this article, we are going to take a look at the new XNA 3D API and Improved Graphics Stack. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

I’ve included the Roadmap for the series below as you may want to visit other sections as you learn Silverlight 5. I picked the following features as I thought that you may find them useful in your day-to-day work. If you want a specific topic covered then please leave it in the comments below.

1) Introduction to SL5 – This post which provides a brief history of Silverlight and relevant links.

2) Binding - Ancestor Relative Source Binding and Implicit Data Templates.

3) Graphics [This Post] –XNA 3D API and Improved Graphics Stack.

4) Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.

5) Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.

6) Operating System Integration Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.

7) Operating System Integration Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.

8) Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.

9) Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.

10) Other items - In-Browser HTML, PostScript and Tasks for TPL.

What exactly is XNA?

Before we get started diving into XNA, it’s important to understand what it is first:

Microsoft XNA is a set of tools with a managed runtime environment provided by Microsoft that facilitates video game development and management. XNA attempts to free game developers from writing "repetitive boilerplate code"^[1] and to bring different aspects of game production into a single system.<sup>[2] 

Source: WikiPedia</sup>

As you can see XNA got it’s roots for video game development. So you may be asking, “What is it doing in Silverlight 5?” Developers have realized for a long time that things like 3D Graphics inside of a web browser would be beneficial for many applications including : medical, transportation, government and of course gaming. They requested the feature using Microsoft’s UserVoice and Microsoft added it as part of Silverlight 5. Silverlight 5 implementation of 3D is the most powerful yet running inside of a web browser.

Now that we know a little more about XNA, let’s get started…

Let’s Begin with XNA Visual Studio Templates

Creating 3D application with Silverlight 5 requires some familiarity with concepts such as vertex shaders, sprites, DrawingSurface and others. If you are like me and have a majority of your experience developing Line of Business Applications then the road to XNA will be somewhat challenging. There is good news though as the latest Silverlight 5 Toolkit provides XNA Templates. Since I assume that most readers of this series is LOB developers, we will begin with a template. You may customize the template as needed later.

Let’s get Started…

Install the Silverlight 5 Toolkit and open Visual Studio 2010 and create a new Silverlight project. You should see the following new templates.



Select “Silverlight 3D Application” and give it any name that you want.

You will notice when the project loads up, we will have 4 projects inside our solution.



Here is a breakdown of the projects:

• Silverlight3dApp – Our main Silverlight project. (Did you notice that using this template that you did not have to select which version of Silverlight to target?)
• Silverlight3dAppContent – The content project attached with the main Silverlight Project. It contains Microsoft.Xna.Framework.Content.Pipeline references as well as CustomEffect.slfx. This extension stands for Silverlight Effect.
• Silverlight3dWeb – Our standard website that host the 3D Application.
• Silverlight3dWebContent – The content project attached with the web application. It also contains Microsoft.Xna.Framework.Content.Pipeline references.

Let’s run it.

Now that we have a brief understanding of what makes up the application, let’s go ahead and run it by hitting F5. We should see the following cube rotating inside of our browser. 

But how exactly does this work?

Part 1: The Silverlight Application

References

The first thing that you may notice is the new references to XNA as shown below:

The files highlighted are not found in the standard Silverlight 5 application template. They are only added to a 3D Silverlight 5 application that uses XNA. They are necessary to perform complex calculations that things like 3D requires.

Cube.cs

If you open this class then you will see several regions such as Fields, Properties, Creation and Methods. The one that you want to pay special attention to is the “Creation” region.

Go ahead and double click on Cube.cs and expand it and you will see that it uses ContentManager to retrieve a slfx file from the content project. You can create your own silverlight effect files and add them to the ContentManager this way.

We won’t dive deep into these classes as we are just looking for a overview. I encourage you to review the other regions inside the Cube/Scene/VertexPositionColorNormal classes.

Scene.cs

The scene actually creates the ContentManager and registers for a size changed event to update the aspect ratio.

MainPage.xaml

The MainPage.xaml contains a new control called DrawingSurface. You can see that they only added a name and gave it an event named myDrawingSurface_Draw which we will look at in a moment.

 1: <Grid x:Name="LayoutRoot" Background="White">

 2:        <!--3D drawing surface-->

 3:        <DrawingSurface x:Name="myDrawingSurface" Draw="myDrawingSurface_Draw"/>

 4:        <TextBlock Text="My Silverlight 3D Application" VerticalAlignment="Top" 

 5:                   HorizontalAlignment="Center" Margin="0,30" Foreground="White" 

 6:                   FontSize="40"/>

 7: </Grid>

MainPage.xaml.cs

A fairly simple class as it checks to see if the GPU is on, then creates the scene which will render in the users web browser.

 1: public partial class MainPage

 2:     {

 3:         Scene scene;

 4:  

 5:         public MainPage()

 6:         {

 7:             InitializeComponent();

 8:         }

 9:  

 10:         private void myDrawingSurface_Draw(object sender, DrawEventArgs e)

 11:         {

 12:             // Render scene

 13:             scene.Draw();

 14:  

 15:             // Let's go for another turn!

 16:             e.InvalidateSurface();

 17:         }

 18:  

 19:         private void UserControl_Loaded(object sender, RoutedEventArgs e)

 20:         {

 21:             // Check if GPU is on

 22:             if (GraphicsDeviceManager.Current.RenderMode != RenderMode.Hardware)

 23:             {

 24:                 MessageBox.Show("Please activate enableGPUAcceleration=true on your Silverlight plugin page.", "Warning", MessageBoxButton.OK);

 25:             }

 26:  

 27:             // Create the scene

 28:             scene = new Scene(myDrawingSurface);

 29:         }

 30:     }

Part 2: The Web Application

The main thing to notice here is that the following line has been added to both the .html and .aspx pages inside of the Silverlight object data.

 1: <param name="enableGPUAcceleration" value="true" />

If this tag is missing, then Silverlight will display the following error message.

Also as stated earlier, we have a Silverlight3dWebContent project that includes the following references:

At this point, we have taken a quick look at XNA in Silverlight 5. But our journey doesn’t have to end here. Microsoft included a ton of sample projects that will get you up to speed quickly.

Sample Source Code for XNA projects.

You can find sample source code for many XNA projects located in your C:\Program Files (x86)\Microsoft SDKs\Silverlight\v5.0\Toolkit\Sep11\Source directory. Simply extract the zip file and navigate to XNA.

Conclusion

At this point, we have seen how you would use the XNA 3D API in your Silverlight 5 Applications. We have also discussed a few other features included with the improved graphic stack engine in Silverlight 5. In the next part of the series, I am going to take a look at the new media features in Silverlight 5 including: Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support and much more. Again, thanks for reading and please come back for the next part.