一步一步学Silverlight 2系列（23）：Silverlight与HTML混合之无窗口模式

概述

Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入Silverlight 2开发。

本文将介绍Silverlight与HTML混合编程之无窗口模式。

无窗口模式

为什么默认情况下Silverlight插件会拥有自己的窗口，所有的Silverlight的处理操作都会在该子窗口中完成。我们看一个例子：

先做一个简单的Silverlight界面：

<StackPanel>ITPUB个人空间5[&MCY1s
\P
<StackPanel.Background>
"IN[_SR0<LinearGradientBrushStartPoint="1,0"EndPoint="0,0">ITPUB个人空间W(r-O%j E(JH
<GradientStopColor="Transparent"Offset="0" />
;dZ/ISHz
p0S8{zI0<GradientStopColor="#FF6600"Offset="1" />
9lC?qa7Y_bL(m0</LinearGradientBrush>ITPUB个人空间j)WFtA&k
</StackPanel.Background>ITPUB个人空间8JU6CX
_jX7o.D}z3i`
<TextBlockText="这里是Silverlight"Margin="150 100 0 0"Foreground="White"/>ITPUB个人空间)sb'KC3^(Q'Y
</StackPanel>

在测试页中定义两个样式，分别用来控制Silverlight插件和HTML内容的样式：

<style.type="text/css">ITPUB个人空间?5u7P9R+QUdY
.slPlugin
.o
_xbV0k2D0{
/oN!\L.tMslA
b0position:absolute;
n,C,v	f&Z0top:0px;ITPUB个人空间1~n
L
b/g5e_
left:0px;
)xEm;m
}i^:_0width:50%;
o2jw4}u Y d.]*P0height:200px;ITPUB个人空间"y$S!N6A)K
e;q s[:W
border:dotted 2px #FF6600;ITPUB个人空间0j:N*LP|b7HWeu
}
!O4o/lx"V%xE
c0.content
'_;CFV0c\)mR0{
$K8t5O(A0i2L0position:absolute;ITPUB个人空间Kep&z7Z.tS?2x
top:0px;ITPUB个人空间gsz6i8j0n
left:0px;
O'm#Y:kk4}0border:dotted 2px #11FE02;ITPUB个人空间Ta-V%N^
}ITPUB个人空间#ahDl
Xr
y
</style>

为Silverlight插件设置样式，并将插件的背景设置为Transparent

<asp:SilverlightID="Xaml1"runat="server"
z	G
h
U(L"|+vpr0Source="~/ClientBin/TerryLee.SilverlightWindowless.xap"
7QUU|Bag
wJt0Version="2.0"CssClass="slPlugin"PluginBackground="Transparent"/>

放置一个div，里面加一些文本：

<divclass="content">ITPUB个人空间0Z[Mj)|;n
Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，
8yG%OU+q%]0如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，ITPUB个人空间B8z{+vW*[G;W8Z2C
对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。ITPUB个人空间B
FL
S#pCuf
《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、ITPUB个人空间3m4OD'XUS-~P
图形图像等几个方面带您快速进入Silverlight 2开发。ITPUB个人空间1L Yq3p#Y}i~
</div>

现在来运行程序：
0Ag4II
rM T0ITPUB个人空间 F,f)yjxA;SQ
可以看到，我们在div中放置的文本，有一部分被Silverlight区域挡住了，因为这时候Silverlight仍然以默认模式运行，它在浏览器中作为独立的一个子窗口而存在，可以通过属性Windowless来设置：
`i?z3dD5uj0
|b!EQ.a#a
@$@@c!U0设置Windowless为true之后，再运行程序：
,~ bZ6rp&L9K ?i*_0
J}1u^N*`0

现在可以看到，文字信息可以显示在Silverlight插件之上。我们再调整一下文字区域和Silverlight插件的位置：

<div>ITPUB个人空间6e}n7v/Qm%s{a
<divclass="content">
x)qp"nXG4k[
rz0Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，
&v:t(Ic%iLA'm0如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，
3_]Jm$TxVJW0对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。ITPUB个人空间5ey%qO5Dc'`aH
《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、ITPUB个人空间eW2Dwn
图形图像等几个方面带您快速进入Silverlight 2开发。
b1E^4lgE%U0</div>
%J;d-fn&g_0<asp:SilverlightID="Xaml1"runat="server"
K8n}'f'e0Source="~/ClientBin/TerryLee.SilverlightWindowless.xap"ITPUB个人空间;{lA8K2Bd
JK
Version="2.0"CssClass="slPlugin"PluginBackground="Transparent"
'NDbik&f;~!G6vL0Windowless="true"/>
2D5N%vC"aRc0</div>

再运行一下程序：

这时Silverlight显示在文字的上面，由于设置为背景为透明的，这样就可以看到一部分文字。

结束语

本文内容比较少，简单介绍了混合Silverlight和HTML——Silverlight插件的无窗口模式相关内容，其实就是Windowless属性的设置:)