To debug a program using XNA in Silverlight5

Page update date :
Page creation date :

The explanations are explained in order from the creation of the project, so please skip the parts you understand.

First, create a Silverlight application. From the Visual Studio menu, choose File, New, Project.


Select Silverlight Application.

Silverlight アプリケーションを選択

Regarding hosting Web sites, be sure to specify the site that you want to host. Test pages that are automatically generated when debugging in Silverlight alone cannot run XNA programs that use the GPU. (However, this does not apply when you manually create a test page.)

ホストする Web サイトの作成

After the project is created, right-click References in the Silverlight application and select Add Reference.


Select "Assembly" and "Framework" from the menu on the left and check the following items. (Do not press the OK button yet)

  • Microsoft.Xna.Framework
  • Microsoft.Xna.Framework.Graphics
  • System.Windows.Xna


Next, select "Advance" from the menu on the left, check the following items, and press the OK button.

  • Microsoft.Xna.Framework.Graphics.Extensions
  • Microsoft.Xna.Framework.Math

We have selected the minimum necessary to run an XNA program, so select the assembly to reference according to your needs.


A reference to the assembly is added.


Next, we'll tweak the code. This time, only the minimum information that shows whether the XNA program worked correctly is described.

From your Silverlight application, open MainPage.xaml and add the following code:

<Grid x:Name="LayoutRoot" Background="White">
  <!-- 追加ここから -->
  <DrawingSurface Draw="DrawingSurface_Draw" />
  <TextBlock x:Name="textBlockMessage"/>
  <!-- 追加ここまで -->

The DrawingSurface is the area that the XNA program draws to. When executed, the Draw event occurs repeatedly, so describe the drawing process there. This time, I will draw only the background color so that you can see if it is working properly.

textBlockMessage is used to display text whether an XNA program is working properly or not. This time I'm putting it in to confirm it, so I don't need it in the actual release.

Then open the "MainPage.xaml.cs" file. First, let's sort out the using parts. The namespace for the Silverlight application is specified, so we will change it for XNA. When actually creating it, please define it according to your application.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
//using System.Windows.Input;
//using System.Windows.Media;
//using System.Windows.Media.Animation;
//using System.Windows.Shapes;

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using System.Windows.Graphics;

Next, when you start up, you want to display the current blending mode and the reason why you couldn't draw in text. I write it in the constructor because I know when the Silverlight application is launched.

public MainPage()

    = string.Format("RenderMode:{0}\r\nRenderModeReason:{1}",

Write the drawing process. In this case, we just want the XNA Framework to draw the background when the drawing event occurs.

private void DrawingSurface_Draw(object sender, DrawEventArgs e)
  GraphicsDeviceManager.Current.GraphicsDevice.Clear(new Color(0x64, 0x95, 0xED));

Let's run debugging.


When you run it, it will be displayed as shown in the figure. RenderMode: Unavailable does not allow hardware rendering, RenderModeReason:GPUAccelerationDisabled disables GPU rendering. This is a server-side issue, so you need to enable it first.


Open the < project name>TestPage.aspx file from the ASP.NET project hosted in the Silverlight run.

TestPage.aspx を開く

Add "EnableGPUAcceleration" to the parameter of object and set the value to "true". This gives the server side permission for this Silverlight application to use the GPU. (Actually, it is solved by client processing, but since it is the server that outputs HTML, it is a server-side problem.)

  <form id="form1" runat="server" style="height:100%">
    <div id="silverlightControlHost">
      <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
        <param name="source" value="ClientBin/DebugXna.xap"/>
        <param name="onError" value="onSilverlightError" />
        <param name="background" value="white" />
        <param name="minRuntimeVersion" value="5.0.61118.0" />
        <param name="autoUpgrade" value="true" />
        <!-- 追加ここから -->
        <param name="EnableGPUAcceleration" value="true" />
        <!-- 追加ここまで -->
        <a href="" style="text-decoration:none">
          <img src="" alt="Microsoft Silverlight の取得" style="border-style:none"/>
      <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>

If you try to run it with this, it will look like the figure. RenderModeReason is now SecurityBlocked. This is because GPU drawing is not allowed by default for security reasons. Since this is a client issue, in addition to running debugging, you also need to have the user perform the following steps to allow the GPU to draw.

RenderModeReason が SecurityBlocked に変化

To allow GPU rendering, right-click the Silverlight application and choose Silverlight from the menu.

Silverlight を選択

In the dialog that opens, select the "Permissions" tab, select the appropriate site, and then click the "Allow" button.


When the permission is "Allow", click the OK button.


If you are debugging while debugging, refreshing the browser does not take effect, so if you close the browser and run it again, you will see that RenderMode becomes hardware drawing and XNA background drawing is also enabled. Now you can create XNA programs to your heart's content.