概述
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屬性的設置:)
本文出自 51CTO.COM技術博客