Silverlight嵌入到HTML之windowless属性及运用AjaxControlToolKit时出现虚线边框的
Silverlight程序最终是要以<object />的形式嵌入到HTML里的,这就涉及怎么和HTML元素进行布局的问题。silverlight-plugin有个windowless属性,当windowsless属性值设置为false时,silverlight在HTML里就以子窗口的形式出现,即silverlight程序的展现由单独的窗口来处理,与其他html元素的展现是相互独立的。例如代码:
<div id=http://www.mamicode.com/"silverlightControlHost" style=http://www.mamicode.com/"height:160px;width:300px;"> <object data=http://www.mamicode.com/"data:application/x-silverlight-2," type=http://www.mamicode.com/"application/x-silverlight-2"> <param name=http://www.mamicode.com/"source" value=http://www.mamicode.com/"ClientBin/TestWindowlessProperty.xap"/> <param name=http://www.mamicode.com/"onerror" value=http://www.mamicode.com/"onSilverlightError" /> <param name=http://www.mamicode.com/"background" value=http://www.mamicode.com/"transparent" /> <param name=http://www.mamicode.com/"windowless" value=http://www.mamicode.com/"false" /> <param name=http://www.mamicode.com/"minRuntimeVersion" value=http://www.mamicode.com/"2.0.31005.0" /> <param name=http://www.mamicode.com/"autoUpgrade" value=http://www.mamicode.com/"true" /> <a href=http://www.mamicode.com/"?LinkID=124807" style=http://www.mamicode.com/"text-decoration: none;"> <img src=http://www.mamicode.com/"?LinkId=108181" alt=http://www.mamicode.com/"Get Microsoft Silverlight" style=http://www.mamicode.com/"border-style: none"/> </a> </object> <iframe style=http://www.mamicode.com/‘visibility:hidden;height:0;width:0;border:0px‘></iframe> </div> <div style=http://www.mamicode.com/"width:250px;height:160px;background:gray;"> This is HTML DIV Element<br /> This is HTML DIV Element<br /> This is HTML DIV Element<br /> This is HTML DIV Element<br /> This is HTML DIV Element<br /> </div>
在浏览器中显示的如下:
在这种模式下,Silverlight程序和HTML元素是不能相互融合到一起的,Silverlight的背景不能是透明的,可以通过 <param name="background" value="transparent" />来设置背景。
虽然这里设置了transparent,但显示的效果并非透明而是黑色,这就是因为不是windowless模式下。
在有些应用环境下,我们的Silverlight程序在运行过程中所占的位置大小是不一样的。例如用Silverlight做一个下拉菜单,初始情况下所占的位置高度是比较小的,当用户点击菜单后菜单展开,这时候Silverlight程序就要求占的位置大点,高度改变了,但又不想因为Silverlight的高度增加而撑开其他html元素或将其他元素遮挡住。比较有效的办法就是在菜单的展开与收缩时动态改变<object>的高度,且在菜单展开时让Silverlight的层次浮动到其他HTML元素上,在没有Silverlight内容的地方显示透明状态。要实现这种效果,就需要将Silverlight设置为windowless模式,即设置windowless属性为true,同时设置background的值为transparent。另外,还要在Silverlight程序中将没有内容的地方的背景设置为透明,才能时Silverlight在html里展现时相关地方为透明效果。
例如:
<div id=http://www.mamicode.com/"silverlightControlHost" style=http://www.mamicode.com/"height: 155px; width: 300px;"> <div id=http://www.mamicode.com/"silverlightControlHost" style=http://www.mamicode.com/"height: 160px; width: 300px; position: absolute; z-index: 9"> <object data=http://www.mamicode.com/"data:application/x-silverlight-2," type=http://www.mamicode.com/"application/x-silverlight-2"> <param name=http://www.mamicode.com/"source" value=http://www.mamicode.com/"ClientBin/TestWindowlessProperty.xap" /> <param name=http://www.mamicode.com/"onerror" value=http://www.mamicode.com/"onSilverlightError" /> <param name=http://www.mamicode.com/"background" value=http://www.mamicode.com/"transparent" /> <param name=http://www.mamicode.com/"windowless" value=http://www.mamicode.com/"true" /> <param name=http://www.mamicode.com/"minRuntimeVersion" value=http://www.mamicode.com/"2.0.31005.0" /> <param name=http://www.mamicode.com/"autoUpgrade" value=http://www.mamicode.com/"true" /> <a href=http://www.mamicode.com/"?LinkID=124807" style=http://www.mamicode.com/"text-decoration: none;"> <img src=http://www.mamicode.com/"?LinkId=108181" alt=http://www.mamicode.com/"Get Microsoft Silverlight" style=http://www.mamicode.com/"border-style: none" /> </a> </object> <iframe style=http://www.mamicode.com/‘visibility: hidden; height: 0; width: 0; border: 0px‘></iframe> </div> </div> <div style=http://www.mamicode.com/"width: 250px; height: 160px; background: gray;"> This is HTML DIV Element<br /> This is HTML DIV Element<br /> This is HTML DIV Element<br /> This is HTML DIV Element<br /> This is HTML DIV Element<br /> </div>
显示如下:
温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/67331.html
- 上一篇:《Head First设计模式》C#实现(六)
- 下一篇:winForm的布局