Resize object tag to fit silverlight content

Question

I am having the following problem:

I have a web page hosting silverlight content. The silverlight content is navigation aware, so it will always be the same html page and the same silverlight control. The content however will of course change when the user is navigating from one page inside the control to another. Different pages have different size requirements and in some cases the final height of the content is unknown because the content is coming from a web service.

I want the height of the silverlight content to be dynamically according to what it actually needs. I saw many solutions to make the silverlight control fit the browser window, but I want the silverlight content to only have the actual height it needs and overflow when necessary, so that I can use the browsers scrollbars.

The page should also have a static background image, which is giving me some problems when the object tag is not exactly the size of the silverlight content.

The effect I want to achieve is more or less like in this web page: http://www.codegarden.de/

The background should be in the html page when possible and the silverlight control should be the content in the middle part and should scroll with the browser scrollbar.

Can anyone help me? Thanks!

Answer 1

You can have your silverlight application execute javascript commands on the hosting page, that will in turn set the size of the <Object> tag.

Something like that:

using System.Windows.Browser; 

// set a global variable
HtmlPage.Window.Eval(String.Format("setSilverlightObjSize({0},{1});",newW,newH)); 

where setSilverlightObjSize is a javascript function you wrote in the hosting page.

soemthing like:

function SetObjectTagProps(w,h)
{
    var obj = document.getElementById("silverlightObj");
    obj.width = w;
    obj.height = h;
}