一步一步学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>
    <StackPanel.Background>
        <LinearGradientBrush StartPoint="1,0" EndPoint="0,0">
            <GradientStop Color="Transparent" Offset="0" />
            <GradientStop Color="#FF6600" Offset="1" />
        </LinearGradientBrush>
    </StackPanel.Background>
    <TextBlock Text="这里是Silverlight" Margin="150 100 0 0" Foreground="White"/>
</StackPanel>
在测试页中定义两个样式,分别用来控制Silverlight插件和HTML内容的样式:
<style type="text/css">
    .slPlugin
    {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 50%;
        height: 200px;
        border:dotted 2px #FF6600;
    }
    .content
    {
        position: absolute;
        top: 0px;
        left: 0px;
        border:dotted 2px #11FE02;
    }
</style>
为Silverlight插件设置样式,并将插件的背景设置为Transparent
<asp:Silverlight ID="Xaml1" runat="server" 
            Source="~/ClientBin/TerryLee.SilverlightWindowless.xap" 
            Version="2.0" CssClass="slPlugin" PluginBackground="Transparent"/>
放置一个div,里面加一些文本:
<div class="content">
       Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,
       如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython,
       对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。
       《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、
       图形图像等几个方面带您快速进入Silverlight 2开发。
 </div>
现在来运行程序:
 
可以看到,我们在div中放置的文本,有一部分被Silverlight区域挡住了,因为这时候Silverlight仍然以默认模式运行,它在浏览器中作为独立的一个子窗口而存在,可以通过属性Windowless来设置:
 
设置Windowless为true之后,再运行程序:
 
现在可以看到,文字信息可以显示在Silverlight插件之上。我们再调整一下文字区域和Silverlight插件的位置:
<div>
    <div class="content">
           Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,
           如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython,
           对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。
           《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、
           图形图像等几个方面带您快速进入Silverlight 2开发。
     </div>
    <asp:Silverlight ID="Xaml1" runat="server" 
    Source="~/ClientBin/TerryLee.SilverlightWindowless.xap" 
    Version="2.0" CssClass="slPlugin" PluginBackground="Transparent"
    Windowless="true"/>
</div>
再运行一下程序:
 
这时Silverlight显示在文字的上面,由于设置为背景为透明的,这样就可以看到一部分文字。

结束语

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















本文转自lihuijun51CTO博客,原文链接: http://blog.51cto.com/terrylee/67270 ,如需转载请自行联系原作者

相关文章
electron解决创建新窗口html文件不能引入ipcRenderer通信
electron解决创建新窗口html文件不能引入ipcRenderer通信
|
5月前
|
Web App开发
在HTML中用meta控制浏览器默认模式
在HTML文档的`&lt;head&gt;`标签中,通过添加不同的`&lt;meta&gt;`标签可指定浏览器默认使用的内核。使用`&lt;meta name=&quot;renderer&quot; content=&quot;webkit&quot;&gt;
83 1
|
6月前
自适应窗口图片轮播HTML代码
自适应窗口图片轮播HTML代码
45 2
自适应窗口图片轮播HTML代码
|
6月前
|
前端开发
前端必看的8个HTML+CSS技巧 (七)混合模式(Blend)
前端必看的8个HTML+CSS技巧 (七)混合模式(Blend)
|
移动开发 前端开发 开发者
在HTML5中DOCTYPE的作用是什么?标准与兼容模式(混杂模式)各有什么区别?
在HTML5中DOCTYPE的作用是什么?标准与兼容模式(混杂模式)各有什么区别?
133 0
|
运维 前端开发 JavaScript
Html|前后端分离模式的思考
Html|前后端分离模式的思考
102 0
|
移动开发 前端开发 JavaScript
仅使用HTML和CSS的亮暗模式按钮切换
建立仅html和css的亮暗模式切换的快速指南。文章末尾给出了完整代码
193 0
|
移动开发 JavaScript 前端开发
HTML中的JavaScript文档模式
HTML中的JavaScript文档模式是指浏览器在解析HTML文档时采用的模式,它可以影响文档的呈现方式和JavaScript的行为。本文将介绍文档模式的分类和作用,以及如何设置文档模式。
html-day05margin的问题&标准模式&常用属性
html-day05margin的问题&标准模式&常用属性
uiu
|
Web App开发 编解码 前端开发
HTML+CSS各类布局模式介绍
HTML+CSS各类布局模式介绍
uiu
187 0
下一篇
无影云桌面