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?

score 1 · Accepted Answer · answered Nov 18 '11 at 20:15

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

answered Nov 18 '11 at 20:15

Bill Reiss

3,460
1
19
20

Thanks for the response! In my case, this actually works *perfectly*. Done and done. Thank you! I'm ready to accept your answer -- I'm just going to hold off for a little bit to see if anyone has a "pure Silverlight" solution that will work for others who are using more than just SpriteBatch. Upvoted regardless, great answer, thanks. P.S. Are you the SilverSprite author? If so, nice work! I was just playing around with that yesterday. – Michael Nov 18 '11 at 21:22
You may want to try wrapping the DrawingSurface in a Canvas, this can sometimes prevent the clipping that Grid does. Yes I wrote SilverSprite and I'm currently working on getting it working with the new Silverlight 5 stuff, too many projects, not enough time. – Bill Reiss Nov 18 '11 at 21:33

score 0 · Answer 2 · answered Nov 18 '11 at 21:19

If you want to go for a really lazy, you could cast an eye or two at how the ViewBox control works. I can't remember if it's 100% reliable when it comes to it's scaling but it should be ok for starters I think. I have used it for some fallback scenarios in production.

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

2 Answers2