How to change height of Silverlight app in ASP.NET panel?

Question

How can I dynamically change height of Silverlight application embedded in ASP.NET panel?'

ASP.NET Panel markup

<asp:Panel ID="pnlResult" runat="server" Visible="false">
<br />
<div class="cpHeader">
<asp:Label ID="Label1" runat="server" Text="Search Results"></asp:Label>
</div>
<asp:Panel ID="Panel3" runat="server" class='cpResultBody'>
</asp:Panel>
</asp:Panel>

I dynamically add the Silverlight to the above ASP.NET panel, Panel3 as shown below: (This is done to pass initparams dynamically)

HtmlGenericControl myHtmlObject = new HtmlGenericControl("object");
myHtmlObject.Attributes["data"] = "data:application/x-silverlight-2";
myHtmlObject.Attributes["type"] =  "application/x-silverlight-2";
HtmlGenericControl mySourceParam = new  HtmlGenericControl("param");
mySourceParam.Attributes["name"] = "source";
mySourceParam.Attributes["value"] = "ClientBin/MySilverlightApp.xap";
myHtmlObject.Controls.Add(mySourceParam);    
HtmlGenericControl myOnErrorParam = new HtmlGenericControl("param");   

HtmlGenericControl myInputParam = new HtmlGenericControl("param");
myInputParam.Attributes["name"] = "initparams";
myInputParam.Attributes["value"] = string.Format("param1={0},param2={1},param2={2}", param1.ToString(), param2.ToString(), param3.ToString());
myHtmlObject.Controls.Add(myInputParam);    

myHtmlObject.Attributes["width"] = "100%";
myHtmlObject.Attributes["height"] = "100%";

Panel3.Controls.Add(myHtmlObject);

Finally my MainPage.xaml is as below. Here I am not setting height.

<UserControl x:Class="MySilverlightApp.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"
mc:Ignorable="d"
xmlns:my="clr-namespace:MySilverlightApp"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
<Grid x:Name="LayoutRoot" Background="WhiteSmoke" >
<Canvas Name="canvas1" HorizontalAlignment="Left" Margin="-1,-1,0,0"
VerticalAlignment="Top"/>
</Grid>
</UserControl>

My application is such that some data is represented as figures in the Canvas canvas1, the height of which cannot be known beforehand.

As of now the silverlight application is getting clipped. How to avoid this and ensure that the height is scaled up based on the content.

Observation: If I manually change the Height in silverlight object creating code from 100% to 1500px, the height seems to increase a bit more, but still contents are clipped even if I increase heigh further.

score 1 · Answer 1 · answered Feb 03 '12 at 22:59

You could do this: when the Silverlight control is loaded in the browser (Loaded event) send a command to the browser to grow the div that the control is hosted in to match the ActualHeight of the control. (Vb.net)

    'tell the web page to give Silverlight more room.
    Dim so As ScriptObject = TryCast(HtmlPage.Window.Eval("jsnamespace"), ScriptObject)
    so.Invoke("GrowDiv", LayoutRoot.ActualHeight)

this is the script:

var jsnamespace = {

GrowDiv: function(divheight) { //alert(divheight); jQuery("body").css("height", divheight); jQuery("#silverlightControlHost").css("height", divheight); jQuery("#Panel3").css("height", divheight); } }

score 0 · Answer 2 · answered Feb 03 '12 at 08:40

I am not much of expert on Silverlight but my quick response to this problem would be, fix the height of Grid(layoutroot) and allow scrolls(horizontal and vertical, whichever is way data is getting clipped) and then provide fixed height silverlight object in HTML.

How to change height of Silverlight app in ASP.NET panel?

2 Answers2