Silverlight最终是要以<object />形式嵌入到HTML里这就涉及如何和HTML元素进行布局问题silverlight-plugin有个windowless属性当windowsless属性值设置为false时silverlight在HTML里就以子窗口形式出现即silverlight展现由单独窗口来处理和其他html元素展现是相互独立例如代码:

以下为引用内容:
<divid="silverlightControlHost"style="height:160px;width:300px;">
<objectdata="data:application/x-silverlight-2,"type="application/x-silverlight-2">
<paramname="source"value="ClientBin/TestWindowlessProperty.xap"/>
<paramname="onerror"value="onSilverlightError"/>
<paramname="background"value="transparent"/>
<paramname="windowless"value="false"/>
<paramname="minRuntimeVersion"value="2.0.31005.0"/>
<paramname="autoUpgrade"value="true"/>
<ahref="http://go.microsoft.com/fwlink/?LinkID=124807"style="text-decoration:none;">
<imgsrc="http://go.microsoft.com/fwlink/?LinkId=108181"alt="GetMicrosoftSilverlight"style="border-style:none"/>
</a>
</object>
<ramestyle='visibility:hidden;height:0;width:0;border:0px'></rame>
</div>

<divstyle="width:250px;height:160px;background:gray;">
ThisisHTMLDIVElement<br/>
ThisisHTMLDIVElement<br/>
ThisisHTMLDIVElement<br/>
ThisisHTMLDIVElement<br/>
ThisisHTMLDIVElement<br/>
</div>


在浏览器中显示如下:


在这种模式下Silverlight和HTML元素是不能相互融合到起Silverlight背景不能是透明可以通过　　 <paramname="background"value="transparent"/>来设置背景

虽然这里设置了transparent但显示效果并非透明而是黑色这就是不是windowless模式下

在有些应用环境下我们Silverlight在运行过程中所占位置大小是不样例如用Silverlight做个下拉菜单情况下所占位置高度是比较小当用户点击菜单后菜单展开这时候Silverlight就要求占位置大点高度改变了但又不想Silverlight高度增加而撑开其他html元素或将其他元素遮挡住比较有效办法就是在菜单展开和收缩时动态改变<object>高度且在菜单展开时让Silverlight层次浮动到其他HTML元素上在没有Silverlight内容地方显示透明状态要实现这种效果就需要将Silverlight设置为windowless模式即设置windowless属性为true,同时设置background值为transparent另外还要在Silverlight中将没有内容地方背景设置为透明才能时Silverlight在html里展现时相关地方为透明效果

例如:

以下为引用内容:
<divid="silverlightControlHost"style="height:155px;width:300px;">
<divid="silverlightControlHost"style="height:160px;width:300px;position:absolute;
z-index:9">
<objectdata="data:application/x-silverlight-2,"type="application/x-silverlight-2">
<paramname="source"value="ClientBin/TestWindowlessProperty.xap"/>
<paramname="onerror"value="onSilverlightError"/>
<paramname="background"value="transparent"/>
<paramname="windowless"value="true"/>
<paramname="minRuntimeVersion"value="2.0.31005.0"/>
<paramname="autoUpgrade"value="true"/>
<ahref="http://go.microsoft.com/fwlink/?LinkID=124807"style="text-decoration:none;">
<imgsrc="http://go.microsoft.com/fwlink/?LinkId=108181"alt="GetMicrosoftSilverlight"
style="border-style:none"/>
</a>
</object>
<ramestyle='visibility:hidden;height:0;width:0;border:0px'></rame>
</div>
</div>
<divstyle="width:250px;height:160px;background:gray;">
ThisisHTMLDIVElement<br/>
ThisisHTMLDIVElement<br/>
ThisisHTMLDIVElement<br/>
ThisisHTMLDIVElement<br/>
ThisisHTMLDIVElement<br/>
</div>


显示如下:


按照微软提供文档般情况下是不建议使用windowless模式这样silverlight就和html混合展现会降低性能特别是silveright比较复杂时候或者高质量多媒体显示时候

在Windowsless模式下般情况下Silverlight周围是没有边框但在特定条件下点击Silverlight或者Silverlight获得焦点后它周围就出现了烦人虚线边框

我参和个项目里原来将silverlight以windowless模式嵌入到html页面切正常但当页面中别部分使用了AjaxControlToolkit<ajaxToolkit:ModalPopupExtender />Control控件时页面弹出ajax对话框关闭后silverlight周围就出现了虚线边框经过番探索发现AjaxControlToolKit对应JS在处理ModalPopup时是将页面所有元素tabIndex设置为-1,从而达到不允许用户点击目




以下为引用内容:
disableTab:function{
///<summary>
///Changethetabindicessoweonlytabthroughthemodalpopup
///(andhideSELECTtagsinIE6)
///</summary>

vari=0;
vartagElements;
vartagElementsInPopUp=Array;
Array.clear(this._saveTabIndexes);

//Saveallpopup'stagagElementsInPopUp
for(varj=0;j<this._tagWithTabIndex.length;j){

tagElements=this._foregroundElement.getElementsByTagName(this._tagWithTabIndex[j]);
for(vark=0;k<tagElements.length;k){
tagElementsInPopUp[i]=tagElements[k];
i;
}
}

i=0;
for(varj=0;j<this._tagWithTabIndex.length;j){
tagElements=document.getElementsByTagName(this._tagWithTabIndex[j]);
for(vark=0;k<tagElements.length;k){
(Array.indexOf(tagElementsInPopUp,tagElements[k])-1){
this._saveTabIndexes[i]={tag:tagElements[k],index:tagElements[k].tabIndex};
tagElements[k].tabIndex="-1";
i;
}
}
}



restoreTab:function{
///<summary>
///Restorethetabindicessowetabthroughthepagelikenormal
///(andrestoreSELECTtagsinIE6)
///</summary>

for(vari=0;i<this._saveTabIndexes.length;i){
this._saveTabIndexes[i].tag.tabIndex=this._saveTabIndexes[i].index;
}

Array.clear(this._saveTabIndexes);

//IE6BugwithSELECTelementalwaysshowingupontop
((Sys.Browser.agent=Sys.Browser.InternetExplorer)&&(Sys.Browser.version<7)){
for(vark=0;k<this._saveDesableSelect.length;k){
this._saveDesableSelect[k].tag.style.visibility=this._saveDesableSelect[k].visib;
}
Array.clear(this._saveDesableSelect);
}
},

silverlight<object/>元素tabIndex也恢复成了0



关键就是这个<object/>silverlight标签tabIndex设置为0这个操作使得其周围出现了虚线边框——虽然状态下其tabIndex本来就是0

我们可以做个实验在silverlight以windowless模式嵌入到HTML页面时(非windowless模式不会出现边框)在页面化时(或某个事件触发时)显示将silverlight<object/>标签tabIndex设置为0:

以下为引用内容:
="cnblogs_code_Collapse" id="Code_Closed_Text_142254">Code
<Script>
document.getElementById("silverlightObjectElementId").tabIndex=0;
</Script>

这时,当鼠标点击Silverlight时,周围就会浮现虚线边框,如图:


为解决这个问题,我尝试了几种思路方法:

1、在IE下:

1)可以在<object />元素onfocus事件进行处理,让它不要得到焦点:

以下为引用内容:
<scriptlanguage=javascript>
document.getElementById("silverlightObjectElementId").onfocus=function{
(this.tabIndex!=-1){
　　　　　　this.blur;
this.tabIndex=-1;
}
}
</script>


2) 可以在引用silverlight<object>元素中直接将tabindex设置为-1这样在AjaxControlToolkitjs中运行restoreTab后silverlighttabindex仍旧是-1而不是0避开了由此导致虚线边框问题
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" style="width:200px;height:200px;" tabIndex=-1>


3) 在<object>标签中直接加上hidefocus属性即:
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" style="width:200px;height:200px;" HideFocus=true>

4) 可以在onpropertychange事件里做些处理

2、在FireFox下:

1) 添加样式outling:none,即:
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" style="width:200px;height:200px;outline:none;" >

2) 在事件oninput里做些处理(未尝试)

所以我们silverlight<object/>元素tabIndex也由0设置成了-1而当关闭ModualPopup窗口时对应JS又恢复所有元素tabIndex: