Scaling Silverlight Web Resources for CRM 2011

Roshan Mehta, 29 February 2012

When building custom Silverlight screens for Dynamics CRM 2011, it is important that the screens scale to the available space to improve the user experience. Screens with a single control normally scale to the available space automatically, for example calendar or map controls. If you are building a Silverlight screen with multiple controls, you will need to manually control the horizontal and vertical scaling for the entire Silverlight component.

It is common for Silverlight screens to be built for a specific screen resolution. Although this may look good to the developer that built it, it is important to consider that users will have different screen resolutions. This will result in a horizontal or vertical scroll bar being displayed which can annoy users. There is a simple way in which we can scale our Silverlight screens to use up the full width and height of its container.

In our XAML code, we add a Grid to our design and set the Width and Height properties to “Auto”. We also need to handle the SizeChanged event for the grid. The opening tag for the Grid control looks like this:

<Grid x:Name="LayoutRoot" Width="Auto" Height="Auto" ShowGridLines="False" SizeChanged="LayoutRoot_SizeChanged" Loaded="LayoutRoot_Loaded">

The main component of my Silverlight screen is a grid control called “applicationgrid”. I want this grid to scale to the maximum width and height of its container, but I also want to maintain a 12 pixel left and right padding as well as a 45 pixel top and bottom padding. Our LayoutRoot_SizeChanged event handler looks like this:

        private void LayoutRoot_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            this.applicationgrid.Width = e.NewSize.Width - 24;
            this.applicationgrid.Height = e.NewSize.Height - 90;
        }

Whenever the window is resized, the event fires and modifies the width and height of our grid control so that it scales perfectly within the available space.