2009-03-26 16 views
3

Ich habe Probleme damit, ein Silverlight-Steuerelement auf einer Seite so erscheinen zu lassen, dass es so breit wie der Browser ist, aber so lang wie es sein muss.silverlight auf 100% Browserhöhe beschränkt

Ich kann nicht scheinen, die CSS, die dies ermöglicht, zu nageln. Die nächste, die ich bekommen habe, ist, die Silverlight-Steuerung so hoch wie den Browser zu machen, aber nicht größer. Unten ist mein aspx-Datei:

<%@ 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> 
+0

nur um sicherzugehen: Dies ist die "Ich möchte die höchste Silverlight-Anwendung der Welt haben. Kann ich die Bildlaufleiste des Browsers verwenden, um die riesige Höhe des Silverlight nach unten zu scrollen?" Frage, nicht wahr? – Jeremiah

+0

Das ist die Frage – Steven

+0

Ich werde hier keine Antwort hinzufügen, da ich Silverlight nicht verwende, aber ich möchte darauf hinweisen, was die CSS-Spezifikation sagt: Wenn die Höhe des umschließenden Blocks 'auto' ist, setze Höhe : 100% entspricht der Einstellung der Höhe: auto. Übersetzung: Sie müssen irgendwo eine Höhe in Pixel setzen! – U62

Antwort

2

Wenn die Höhe Ihrer Silverlight-App dynamisch ist und Sie den Speicherplatz dynamisch im Browserfenster anpassen müssen, ist die HTML-Interop-API am besten geeignet. Sie können eine JavaScript-Funktion erstellen, die die Höhe als Parameter verwendet und die Höhe des #Content-Div auf diesen Wert festlegt. Rufen Sie dann diese JS-Funktion von Silverlight auf, wenn die Seite geladen wird, indem Sie die statische Methode System.Windows.Browser.HtmlPage.Window.Invoke verwenden.

So etwas wie die folgenden funktionieren könnte:

... auf dem Client ...

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

... in Silverlight ...

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

Haben Sie versucht, nicht eine Höhe mit dem Silverlight-Element spezifiziert, aber es in einem DIV-Element enthält, das die folgenden CSS-Eigenschaften hat:

#silverlight-container { 

    width: 100%; 
    Overflow: show; 

} 
1

Try this (es ist Was beim Erstellen einer Silverlight-App automatisch durch Blend generiert wird und füllt das Browserfenster Es gibt eine Aspx-Zeile, die Sie verwenden können, um eine Silvelight-App zu generieren, aber ich weiß nicht, ob sie das Browserfenster füllt):

<!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> 
Verwandte Themen