silverlight 限制在 100% 浏览器高度答案

【问题标题】：silverlight limited to 100% browser heightsilverlight 限制在 100% 浏览器高度
【发布时间】：2023-03-12 23:15:01
【问题描述】：

我在让 Silverlight 控件出现在页面上时遇到问题，它与浏览器一样宽，但只要它需要，就可以。

我似乎无法确定启用此功能的 CSS。我得到的最接近的是使 Silverlight 控件与浏览器一样高，但不高。下面是我的aspx文件：

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
    TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head runat="server">
    <style type="text/css">
        body
        {
            padding: 0px;
            text-align: center;
            background-color: #22395C;
        }
        #Content
        {
            width: 100%;
            height: 100%;
            text-align: left;
        }
        .Header
        {
            width: 100%;
            height: 25px;
            clear: both;
        }
    </style>
</head>
<body style="height: 100%;">
    <form id="form1" runat="server" style="height: 100%;">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div class="Header"></div>
    <div id="Content">
        <asp:Silverlight ID="Xaml1" runat="server"
                         Source="~/ClientBin/....xap"
                         MinimumVersion="2.0.31005.0" 
                         InitParameters="VideoId=11"
                         Width="100%" Height="100%" 
                         BackColor="Transparent"
                         PluginBackground="Transparent"
                         Windowless="true"/>
    </div>
    <div class="Header">&nbsp;</div>
    </form>
</body>
</html>

【问题讨论】：

只是为了确保：这是“我想拥有世界上最高的 Silverlight 应用程序，我可以使用浏览器的滚动条来查看向下滚动 silverlight 的巨大高度吗？”问题，不是吗？
我不打算在这里添加答案，因为我不使用 Silverlight，但我想指出 CSS 规范所说的内容：当包含块的高度为“自动”时，设置 height:100% 相当于设置 height:auto。翻译：你需要在某处设置像素高度！

标签： asp.net html css silverlight-2.0

【解决方案1】：

您是否尝试过不为 silverlight 元素指定高度，而是将其包含在具有以下 CSS 属性的 DIV 元素中：

#silverlight-container {

    width: 100%;
    Overflow: show;

}

【讨论】：

【解决方案2】：

试试这个（它是在测试 silverlight 应用程序时由 blend 自动生成的，并填充浏览器窗口。有一条 aspx 行可以用来生成包括 silvelight 应用程序，但我不知道它是否支持填充浏览器窗口）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- saved from url=(0014)about:internet -->
<head>
    <title>OOD</title>

    <style type="text/css">
    html, body {
        height: 100%;
        overflow: auto;
    }
    body {
        padding: 0;
        margin: 0;
    }
    #silverlightControlHost {
        height: 100%;
    }
    </style>

    <script type="text/javascript">
        function onSilverlightError(sender, args) {

            var appSource = "";
            if (sender != null && sender != 0) {
                appSource = sender.getHost().Source;
            } 
            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;

            var errMsg = "Unhandled Error in Silverlight 2 Application " +  appSource + "\n" ;

            errMsg += "Code: "+ iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError")
            {
                errMsg += "File: " + args.xamlFile + "     \n";
                errMsg += "Line: " + args.lineNumber + "     \n";
                errMsg += "Position: " + args.charPosition + "     \n";
            }
            else if (errorType == "RuntimeError")
            {           
                if (args.lineNumber != 0)
                {
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " +  args.charPosition + "     \n";
                }
                errMsg += "MethodName: " + args.methodName + "     \n";
            }

            throw new Error(errMsg);
        }
    </script>
</head>

<body>

    <!-- Runtime errors from Silverlight will be displayed here.
    This will contain debugging information and should be removed or hidden when debugging is completed -->
    <div id='errorLocation' style="font-size: small;color: Gray;"></div>

    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">
            <param name="source" value="OOD.xap"/>
            <param name="onerror" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="2.0.31005.0" />

            <param name="autoUpgrade" value="true" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
                <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
            </a>
        </object>
        <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
    </div>
</body>
</html>

【讨论】：

【解决方案3】：

如果您的 Silverlight 应用程序的高度是动态的，并且您需要在浏览器窗口中动态调整其空间大小，那么最好的选择可能是 HTML Interop api。您可以创建一个 JavaScript 函数，将高度作为参数并将#Content div 的高度设置为该值。然后，当页面加载完毕后，使用 System.Windows.Browser.HtmlPage.Window.Invoke 静态方法从 Silverlight 调用这个 JS 函数。

类似以下的方法可能会起作用：

...在客户端上...

function setContentHeight(height) {
    var content = document.getElementById("Content");
    if (content != null) {
        content.style.height = height;
    }
}

...在银光中...

    void Page_Loaded(object sender, RoutedEventArgs e)
    {
        HtmlPage.Window.Invoke("setContentHeight", this.Height);
    }

【讨论】：