Filling Browser Window with Silverlight Application

Question

I want my Silverlight app to fill the entire browser window. I've set the plugin object width and height to 100%, and set my LayoutRoot container's height and width to Auto, but still no luck. Any suggestions?

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:Silverlight ID="Silverlight1" runat="server" 
     Source="~/ClientBin/Client.xap"
     MinimumVersion="2.0.30818.0"
     AutoUpgrade="true"
     Height="100%" 
     Width="100%">
    </asp:Silverlight>
</form>

<UserControl 
    x:Class="Client.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Height="Auto"
    Width="Auto">
    <Grid 
     x:Name="LayoutRoot" 
     Background="#084E85"
     ShowGridLines="True">
     <Grid.ColumnDefinitions>
      <ColumnDefinition Width="280" />
      <ColumnDefinition Width="Auto" />
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
      <RowDefinition Height="80" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="600" />
     </Grid.RowDefinitions>

     ...Remaining content here...
    </Grid>
</UserControl>

Disclaimer: I searched for an answer first, finding this thread. However, as you can see by my code that isn't working for me.

Answer 1

Remove the Height and Width attributes from the :

<UserControl
     x:Class="Client.Page"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;

Auto Height and Width with resize the window to fit the content. If you remove the Height and Width attributes, your Silverlight Application will grow to fit the window.

Answer 2

First, I don't set the height/width in the user control. Instead, I set the DesignHeight and DesignWidth (in the "http://schemas.microsoft.com/expression/blend/2008" namespace) and I set the alignment to stretch

<UserControl ... 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
    d:DesignHeight="1050" d:DesignWidth="1680">

In my Html, I set the Height and Width to 100% like this...

<div style="height: 100%; width: 100%; position: fixed;">
        <asp:Silverlight runat="server" Source="~/ClientBin/My.xap" ID="MyId" 
            Width="100%" Height="100%" />
</div>

At that point, everything works for me to have it take the entire window.

Answer 3

Hmm

I'm thinking your Grid is set-up to be as small as possible (no "star" column or row). Can you try with one more column and row with a "star" size ?

as other have pointed out, you also need to remove the "auto" sizes, since they auto-size to content.

also try to set a background color on the page, so you see where it actually extends.

Answer 4

If you've got a fairly complex HTML layout and can't rely on fixed positioning then you can make the #silverlightControlHost div resize using the following:

private bool _hasResized;

protected override Size ArrangeOverride(Size finalSize)
{
    if (!_hasResized)
    {
        HtmlPage.Document.GetElementById("silverlightControlHost").SetStyleAttribute("height", finalSize.Height.ToString());
        _hasResized = true;
    }

    return base.ArrangeOverride(finalSize);
}

You can put this inside MainPage.cs or if you have nested UserControls, then the control that requires the most height. I'm also using the following XAML and the default HTML Visual Studio provides

<UserControl ...
    VerticalAlignment="Stretch"
    Height="Auto"
    Width="Auto">

I haven't tested it without these settings, as far as I know Auto is the default.