How to "Dock" a Silverlight Control
Is there a way to "dock" a Silverlight control in a browser window? For example, I would like to have an HTML title at the top of the page, and then the Silverlight control handles the rest of the window precisely, neatly resizing each time the window is resized.
The Visual Studio default page generates use styles with 100% width and heights so that the Silverlight control takes up the entire window. And I can easily modify this template to split the page into percentages (eg 20% HTML header and 80% Silverlight control). But I really want the header height to be static and the Silverlight control takes up 100% of the remaining window.
source to share
Here is a JavaScript solution. First, you create this function:
<script type="text/javascript">
function resizeSLHost()
{
var docHeight = document.body.offsetHeight;
var pluginHeight = docHeight - 130;
var slplugin = document.getElementById("silverlightControlHost");
slplugin.style.height = pluginHeight + "px";
}
</script>
Then, in your opening tag tag, you say:
<body onload="resizeSLHost()" onresize="resizeSLHost()">
And you put your div header right before the Silverlight host div:
<div id="header" style="height:130px"></div>
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2" type="application/x-silverlight-2" width="100%" height="100%">
// the usual stuff here...
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>
Of course, the number you subtract from docHeight in resizeSLHost () must be equal to the height of the div head.
This worked for me in IE 7 and Firefox 3.0.4.
source to share