.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个人空间ny9q!n"sn	y*A
<
StackPanel.Background>
E7@Iy"b#~-i/{'s;dW0<
LinearGradientBrushStartPoint="1,0"EndPoint="0,0">
D-G!` B&a v0<
GradientStopColor="Transparent"Offset="0" />ITPUB个人空间(n]'n,om4|.h%D
<
GradientStopColor="#FF6600"Offset="1" />
Z:iG/h+A8H0</
LinearGradientBrush>
4fv gX`F*pw0</
StackPanel.Background>ITPUB个人空间KbC[)` fEA
<
TextBlockText="这里是Silverlight"Margin="150 100 0 0"Foreground="White"/>
V7O#U5E+C9{&{U0</
StackPanel>

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

<style.type="text/css">ITPUB个人空间(OA2S_eqf8zm
.slPluginITPUB个人空间OHy*W3I6b
{ITPUB个人空间}k?_{IE7Un
position:absolute;
%KhruJgtB0top:0px;ITPUB个人空间#f'O#T0Y4VA?F K
left:0px;ITPUB个人空间J jP9kyoI
width:50%;ITPUB个人空间/`O;cka2\8l
height:200px;
^;\f$xlk0border:dotted 2px #FF6600;ITPUB个人空间6U(ha2o G
}ITPUB个人空间W`:@2w\ {
.contentITPUB个人空间M~#Y j{I4Q,qZ)b
{
X&U2zS/[%q0position:absolute;ITPUB个人空间_ C8`} qydt
top:0px;ITPUB个人空间P!x y*A y3I+ze7ZZ
left:0px;ITPUB个人空间5`.yn+\&?E+Dvh#N
border:dotted 2px #11FE02;
M"V)a u` t/l0}
mi,U;s g0</style>

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

<asp:SilverlightID="Xaml1"runat="server"
0?0MmAP0
Source="~/ClientBin/TerryLee.SilverlightWindowless.xap"ITPUB个人空间(PFWn+FK
Version="2.0"CssClass="slPlugin"PluginBackground="Transparent"/>

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

<divclass="content">
#qwF _v0
Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,ITPUB个人空间"gom%Rq5qn\)m
如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython,
/gD4I#t1dl0对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。ITPUB个人空间u1gz|_wO[ m
《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、
V;X-b#Z2J!U0图形图像等几个方面带您快速进入Silverlight 2开发。ITPUB个人空间 [8R7b%L F:~-Q(|;xP
</div>

现在来运行程序:ITPUB个人空间![5b2b,BUH

,A@5\]#ZNve'U0可以看到,我们在div中放置的文本,有一部分被Silverlight区域挡住了,因为这时候Silverlight仍然以默认模式运行,它在浏览器中作为独立的一个子窗口而存在,可以通过属性Windowless来设置:
a0s` \^m.@i0ITPUB个人空间\RH0A T"G#G*j'?e
设置Windowless为true之后,再运行程序:
VT"za ]7CV0
WM5@9IC2d;~a0

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

<div>
W4{.`.m2h0<
divclass="content">ITPUB个人空间.qr8]}d|T+L%L
Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,
iw(mI a2V:R8e0如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython,ITPUB个人空间^ @ pgQ
对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。
m#Vyq'm*ft%Qs3O0《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、
z$E%_%`#wl0图形图像等几个方面带您快速进入Silverlight 2开发。ITPUB个人空间y9X'S,Yh@&K chr
</div>
:m!} i Gk3i0<
asp:SilverlightID="Xaml1"runat="server"ITPUB个人空间*`(X(z^Hv3nca
Source="~/ClientBin/TerryLee.SilverlightWindowless.xap"
7xM)\1k:m-Yw,mI$H0
Version="2.0"CssClass="slPlugin"PluginBackground="Transparent"
yQ2O9A ~0
Windowless="true"/>
y;K q#O#Go0</
div>

再运行一下程序:

ITPUB个人空间O@1w8l5S P

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

结束语

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

作者:TerryLeeITPUB个人空间K?7S(x+Y-X
出处:http://terrylee.cnblogs.com
ITPUB个人空间1n-_S4r!t

TAG:

 

评分:0

我来说两句

显示全部

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

日历

« 2008-07-24  
  12345
6789101112
13141516171819
20212223242526
2728293031  

数据统计

  • 访问量: 25805
  • 日志数: 761
  • 影音数: 7
  • 建立时间: 2008-01-04
  • 更新时间: 2008-07-24

RSS订阅

Open Toolbar