Silverlight with Dynamic Height

heightsilverlight

I have a silverlight app that I want to allow to size like a regular HTML page. That is, I want the size of the silverlight plugin to expand and contract in height to accommodate the dynamic data and controls that I am populating the silverlight app with. So, say I have a Page with a Grid and a button. The user hots the button and the grid gets a bunch of rows with images making the natural size of the grid higher than the browser windows. I would like to have something in place to resize the silverlight plugin to accomidate the DesiredSize of the Grid. The following, and several other attempts, are not working:

// handler in my main page.
 void MainGrid_LayoutUpdated(object sender, EventArgs e)
 {
     HtmlPage.Window.Invoke("setSilverlightSize", this.MainGrid.DesiredSize.Height);
 }

<body style="height:100%;margin:0;">
    <form id="mainForm" runat="server" style="height:100%;">
        <asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
        <div id="SilverlightContainer"  style="height:100%;">
            <asp:Silverlight ID="SLMain" runat="server" Source="~/ClientBin/My.Silverlight.Main.xap" Version="2.0" Width="100%" Height="100%" />
        </div>
    </form>
    <script type="text/javascript">
        function setSilverlightSize(val) {
            var host = document.getElementById("SilverlightContainer");
            host.style.height = val + "px";
        }
    </script>
</body>

The desired size of the MainGrid always wants to be the size of the window. Argh said the pirate.

-r

Best Answer

  1. Set the overflow to "auto"
  2. Set the scroll to "no"
  3. Set the margin to "0"
  4. Set the containing div's width and height to "100%"
  5. Set the Silverlight control's width and height to "100%"

This should cover all your bases. See below for some sample HTML.

Try this:

<style type="text/css"> 
html, body { overflow:auto } 
</style>
<head>
    <title>My App</title>
</head>
<body id="bodyId" style="margin:0;" scroll="no">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
         <div style="position: fixed; height: 100%; width: 100%">
            <avn:Silverlight 
                ID="xamlHost" 
                runat="server" 
                Source="~/ClientBin/THE.xap" 
                MinimumVersion="x.x.xxxxx" 
                Width="100%" 
                Height="100%" 
                />
         </div>
    </form>
</body>
</html>
Related Topic