To debug and run a program using XNA in Silverlight5

Page creation date :

Since the project is created, the parts that you understand should be skipped.

The first step is to create a Silverlight application. Select File, New, and Project from the Visual Studio menu.


Select Silverlight Application.

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

For web site hosts, be sure to specify the site that you want to host. Test pages that are automatically generated when you debug silverlight alone cannot run XNA programs using the GPU. (This is not the case if you create a test page manually.)

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

When the project is created, right-click Browse Settings in the Silverlight application and select Add Reference.


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

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


Then select "Extend" from the left menu, check the following items, and press ok button.

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

You have chosen the minimum required to run the XNA program, so choose the assembly you want to reference as needed.


The assembly reference is added.


Now you'll modify the code. This time, we'll just give you a minimum of information about whether the XNA program worked correctly.

Open MainPage.xaml from the Silverlight application and add the following code:

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

DrawingSurface is the area you want to draw in the XNA program. When you run it, a Draw event occurs repeatedly, so write a drawing process there. Let's draw only the background color so that it is understood that it is working correctly this time.

TextBlockMessage is for text to display whether an XNA program is working correctly or not. This time it's in place to confirm it, so it's not really a release.

Then open the MainPage.xaml.cs file. First, organize the using area. Because the namespace for the Silverlight application is specified, change it for XNA. Define it according to your application when you actually make it.

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, make the text display the current drawing mode when it starts and why it was not able to draw. I'm writing 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. This time, i'm just drawing the background in the XNA Framework when a drawing event occurs.

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

Let's debug.


When you do, it should look like a figure. RenderModeReason@GPUAccelerationDisabled disables GPU drawing where hardware drawing is not available in RenderMode_Unavailable. This is a server-side issue, so you need to enable it first.


Open the "<Project Name>TestPage.aspx" file from a ASP.NET project hosted by Silverlight Run.

TestPage.aspx を開く

Add EnableGPUAcceleration to the object parameter and set the value to true. This would allow this Silverlight application to use the GPU on the server side. (It's actually solved by the client's processing, but it's the server that outputs the HTML, so it's 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>

Now run it and you'll see. RenderModeReason is now SecurityBlocked. This is because GPU drawing is not allowed by default for security reasons. Since this is a client issue, you should have the user perform the following steps and allow gpu drawing to be released in addition to debugging.

RenderModeReason が SecurityBlocked に変化

To allow GPU drawing, right-click the Silverlight application and select Silverlight from the menu.

Silverlight を選択

As the dialog opens, select the Permissions tab, select the appropriate site, and then click the Allow button.


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


If you are debugging, updating the browser does not take effect, so once you close and run the browser again, you will see that RenderMode becomes hardware drawing and xna background drawing is also enabled. Now you can create your Own XNA program.