Question

我遇到的问题是让一个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>

Answer 1

如果您的Silverlight应用程序的高度是动态的，并且您需要在浏览器窗口中动态调整其大小，那么最好的选择可能是HTML Interop api。您可以创建一个JavaScript函数，该函数将height作为参数，并将#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);
    }

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

Answer 3

您是否尝试过不指定silverlight元素的高度，但是在包含以下CSS属性的DIV元素中包含它：

#silverlight-container {

    width: 100%;
    Overflow: show;

}

silverlight限制在100％的浏览器高度

3 个答案: