如何“停靠” Silverlight 控件答案

【问题标题】：How to "dock" a Silverlight control如何“停靠” Silverlight 控件
【发布时间】：2010-09-25 05:13:19
【问题描述】：

有没有办法将 Silverlight 控件“停靠”到浏览器窗口？例如，我想在页面顶部有一个 HTML 标题，然后让 Silverlight 控件精确地占据窗口的其余部分，在调整窗口大小时巧妙地调整大小。

Visual Studio 创建的默认页面使用具有 100% 宽度和高度的样式来使 Silverlight 控件占据整个窗口。而且我可以轻松地修改该模板以按百分比拆分页面（例如 20% 的 HTML 标题和 80% 的 Silverlight 控件）。但我真正想要的是标题高度是静态的，并且 Silverlight 控件占据剩余窗口的 100%。

【问题讨论】：

标签： css silverlight

【解决方案1】：

您应该仍然可以使用您的 CSS 来执行此操作。只需将您的标题 DIV 设置为您想要的大小，然后 Silverlight 元素的容器 DIV 为 100%/100%

【讨论】：

我已经尝试过了，但是 100% 的高度似乎意味着 100% 的包含元素的高度，而不是 100% 的包含元素的高度减去标题 div。所以最终结果是一个垂直滚动条，因为 Silverlight 控件太大了，正好是标题 div 高度。
如果我误解了您的建议并且您能够完成这项工作，您能否提供一个简单的示例？

【解决方案2】：

这里有一个 JavaScript 解决方案。首先，你创建这个函数：

<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>

然后，在你的开始正文标签中，你说：

<body onload="resizeSLHost()" onresize="resizeSLHost()">

然后将标题 div 放在 Silverlight 主机 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>

当然，在 resizeSLHost() 中从 docHeight 中减去的数字必须等于标题 div 的高度。

这在 IE 7 和 Firefox 3.0.4 中对我有用。

【讨论】：