Page view counter

Silverlight Tips of the Day - Blog by Mike Snow

Game Programming with Silverlight

Silverlight Tip of the Day #81 – 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:

  1. None – No scaling is performed
  2. Stretch- Stretching is performed to fill the browser horizontally and vertically.
  3. 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:

image

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

image

Thank you,
--Mike Snow

Subscribe in a reader

Posted: Jan 13 2009, 04:36 PM by mike.snow | with 12 comment(s)
Filed under: , , , , , , ,

Comments

Microsoft Weblogs said:

One often unknown property your Silverlight control contains is a property called ScaleMode . This property

# January 13, 2009 8:22 PM

vitor_canova said:

What if I want to do this in object tag, inside a simple html page. What I have to do?

# January 14, 2009 4:46 AM

Skalieren von Silverlight Control at Programming with Silverlight, WPF & .NET said:

Pingback from  Skalieren von Silverlight Control at Programming with Silverlight, WPF &amp; .NET

# January 14, 2009 7:45 AM

Skalieren von Silverlight Control at Programming with Silverlight, WPF & .NET said:

Pingback from  Skalieren von Silverlight Control at Programming with Silverlight, WPF &amp; .NET

# January 14, 2009 7:45 AM

miguelito928 said:

The number 2 option of the ScaleMode property should read "Stretch" and not "Scale."

Thanks for the post!

# January 14, 2009 10:42 AM

mike.snow said:

Miguel- Thanks, fixed.

Vitor- I tried adding this param to the HTML:

<param name="ScaleMode" value="Stretch" />

But for some reason it didn't work. Investigating...

# January 14, 2009 1:18 PM

Silverlight Tips of the Day - Blog by Mike Snow said:

The purpose of this post is to create an outline summary all the blogs from my Silverlight Tips of the

# January 14, 2009 1:37 PM

Dew Drop - January 14, 2009 | Alvin Ashcraft's Morning Dew said:

Pingback from  Dew Drop - January 14, 2009 | Alvin Ashcraft's Morning Dew

# January 14, 2009 2:36 PM

Community Blogs said:

In this issue: Quadra Silverlight Outsourcing, Denis Dollfus, Karsten Januszewski, Tim Greenfield, Alex

# January 15, 2009 12:23 AM

Visual Web Developer Team Blog said:

Most Recent Posts: Tip #93 - Reading XML with Silverlight Tip #92 - How to Load Images from a Stream

# February 10, 2009 6:25 PM

codebased said:

Hi ,

Did you come with the solution for object tag?

<object data="data:application/x-silverlight" type="application/x-silverlight-2" width="100%" height="100%">

           <param name="scalemode" value="Stretch" />  ?

I need it please.

# May 4, 2009 10:45 PM

SharpGIS said:

The ASP.NET webcontrol generates at lot of javascript that sets a scaletransform on the entire Silverlight control. It's not a property on the plugin's object tag. If you don't want to use the webcontrol, you basically will need to duplicate all that javascript yourself.

# May 4, 2009 11:21 PM