.NEt专家博客!

一步一步学Silverlight 2系列(23):Silverlight与HTML混合之无窗口模式

上一篇 / 下一篇  2008-04-11 21:06:36

概述

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个人空间K2O*}}0y#H}[
<
StackPanel.Background>
(lJB p:q~0<
LinearGradientBrushStartPoint="1,0"EndPoint="0,0">ITPUB个人空间2^_Z%AG-D
<
GradientStopColor="Transparent"Offset="0" />
*pAwm#`h,B,z0<
GradientStopColor="#FF6600"Offset="1" />
9R5xcOug*wjh0</
LinearGradientBrush>ITPUB个人空间+sB}Tn1n{iW
</
StackPanel.Background>
PL W_elXhc0<
TextBlockText="这里是Silverlight"Margin="150 100 0 0"Foreground="White"/>
WZ2]bBAJ`V8wy0</
StackPanel>

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

<style.type="text/css">ITPUB个人空间,B%F_r,xi.Dz'X&V
.slPlugin
-y/VP#Q y0B-@0
{
'W0Sr c(w*^0\c0position:absolute;ITPUB个人空间b+j[6e4@D? Q k
top:0px;ITPUB个人空间 X(M:K:C-z/NZ i
left:0px;
A}S4p b@0width:50%;
?z#pw:e.u;w0height:200px;
;@6Hpg2M?%IU^u&Y0border:dotted 2px #FF6600;ITPUB个人空间O:iW/p&U6dYaT.l#t
}ITPUB个人空间(TJ%jk{G
.contentITPUB个人空间e[1@#[3O9N ~ w ]
{
gL(Y-V ^ M-C6^/?:V0position:absolute;
iKu AxIF`i(F0top:0px;ITPUB个人空间.klWGo$S
left:0px;
e_*pnY_J0border:dotted 2px #11FE02;ITPUB个人空间9w#Lhjv"fc)J
}
\:MK!NI j2g0b(d.j0</style>

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

<asp:SilverlightID="Xaml1"runat="server"
)J;u4Z h"W;n(\"l:Dw5r0
Source="~/ClientBin/TerryLee.SilverlightWindowless.xap"
MG0AR2[0
Version="2.0"CssClass="slPlugin"PluginBackground="Transparent"/>

放置一个div,里面加一些文本:

<divclass="content">ITPUB个人空间?N#f-JA
Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,ITPUB个人空间9brfa E6d?$r q
如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython,ITPUB个人空间1[ sWA8T7h+M
对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。ITPUB个人空间A vUd2P3nj
《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、
3l]j'\/_0图形图像等几个方面带您快速进入Silverlight 2开发。ITPUB个人空间d7TC;nI
</div>

现在来运行程序:ITPUB个人空间[sI~ G

e$B;E6QHw0可以看到,我们在div中放置的文本,有一部分被Silverlight区域挡住了,因为这时候Silverlight仍然以默认模式运行,它在浏览器中作为独立的一个子窗口而存在,可以通过属性Windowless来设置:
6yL2HL!h,m0
O Kj@ Gi]5f]0设置Windowless为true之后,再运行程序:
HNK7L'd0
q9B4h{6Ox%Z0

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

<div>ITPUB个人空间vG6K7WAl
<
divclass="content">
X0xf(E2m4f0
Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,ITPUB个人空间7j3h)M6X?
如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython,
:P/a5vt7S4]a0XD0对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。ITPUB个人空间(U/F.Olm
《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、
J:BE]2?3q*yi0图形图像等几个方面带您快速进入Silverlight 2开发。
@@ Pr I D]"[){0</div>
4H5`+I.gZ3`B0<
asp:SilverlightID="Xaml1"runat="server"ITPUB个人空间"`M/sBB [#n!U_.ua
Source="~/ClientBin/TerryLee.SilverlightWindowless.xap"
v$J5q-m&Mu~'D7G0
Version="2.0"CssClass="slPlugin"PluginBackground="Transparent"ITPUB个人空间yc|CWdI%a3m
Windowless="true"/>ITPUB个人空间8P.gajI3z^$C
</
div>

再运行一下程序:

ITPUB个人空间%N p,[^\k,|;S

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

结束语

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

作者:TerryLee
|4f1]E'rR-m Z0出处:http://terrylee.cnblogs.com
ITPUB个人空间#jl R0D D L$~*UDJ+O

TAG:

 

评分:0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

Open Toolbar