Silverlight control not stretching to its full width when hosted in a SharePoint Web Part

In the past few months I had a number of comments on my Silverlight posts where people ask how to make a Silverlight application stretch to the full width and/or height of the SharePoint web part that hosts the Silverlight application. I found a solution to this problem when working on Silverlight integration in SharePoint 2010, but I’m pretty certain this also works for SharePoint 2007.

Creating the Silverlight application

When you create the Silverlight application, you have to remove a Width and/or Height setting of the <UserControl>. Also don’t specify any width and/or hight on the container Grid or Canvas.

<UserControl x:Class="SLMarquee.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
    <Canvas x:Name="LayoutRoot" >
        <Canvas.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
                <GradientStop Color="Orange"/>
                <GradientStop Color="DarkRed" Offset="1"/>
            </LinearGradientBrush>
        </Canvas.Background>
        <TextBlock x:Name="MarqueeTextBox" Foreground="White" FontFamily="Comic Sans MS" FontSize="16" FontStyle="Italic"                   
                   Width="Auto" Height="Auto"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="5"
                   Text="This is a very long text that will be stretched automatically when the width of the containing web part changes."/>
    </Canvas>
</UserControl>

I added LinearGradientBrush to the background of the Canvas to make it easier to demonstrate that the canvas stretches to the size of the web part.

Creating the SharePoint web part

The Silverlight application will be hosted in a <div> element. This <div> element is typically created in the CreateChildControls method of the web part. I created a classic web part in Visual Studio 2010 to let people working on SharePoint 2007 also benifit from the post.

    public class SilverlightWrapperWebPart : WebPart
    {
        protected override void CreateChildControls()
        {
            HtmlGenericControl div = new HtmlGenericControl("div");
            div.ID = "SilverlightHost";
            // generate the Silverlight control
            StringBuilder sb = new StringBuilder("<object id=\"SilverlightHost\"");
            sb.Append(" width=\"100%\"");
            sb.Append(" height=\"100%\"");
            sb.Append(" data=\"data:application/x-silverlight-2,\"");
            sb.Append(" type=\"application/x-silverlight-2\" >");
            sb.Append(" <param name=\"source\" value=\"/XAPS/SLMarquee.xap\"/>");
            sb.Append(" <a href=\"http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0\" ");
            sb.Append(" style=\"text-decoration: none;\">");
            sb.Append(" <img src=\"http://go.microsoft.com/fwlink/?LinkId=108181\" ");
            sb.Append(" alt=\"Get Microsoft Silverlight\" ");
            sb.Append(" style=\"border-style: none\"/>");
            sb.Append(" </a>");
            sb.Append("</object>");
            div.InnerHtml = sb.ToString();
            this.Controls.Add(div);
        }
    }

If you want your Silverlight application stretch to the width and height of your web part, you have to set the width and height properties of the <object> tag to 100%. You can also choose that only the width needs to resize whenever the web part is resized. In that case you can specify an absolute value for the height and a relative value (in percentage) for the width. Notice also that no <param name=”width” value =”xxx” /> and no <param name=”height” value = “xxx” /> is specified within the <object></object> tags. This is also not necessary if you want your Silverlight application to stretch.

If I now add my web part to a web part page and set the width of the web part to 250 pixels and the height to 100 pixels (by using the standard tool pane of the web part), my Silverlight applications shows as follows:

If I modify the width of the web part to 750 pixels, I see the following:

Notice that not only the full text is now shown, but also that the background gradient is more stretched, proving that the canvas really resizes when the size of the web part is changed.

It is a different story if you want to wrap the text through the canvas because then the TextBox control need to have a fixed width, but that’s for tomorrow 🙂