Silverlight - CSS

由於 Silverlight 內容始終在網頁內執行，因此 object 標籤受標準 CSS 佈局規則的約束。外掛無法將首選大小反饋給瀏覽器，因此無論 Silverlight 內容想要多大，其大小和位置完全由包含它的網頁決定。

預設的 Silverlight 專案模板會在網頁中新增 CSS 程式碼，使 object 標籤佔據整個瀏覽器視窗。
預設的 XAML 似乎具有固定大小，但仔細觀察會發現，模板設定了 designWidth 和 designHeight 屬性。
這些屬性告訴 Visual Studio 或 Blend 使用者介面在設計器中應顯示多大，但允許它在執行時調整大小。

在**解決方案資源管理器**中，您將看到**{專案名稱}TestPage.html** 檔案，這是在 Visual Studio 中建立新的 Silverlight 專案時獲得的預設 HTML 檔案，如下所示。

此處的頂部 CSS 將 HTML 和 body 樣式設定為 100%，這可能看起來有點奇怪。

這是完整的 html 檔案，其中包含不同的設定。

<!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" >  
   <head> 
      <title>FirstExample</title> 
		
      <style type = "text/css"> 
         html, body { 
            height: 100%; 
            overflow: auto; 
         } 
			
         body { 
            padding: 0; 
            margin: 0; 
         } 
			
         #silverlightControlHost { 
            height: 100%; 
            text-align:center; 
         } 
      </style>
		
      <script type = "text/javascript" src = "Silverlight.js"></script> 
		
      <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;  
				
            if (errorType == "ImageError" || errorType == "MediaError") { 
               return; 
            } 
				
            var errMsg = "Unhandled Error in Silverlight 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>
	
      <form id = "form1" runat = "server" style = "height:100%"> 
         <div id = "silverlightControlHost"> 
			
            <object data = "data:application/x-silverlight-2," 
               type = "application/xsilverlight-2" width = "100%" height = "100%"> 
					
               <param name = "source" value = "ClientBin/FirstExample.xap"/> 
               <param name = "onError" value = "onSilverlightError" /> 
               <param name = "background" value = "white" /> 
               <param name = "minRuntimeVersion" value = "5.0.61118.0" /> 
               <param name = "autoUpgrade" value = "true" /> 
					
               <a href = "http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" 
                  style = "textdecoration:none"> 
                  <img src = "http://go.microsoft.com/fwlink/?LinkId=161376" 
                     alt = "Get Microsoft Silverlight" style = "border-style:none"/> 
               </a> 
					
            </object>
				
            <iframe id = "_sl_historyFrame" style = "visibility:hidden;height:0px; 
               width:0px;border:0px"></iframe>
					
         </div> 
			
      </form> 
		
   </body> 
	
</html>

檢視**silverlightControlHost**，我們需要確保它以固定高度開始，例如 300 畫素，寬度為 400 畫素，這與 XAML 中的預設設計寬度和高度相匹配。您還可以根據應用程式的需求更改這些設定。

內容重疊

預設情況下，Silverlight 和 HTML 內容無法在螢幕上共享相同的空間。如果您建立兩者兼有的內容，使其佔據相同的空間，則只有 Silverlight 內容可見。

這是因為，預設情況下，Silverlight 會向瀏覽器請求它自己的專用視窗，並將所有內容渲染到該視窗中。它是瀏覽器內部的子視窗，因此看起來像是網頁的一部分，但它阻止了內容重疊。

這樣做的主要原因是效能。透過獲得螢幕上自己的專用區域，Silverlight 不必與 Web 瀏覽器協調其渲染。

但是，有時使用重疊內容很有用。這需要付出效能代價。您可能會發現，當 Silverlight 和 HTML 共享螢幕空間時，動畫執行得不如以前流暢，但額外的佈局靈活性可能值得付出這個代價。要使用重疊內容，您需要啟用無視窗模式。

在無視窗模式下，Silverlight 外掛會渲染到與瀏覽器相同的目標視窗控制代碼，從而允許內容混合。
Z 索引在內容重疊時非常重要。就 HTML 而言，Silverlight 內容是一個單獨的 HTML 元素，因此它正好出現在 HTML Z 順序中的一個位置。
這對滑鼠處理有影響。如果 Silverlight 外掛位於 HTML Z 順序的頂部，則其邊界框內的任何滑鼠活動都將傳遞給外掛。
即使外掛的某些區域是透明的，並且您可以看到後面的 HTML，您也無法單擊它。
但是，如果您安排某些 HTML 內容的 Z 索引位於頂部，即使它與 Silverlight 內容重疊，它也將繼續保持互動性。

示例

讓我們看一下下面給出的簡單示例，其中我們有一個帶有容器的佈局，在這個容器中，三個 div 都被安排在這個包含它們的 div 內重疊。

<!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" >  
   <head> 
	
      <title>HtmlOverlap</title> 
		
      <style type = "text/css"> 
         #container { 
            position: relative; 
            height: 300px; 
            font-size: small; 
            text-align:justify; 
         } 
			
         #silverlightControlHost { 
            position: absolute; 
            width: 400px; 
            height: 300px; 
         } 
			
         #underSilverlight { 
            position: absolute; 
            left: 4px; 
            width: 196px; 
         } 
			
         #overSilverlight { 
            position: relative; 
            left: 204px; 
            width: 196px; 
         } 
			
      </style> 
		
      <script type = "text/javascript" src = "Silverlight.js"></script> 
		
      <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;
				
            if (errorType == "ImageError" || errorType == "MediaError") { 
               return; 
            }  
				
            var errMsg = "Unhandled Error in Silverlight 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> 
      <form id = "form1" runat = "server" style = "height:100%">
		
         <div id = 'container'>
			
            <div id = 'underSilverlight'> 
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
            </div> 
				
            <div id = "silverlightControlHost"> 
				
               <object data = "data:application/x-silverlight-2," 
                  type = "application/xsilverlight-2" width = "100%" height = "100%"> 
						
                  <param name = "source" value = "ClientBin/HtmlOverlap.xap"/> 
                  <param name = "onError" value = "onSilverlightError" /> 
                  <param name = "background" value = "transparent" /> 
                  <param name = "windowless" value = "true" /> 
                  <param name = "minRuntimeVersion" value = "4.0.50401.0" /> 
                  <param name = "autoUpgrade" value = "true" /> 
						
                  <a href = "http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" 
                     style = "text-decoration:none"> 
							
                  <img src = "http://go.microsoft.com/fwlink/?LinkId=161376" 
                     alt = "Get Microsoft Silverlight" style = "border-style:none"/> </a> 
							
               </object>
					
               <iframe id = "_sl_historyFrame" style = "visibility:hidden; height:0px; 
                  width:0px; border:0px"> </iframe>
						
            </div> 
				
            <div id = 'overSilverlight'> 
               This is on top. This is on top. This is on top. This is on top. 
                  This is on top. This is on top.
						
               This is on top. This is on top. This is on top. This is on top. 
                  This is on top. This is on top. 
						
               This is on top. This is on top. This is on top. This is on top. 
                  This is on top. This is on top. 
						
               This is on top. This is on top. This is on top. This is on top. 
                  This is on top. This is on top. 
						
               This is on top. This is on top. This is on top. This is on top. 
                  This is on top. This is on top. 
						
               This is on top. This is on top. This is on top. This is on top. 
                  This is on top. This is on top. 
						
               This is on top. This is on top. This is on top. This is on top. 
                  This is on top. This is on top.
						
               This is on top. This is on top. This is on top. This is on top. 
                  This is on top. This is on top. 
						
               This is on top. This is on top. This is on top. This is on top. 
            </div>
				
         </div>    
			
      </form> 
		
   </body> 
	
</html>

此 div 將移到左側，它將位於 Z 順序的後面，因為它排在最前面。
然後在中間，我們有將填充整個寬度的 Silverlight 內容。
然後在其頂部，右側有一個 div 包含文字 - **這是在頂部**。

下面是 XAML 檔案，其中添加了一個帶有某些屬性的矩形。

<UserControl x:Class = "HtmlOverlap.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
	
   <Grid x:Name = "LayoutRoot"> 
      <Rectangle Margin = "0,120" Fill = "Aquamarine" />    
   </Grid> 
	
</UserControl>

執行此應用程式時，您將看到兩列，左側一列顯示“下面”，右側一列顯示“上面”。Silverlight 外掛位於這兩者相同的區域，並且在 Z 順序中，Silverlight 內容位於這兩者之間。

您可以看到，此處半透明的綠色填充稍微著色了左側的文字，因為它位於該文字之上，但它沒有著色右側的文字，因為它位於該文字之後。

您可以選擇右側的文字。如果您嘗試選擇左側的文字，則不會發生任何事情，這是因為，就瀏覽器而言，此處的整個空間都被 Silverlight 控制元件佔據。由於它在 Z 順序中位於文字上方，因此 Silverlight 控制元件將處理輸入。

列印頁面