Silverlight Tip: Fill the browser window

March 12, 2008

RE: Silverlight 2 Beta 1 with Blend 2.5 March 2008 Preview

You can Make your XAML silverlight page fit the whole browser window.

1. In Blend, select the user control from the objects and timeline

   

2. Set the width and height to Auto and the horizontal and vertical alignment to stretch

   

3. There will be arrows surrounding the control that lets you adjust its design time size NOT its actual runtime size - very cool.

   

4. Or, you could just add these attributes to your UserControl tag

Width=”Auto” Height=”Auto”

Run your application and you will see it fill the whole window.  It will even resize and scale as you resize your browser window.  Live demo coming soon…

Important: To be accurate, your page is not filling in the browser window, it is actually filling the <object> tag in the html, so if your object width is 400 then your page will stretch to 400.  To make your silverlight fill the whole page then set your <object> tag in the html to 100% width and height.

Posted in Silverlight, Tips & Tricks