Automatically stretching a Silverlight 2 control on a webpage
Posted by anoriginalidea on June 3, 2008
A couple of fun hours were spent trying to get my Silverlight content to resize when the user resized the browser.
I mean, what’s the point of having your Silverlight content replace HTML if it wont flow and resize when the user resizes the browser? I want my Silverlight content to take up the whole browser frame.
The Html Code
You’d think this would be the default behaviour for an asp.net tag definition like this:
<asp:Silverlight ID=”Xaml1″ runat=”server” Source=”~/ClientBin/TechnologyOneCrm.xap” Version=”2.0″ Width=”100%” Height=”100%” />
Sadly this is not enough. Your silverlight sits there in a dumb un-resizeable box.
The Xaml
When you create a Silverlight 2 control in Visual Studio 2008 or blend, the UserControl typically has Height and Width properties set, something like this:
<UserControl x:Class=”Daphne.WorkplaceHome”
xmlns=”http://schemas.microsoft.com/client/2007″
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Width=”900″ Height=”400″ xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=”d”>
<Grid x:Name=”LayoutRoot” Background=”White” >
</Grid>
</UserControl>
The Elusive Auto
Hence the reason why your content is not resizable.
One solution is to remove the Width and Height property. Another is to set them to “Auto”, like so:
<UserControl x:Class=”Daphne.WorkplaceHome”
xmlns=”http://schemas.microsoft.com/client/2007″
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Width=”Auto” Height=”Auto” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=”d”>
<Grid x:Name=”LayoutRoot” Background=”White” >
</Grid>
</UserControl>
If you run the project, it will start resizing. Unfortunately this causes the designer in Blend and VS2008 look like rubbish. (or more rubbish than usual anyway).
The trick is to set the Width and Height properties to “Auto” after the the screen has been rendered.
In WPF (apparently) you can use code like this:
Partial Public Class Page Me.Height = new System.Windows.LengthConverter().ConvertFromString(”Auto”) …
Inherits UserControl
Public Sub New()
InitializeComponent()
Me.Width = new System.Windows.LengthConverter().ConvertFromString(”Auto”)
End Sub
Sadly, in another twist of fate, “LengthConverter” does not exist in Silverlight.
The Silverlight Solution - Who’s your Nan?
Fortunately, browsing the type library showed me that setting the property value of Height or Width to “System.Double.Nan” has the same effect as “Auto”.
So, in the intialise of your Silverlight control, put this:
Partial Public Class Page Me.Height = System.Double.NaN
Inherits UserControl
Public Sub New()
InitializeComponent()
Me.Width = System.Double.NaN
End Sub
I am not sure if Microsoft intend to support LengthConverter (or TypeDescriptor.GetConverter!) in a future Silverlight version, but I’m guessing not.
Links
Posted in Code, Silverlight, Software Development | Tagged: Auto, LengthConverter, Silverlight, TypeDescriptor.GetConverter | No Comments »






