How can I scale a Silverlight application to 50% width/height?

Question

I created a simple 2D game in XNA for Windows and Xbox. I'm in the process of porting this game to Silverlight 5 (at the time of this writing, still in RC), which supports SpriteBatch, Texture2D, and all sorts of other XNA goodies that I'm using in my game. I successfully ported most of my code to Silverlight, but I'm still struggling with resolution/sizing issues.

My original code and content are configured to work at a resolution of 1280x720 -- and I want to keep it that way -- but I want to embed the Silverlight game on a webpage at a more manageable size: 640x360 (half of its original size).

So my question is this: How can I shrink an entire Silverlight app to 50% of its original size?

I think I'm on the right track, but I can't quite get it working. I discovered the RenderTransform and ScaleTransform XAML elements, and they seem to almost accomplish what I'm looking for, but not quite. My XAML looks like this:

<!-- Some attributes omitted for brevity -->
<UserControl x:Class="Silverlight3dApp.MainPage"
  d:DesignWidth="1280"
  d:DesignHeight="720">

  <Grid x:Name="LayoutRoot" Background="White">
    <Grid.RenderTransform>
      <ScaleTransform x:Name="Scale" ScaleX="0.5" ScaleY="0.5" />
    </Grid.RenderTransform>
    <DrawingSurface x:Name="myDrawingSurface" Draw="myDrawingSurface_Draw" />
  </Grid>
</UserControl>

And my HTML object looks like this:

<object data="data:application/x-silverlight-2,"
  type="application/x-silverlight-2"
  width="640"
  height="360">
  <!-- etc. -->
</object>

So the embedded HTML object is set to 640x360 (as desired), and the Silverlight app is set to 1280x720 but then scaled to 0.5 for both ScaleX and ScaleY. This kind of works; the app is being scaled down to 50% size, but the content that's drawn is cropped. I can only see the upper left quadrant, so I only see 320x180 worth of content (what would have been 640x360 at the original size).

The X's in this crude drawing represent where I see content in the Silverlight embedded object, everything else is abruptly cropped and empty:

 ___________
|XXXXX      |
|XXXXX      | 360px
|           |
|___________|
    640px

I'm a Silverlight noob, so I have a feeling I'm missing something obvious. Any ideas?

Answer 1

I think with the way the XNA integration works you'll need to actually draw at 50% size. This is pretty easy to do if you're using SpriteBatch, just use the overload of Begin that lets you specify a Matrix:

spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.AlphaBlend,
    SamplerState.LinearClamp, DepthStencilState.None, 
    RasterizerState.CullCounterClockwise, null, Matrix.CreateScale(.5f));