Silverlight ограничен до 100% высоты браузера - PullRequest
Новая
       9

Silverlight ограничен до 100% высоты браузера

3 голосов
/ 26 марта 2009

У меня проблемы с отображением элемента управления 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>

Ответы [ 3 ]

2 голосов
/ 06 апреля 2009

Если высота вашего приложения Silverlight является динамической, и вам необходимо динамически увеличивать его пространство в окне браузера, лучшим вариантом, вероятно, является HTML Interop api. Вы можете создать функцию JavaScript, которая принимает высоту в качестве параметра и устанавливает высоту #Content div в это значение. Затем, когда страница загружена, вызовите эту функцию JS из Silverlight, используя статический метод System.Windows.Browser.HtmlPage.Window.Invoke.

Может работать что-то вроде следующего:

... на клиенте ... 

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);
    }
1 голос
/ 01 апреля 2009

Попробуйте (это то, что автоматически генерируется Blend при тестировании приложения silverlight и заполняет окно браузера. Есть строка 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>
0 голосов
/ 27 марта 2009

Вы пытались не указывать высоту для элемента silverlight, но содержали ее в элементе DIV, который имеет следующие свойства CSS: 

#silverlight-container {

    width: 100%;
    Overflow: show;

}
...