2009-03-26 10 views
3

Je n'arrive pas à faire en sorte qu'un contrôle silverlight apparaisse sur une page de manière à ce qu'il soit aussi large que le navigateur, mais aussi longtemps qu'il le faut.silverlight limité à 100% de la hauteur du navigateur

Je ne peux pas sembler clouer le CSS qui permet cela. Le plus proche que j'ai obtenu est de rendre le contrôle Silverlight aussi grand que le navigateur mais pas plus grand. Ci-dessous mon fichier 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> 
+0

juste pour se assurer: C'est le "Je voudrais avoir la plus grande application Silverlight dans le monde, puis-je utiliser la barre de défilement du navigateur pour voir défiler la taille massive Silverlight?" question, n'est-ce pas? – Jeremiah

+0

C'est la question – Steven

+0

Je ne vais pas ajouter une réponse ici parce que je n'utilise pas Silverlight, mais je voudrais préciser ce que dit la spécification CSS: quand la taille du bloc conteneur est 'auto', la hauteur : 100% équivaut à régler la hauteur: auto. Traduction: Vous devez définir une hauteur en pixels quelque part! – U62

Répondre

2

Si la hauteur de votre application Silverlight est dynamique et que vous devez dimensionner dynamiquement son espace dans la fenêtre du navigateur, le mieux est probablement l'API HTML Interop. Vous pouvez créer une fonction JavaScript qui prend la hauteur en paramètre et définit la hauteur du div #Content sur cette valeur. Ensuite, lorsque la page est chargée, appelez cette fonction JS à partir de Silverlight à l'aide de la méthode statique System.Windows.Browser.HtmlPage.Window.Invoke.

Quelque chose comme ce qui suit pourrait fonctionner:

... sur le client ...

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

... dans silverlight ...

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

Avez-vous essayé de ne pas spécifier une hauteur à l'élément silverlight mais contenant dans un élément DIV qui a les propriétés CSS suivantes:

#silverlight-container { 

    width: 100%; 
    Overflow: show; 

} 
1

Essayez cette (il est Ce qui est automatiquement généré par blend lors du test d'une application Silverlight, et remplit la fenêtre du navigateur.Il y a une ligne aspx que vous pouvez utiliser pour générer, y compris une application Silvelight, mais je ne sais pas si elle remplit la fenêtre du navigateur):

<!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> 
Questions connexes