UPDATE: For the easy route, consider placing your canvas in a ViewBox control which is in the Control Toolkit for Silverlight 3 and is included in the Silverlight 4 runtime.

In December I produced an an easy-to-follow Azure Deployment Guide which has so far been successfully used by hundreds of people to deploy an application to Windows Azure.  It also came with a sample Silverlight application.

That application includes the capability to scale an inner canvas (while maintaining aspect ratio) in response to the outer grid and control being resized as a result of the browser window being resized by the user.

In the following screenshots you’ll notice that the header/footer text stays the same size but the green canvas area scales to fit.  You’ll also notice that it centres horizontally and aligns to the top.

 

To achieve this we need to do a few things…

In the Silverlight UserControl’s XAML, make sure no Width and Height are set on the UserControl element (note that the d:DesignWidth/Height are there for design-time sizing only).

Note the name of “LayoutRoot” give to the top-most element.

 

Give the canvas a starting size which represents 100%.

Note the name “Wall” given to the canvas we want to scale.

Note the Scale and Translate transforms added to this canvas.

 

In the HTML page, the Silverlight control needs to be sized to 100% of the available width and height (and this needs to suitably apply all the way to the root of the HTML page).  You may do this with CSS styling or some other means.

 

In the Silverlight UserControl’s code-behind find, register for the resize event on the LayoutRoot object (which is a Grid in this case).

 

React to the resizing of the Silverlight control.

This code figures out whether there is more space to scale horizontally or vertically, and applies the lower of the two in both the X and Y direction (preserving aspect ratio) using the named transforms.

The calculations make use of ActualHeight and ActualWidth from the containing space.

The code also horizontally centres the canvas in the containing space.

I say ‘containing space’ in this case, because the Canvas to be scaled is in the middle of 3 rows and the single column in the parent Grid.

For the full code, check out the sample application with the Azure Deployment Guide.

I hope you found this tip useful 🙂 If so, and you’re reading this on January 15th 2010 then please vote for my Mix 2010 conference submissions today! :)  Thank you.

Looking to learn more about the Windows Azure Platform, Silverlight, Windows Touch or Windows Identify Foundation? If you’d like to see these sessions in person at Microsoft’s Mix 2010 conference or the recordings that will likely be made available for free later on, please vote for the sessions before January 15th 2010, by going to the site, adding the 3 sessions to you ballot and submitting it.