一步一步学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>
F!B[o\-s0<StackPanel.Background>
-c%b'fb)zb3C,v0<LinearGradientBrushStartPoint="1,0"EndPoint="0,0">
P'{Cr/mq4IG0G,m0<GradientStopColor="Transparent"Offset="0" />ITPUB个人空间$[nl	t_1X	a2SRd
<GradientStopColor="#FF6600"Offset="1" />
8EH'BN$s1^)m/QM;j0R0</LinearGradientBrush>ITPUB个人空间h9c3~
P#l#Zc	lF H
</StackPanel.Background>ITPUB个人空间Z"CPC[_B0B/c*B
<TextBlockText="这里是Silverlight"Margin="150 100 0 0"Foreground="White"/>ITPUB个人空间E
k+F.QcI
</StackPanel>

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

<style.type="text/css">ITPUB个人空间7x"w\+r6{L4J
l
a*x
.slPluginITPUB个人空间'|({9D)jJXj
{ITPUB个人空间_)C
@j1H+W:_
position:absolute;
-H'dg@
x6x'o
~	R.a&p0top:0px;
0N]g3Zq!_EY0left:0px;ITPUB个人空间	J
l)J-QC
width:50%;

D%jy5oaN,~T0height:200px;
}9[F7duP6]&PW
R0border:dotted 2px #FF6600;ITPUB个人空间ku*R j1`
}
%a5x|i`-@7n+[U0.contentITPUB个人空间5V+?ZQ/Kk#B
{ITPUB个人空间@L"T2i0o,M
position:absolute;ITPUB个人空间$@ojqP?c qqLG
top:0px;ITPUB个人空间a\/Z-]7D
X._*w3a
left:0px;ITPUB个人空间%y:WL0F8n1?
t'Ft
border:dotted 2px #11FE02;ITPUB个人空间"]f*n4uJ(`U
}
@*em5l1{{0</style>

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

<asp:SilverlightID="Xaml1"runat="server"ITPUB个人空间.V7N^ eZjt
Source="~/ClientBin/TerryLee.SilverlightWindowless.xap"ITPUB个人空间0irmz'NL9oJO
Version="2.0"CssClass="slPlugin"PluginBackground="Transparent"/>

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

<divclass="content">ITPUB个人空间
p%u0y.Pa
yn8\b
Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，ITPUB个人空间(VUi,X.z9@
如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，ITPUB个人空间M3~+]+oH2vo2B
`(~4o
对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。
0f0cF^5Nmn0《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、
rLe2UR1[0图形图像等几个方面带您快速进入Silverlight 2开发。
.@a;ce)fr
o0</div>

现在来运行程序：ITPUB个人空间*l({%H2{*Y&So8L/X:q

-[A] Zkmjc{0可以看到，我们在div中放置的文本，有一部分被Silverlight区域挡住了，因为这时候Silverlight仍然以默认模式运行，它在浏览器中作为独立的一个子窗口而存在，可以通过属性Windowless来设置：
4U`4jS |&a0ITPUB个人空间g:^ww|ku#x/|
设置Windowless为true之后，再运行程序：
9L)i/h~I3eQ0ITPUB个人空间(N5L?6h*zF
\!?

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

<div>
8g+j*[1}2\1k0<divclass="content">ITPUB个人空间1a2Cy Y%U,R{(f
Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，ITPUB个人空间
]-jV;oCR
k
如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，

x/v:|sw5[-Z0对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。
P(f;RwNl:~'t0《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、
ON:VDwnDq0图形图像等几个方面带您快速进入Silverlight 2开发。ITPUB个人空间o6T@-bR#n*]or
</div>
)Xka7~+A0<asp:SilverlightID="Xaml1"runat="server"
A$PQ6X
`+h!~;p	_p)s0Source="~/ClientBin/TerryLee.SilverlightWindowless.xap"ITPUB个人空间
~;OMcUX6b
Version="2.0"CssClass="slPlugin"PluginBackground="Transparent"ITPUB个人空间$E9|9u r
Kq"M g	G
Windowless="true"/>

waO4ns7ZK4lj8_0</div>

再运行一下程序：

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

结束语

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