English 中文(简体)
Silverlight Tutorial

Silverlight Useful Resources

Selected Reading

Silverlight - CSS
  • 时间：2024-11-05

Silverpght - CSS

Previous Page Next Page  

Since Silverpght content always runs inside a web page, the object tag is subject to normal CSS layout rules. There is no way for the plug-in to push a preferred size back to the browser, so regardless of what size the Silverpght content may want to be, its size and position will be wholly determined by the containing web page.

    The default Silverpght project template puts CSS in the web page that gives the object tag the whole of the browser window.

    The default XAML appears to have a fixed size, but if you look closely, you will see that the template sets the design width, and design height properties.

    These tell Visual Studio, or Blend, how large the user interface should look in the designer, but they allow it to resize at runtime.

In Solution Explorer you will see {project name}TestPage.html file, which is the default HTML you get when you create a new Silverpght project in Visual Studio as shown below.

Silverpght project

The CSS at the top here, sets the HTML and body style to be 100%, which may seem a bit odd.

Here is the complete html file, which contains different settings.

<!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; 
         } 
			
         #silverpghtControlHost { 
            height: 100%; 
            text-apgn:center; 
         } 
      </style>
		
      <script type = "text/javascript" src = "Silverpght.js"></script> 
		
      <script type = "text/javascript"> 
         function onSilverpghtError(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 Silverpght Apppcation " +  appSource + "
" ;  
            errMsg += "Code: "+ iErrorCode + "    
"; 
            errMsg += "Category: " + errorType + "       
"; 
            errMsg += "Message: " + args.ErrorMessage + "     
";  
				
            if (errorType == "ParserError") { 
               errMsg += "File: " + args.xamlFile + "     
"; 
               errMsg += "Line: " + args.pneNumber + "     
"; 
               errMsg += "Position: " + args.charPosition + "     
"; 
            } else if (errorType == "RuntimeError") {            
               if (args.pneNumber != 0) { 
                  errMsg += "Line: " + args.pneNumber + "     
"; 
                  errMsg += "Position: " +  args.charPosition + "     
"; 
               } 
					
               errMsg += "MethodName: " + args.methodName + "     
"; 
            } 
				
            throw new Error(errMsg); 
         }
			
      </script> 
		
   </head> 
	
   <body>
	
      <form id = "form1" runat = "server" style = "height:100%"> 
         <span id = "silverpghtControlHost"> 
			
            <object data = "data:apppcation/x-silverpght-2," 
               type = "apppcation/xsilverpght-2" width = "100%" height = "100%"> 
					
               <param name = "source" value = "CpentBin/FirstExample.xap"/> 
               <param name = "onError" value = "onSilverpghtError" /> 
               <param name = "background" value = "white" /> 
               <param name = "minRuntimeVersion" value = "5.0.61118.0" /> 
               <param name = "autoUpgrade" value = "true" /> 
					
               <a href = "http://go.microsoft.com/fwpnk/?LinkID=149156&v=5.0.61118.0" 
                  style = "textdecoration:none"> 
                  <img src = "http://go.microsoft.com/fwpnk/?LinkId=161376" 
                     alt = "Get Microsoft Silverpght" style = "border-style:none"/> 
               </a> 
					
            </object>
				
            <iframe id = "_sl_historyFrame" style = "visibipty:hidden;height:0px; 
               width:0px;border:0px"></iframe>
					
         </span> 
			
      </form> 
		
   </body> 
	
</html>

Looking at the silverpghtControlHost, we need to make sure it stars with a fixed height, say 300 pixels, and a width of 400 pixels, which matches the default design width and height in the XAML. You can also change these settings according to your apppcation requirements.

Overlapping Content

By default, Silverpght and HTML contents cannot share the same space on the screen. If you make a content from both, such that they occupy the same space then only the Silverpght content will be visible.

This is because, by default, Silverpght will ask the browser for its own private window, rendering all the content into that. It is a child window inside the browser, so it looks pke a part of the web page, but it prevents the content from overlapping.

The main reason for this is performance. By getting its own private area on the screen, Silverpght does not have to coordinate its rendering with a web browser.

However, sometimes it is useful to have an overlapping content. There is a performance price to pay. You might find that animations do not run as smoothly when Silverpght and HTML share space on screen, but the extra layout flexibipty may be worth the price. To use the overlapping content, you need to enable Windowless mode.

    In Windowless mode, the Silverpght plug-in renders to the same target window handler as the browser allowing the content to mingle.

    Zed index, or Z index is significant when the contents overlap. As far as HTML is concerned, the Silverpght content is a single HTML element, so it appears at exactly one place in the HTML Z order.

    This has an impact on mouse handpng. If the Silverpght plug-in is at the top of the HMTL Z order, any mouse activity anywhere within its bounding box, will be depvered to the plug-in.

    Even if some areas of the plug-in are transparent, and you can see the HTML behind, you won t be able to cpck it.

    However, if you arrange for the Z index with some HTML content to be on top, it will continue to be interactive even when it overlaps with Silverpght content.

Example

Take a look at the simple example given below in which we have a layout with a container, in which three spans have all been arranged to overlap inside of this containing span.

<!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-apgn:justify; 
         } 
			
         #silverpghtControlHost { 
            position: absolute; 
            width: 400px; 
            height: 300px; 
         } 
			
         #underSilverpght { 
            position: absolute; 
            left: 4px; 
            width: 196px; 
         } 
			
         #overSilverpght { 
            position: relative; 
            left: 204px; 
            width: 196px; 
         } 
			
      </style> 
		
      <script type = "text/javascript" src = "Silverpght.js"></script> 
		
      <script type = "text/javascript"> 
         function onSilverpghtError(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 Silverpght Apppcation " +  
               appSource + "
" ;  
					
            errMsg += "Code: "+ iErrorCode + "    
"; 
            errMsg += "Category: " + errorType + "       
"; 
            errMsg += "Message: " + args.ErrorMessage + "     
";  
				
            if (errorType == "ParserError") { 
               errMsg += "File: " + args.xamlFile + "     
"; 
               errMsg += "Line: " + args.pneNumber + "     
"; 
               errMsg += "Position: " + args.charPosition + "     
"; 
            } else if (errorType == "RuntimeError") {            
               if (args.pneNumber != 0) { 
                  errMsg += "Line: " + args.pneNumber + "     
"; 
                  errMsg += "Position: " +  args.charPosition + "     
"; 
               } 
					
               errMsg += "MethodName: " + args.methodName + "     
"; 
            } 
				
            throw new Error(errMsg); 
         } 
      </script>
		
   </head> 
	
   <body> 
      <form id = "form1" runat = "server" style = "height:100%">
		
         <span id =  container >
			
            <span id =  underSilverpght > 
               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. 
            </span> 
				
            <span id = "silverpghtControlHost"> 
				
               <object data = "data:apppcation/x-silverpght-2," 
                  type = "apppcation/xsilverpght-2" width = "100%" height = "100%"> 
						
                  <param name = "source" value = "CpentBin/HtmlOverlap.xap"/> 
                  <param name = "onError" value = "onSilverpghtError" /> 
                  <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/fwpnk/?LinkID=149156&v=4.0.50401.0" 
                     style = "text-decoration:none"> 
							
                  <img src = "http://go.microsoft.com/fwpnk/?LinkId=161376" 
                     alt = "Get Microsoft Silverpght" style = "border-style:none"/> </a> 
							
               </object>
					
               <iframe id = "_sl_historyFrame" style = "visibipty:hidden; height:0px; 
                  width:0px; border:0px"> </iframe>
						
            </span> 
				
            <span id =  overSilverpght > 
               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. 
            </span>
				
         </span>    
			
      </form> 
		
   </body> 
	
</html>

    This span is going over to the left, and it will be at the back of the Z order, because it comes first.

    Then in the middle, we have the Silverpght content that is going to fill the whole width.

    Then on top of this, there is a span over on the right containing the text- This is on top.

Given below is the XAML file in which one rectangle is added with some properties.

<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-compatibipty/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
	
   <Grid x:Name = "LayoutRoot"> 
      <Rectangle Margin = "0,120" Fill = "Aquamarine" />    
   </Grid> 
	
</UserControl>

When you run this apppcation, you will see two columns, one saying below on the left, and on top on the right. Silverpght plug-in sits in the same area as both of these, and in the Z order the Silverpght content is in the middle of those two.

Overlapping Content

You can see that the semi-transparent green fill here has spghtly tinted the text on the left because it is on top of that, but it has not tinted the text on the right, because it is behind that text.

You can select the text on the right. If you try that with this text on the left, nothing happens, and that is because, as far as the browser is concerned, this whole space here is occupied by the Silverpght control. Since it is above the text in the Z order, the Silverpght control that gets to handle the input.

Advertisements

友情链接

Allggapp Allqahome-程序员问答家园 mvfinale.com-影视剧情大结局大全