开发手册 欢迎您！
软件开发者资料库

Silverlight - CSS

Silverlight和CSS - 从概述，环境设置，入门，XAML概述，项目类型，固定布局，动态布局，约束与无约束布局，Silverlight和CSS，控件，按钮，内容模型，简单易用的步骤学习Silverlight列表框，模板，视觉状态，数据绑定，浏览器集成，浏览器外应用程序，应用程序，资源和部署，文件访问，视图模型，输入处理，隔离存储，文本，动画，视频和音频，打印。

由于Silverlight内容始终在网页内运行，因此对象标记受普通CSS布局规则的约束.插件无法将首选大小推送回浏览器，因此无论Silverlight内容的大小如何，其大小和位置都将由包含的网页完全确定.

  • 默认的Silverlight项目模板将CSS放入网页，为对象标记提供整个浏览器窗口.

  • 默认的XAML似乎有一个固定的大小，但如果你仔细观察，你会发现模板设置了设计宽度和设计高度属性.

  • 这些告诉Visual Studio或Blend，用户界面在设计器中应该有多大，但它们允许它在运行时调整大小.

在解决方案资源管理器中，您将看到 {project name} TestPage.html 文件，这是您获得的默认HTML当您在Visual Studio中创建一个新的Silverlight项目时，如下所示.

Silverlight project

此处顶部的CSS将HTML和正文样式设置为100％，这看起来有点奇怪.

这是完整的html文件，其中包含不同的设置.

            FirstExample                 html, body {             height: 100%;             overflow: auto;          }          body {             padding: 0;             margin: 0;          }          #silverlightControlHost {             height: 100%;             text-align:center;          }                              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);          }                                                                                                                                                                                                                
            

查看 silverlightControlHost ，我们需要确保它具有固定高度的星星，例如300像素，宽度为400像素，与XAML中的默认设计宽度和高度相匹配.您也可以根据应用程序要求更改这些设置.

重叠内容

默认情况下，Silverlight和HTML内容无法共享相同的空间屏幕.如果您从两者中制作内容，以便它们占用相同的空间，那么只有Silverlight内容可见.

这是因为，默认情况下，Silverlight会询问浏览器是否有自己的内容私有窗口，将所有内容呈现为.它是浏览器中的子窗口，因此它看起来像是网页的一部分，但它可以防止内容重叠.

主要原因是性能.通过在屏幕上获得自己的私有区域，Silverlight不必使用Web浏览器协调其渲染.

但是，有时重叠内容很有用.需要支付性能价格.当Silverlight和HTML在屏幕上共享空间时，您可能会发现动画运行不顺畅，但额外的布局灵活性可能物有所值.要使用重叠内容，您需要启用无窗口模式.

  • 在无窗口模式下，Silverlight插件呈现为与允许内容混合的浏览器相同的目标窗口处理程序.

  • 当内容重叠时，Zed索引或Z索引很重要.就HTML而言，Silverlight内容是单个HTML元素，因此它只出现在HTML Z顺序中的一个位置.

  • 这有一个对鼠标处理的影响.如果Silverlight插件位于HMTL Z顺序的顶部，则其边界框内任何位置的鼠标活动都将传递给插件.

  • 即使插件的某些区域是透明的，并且您可以看到HTML背后，您也无法单击它.

  • 但是，如果您安排Z索引并将某些HTML内容放在首位，即使它与Silverlight内容重叠，它也将继续保持交互.

示例

看一下下面给出的简单示例，其中我们有一个带容器的布局，其中三个div都被排列为重叠在这个内容中div.

             HtmlOverlap                 #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;          }                               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);          }                                                          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.             
                                                                                                                                                                                                                                                               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将向左移动，它将位于后面Z顺序，因为它是第一个.

  • 然后在中间，我们有Silverlight内容将填充整个宽度.

  • 然后在此基础上，右边有一个包含文字的div  -  这是在顶部.

下面给出了一个XAML文件，其中添加了一个带有一些属性的矩形.

                  

当您运行此应用程序时，您将看到两列，一列在左下方，右上方. Silverlight插件与这两个插件位于同一区域，并且在Z顺序中，Silverlight内容位于这两个插件的中间.

重叠内容

你可以看到这里的半透明绿色填充略微淡化了左边的文字，因为它位于其上面，但它有未在右侧显示文本，因为它位于该文本的后面.

您可以选择右侧的文本.如果您尝试使用左侧的此文本，则没有任何反应，这是因为，就浏览器而言，此处的整个空间都被Silverlight控件占用.由于它位于Z顺序中的文本之上，因此Silverlight控件可以处理输入.