How to Scale your Silverlight Control

One often unknown property your Silverlight control contains is a property called ScaleMode. This property allows you to specify how the controls within your Silverlight application are scaled when your Silverlight control is resized.

For example, if the width or height of your Silverlight control is set to be a percentage of your browser web page than when the browser page is resize so will your Silverlight control.

The three options available for the property ScaleMode are:

None – No scaling is performed

Scale - Scaling is performed to fill the browser horizontally and vertically.

Zoom – Scaling is performed to proportionally fill the browser.

 

 

 

 

 

 

 

 

The following is an example of how to set this ScaleMode to Stretch in your ASPX page:

<asp:Silverlight ID="Xaml1" ScaleMode="Stretch" runat="server" Source="~/ClientBin/SilverlightApplication52.xap" MinimumVersion="2.0.31222.0" Width="100%" Height="100%" />
Before a browser resize:



After a browser resize (notice that the button scales):