One-step learning of Silverlight 2 series (23): windowless mode mixed with Silverlight and HTML

Overview

The release of Silverlight 2 Beta 1 brings us a lot of surprises from Runtime and Tools, such as supporting the framework languages Visual Basic, Visual C #, IronRuby, Ironpython, A series of new features such as JSON, Web Service, WCF, and Sockets support. The article "one-step learning Silverlight 2 series" takes you to Silverlight 2 development quickly from the following aspects: Silverlight 2 basic knowledge, data and communication, custom controls, animation, and graphic images.

This article describes the windowless mode of Silverlight and HTML hybrid programming.

Windowless Mode

By default, the Silverlight plug-in has its own window. All Silverlight operations are completed in this subwindow. Let's look at an example:

First make a simple Silverlight interface:

<StackPanel> <StackPanel. background> <LinearGradientBrush StartPoint = "" EndPoint = ""> <GradientStop Color = "Transparent" Offset = "0"/> <GradientStop Color = "# FF6600" Offset =" 1 "/> </LinearGradientBrush> </StackPanel. background> <TextBlock Text = "Silverlight" Margin = "150 100 0 0" Foreground = "White"/> </StackPanel>

Define two styles on the test page to control the styles of the Silverlight plug-in and HTML content respectively:

<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>

Set the style for the Silverlight plug-in and set the background of the plug-in to Transparent

<asp:Silverlight ID="Xaml1" runat="server"             Source="~/ClientBin/TerryLee.SilverlightWindowless.xap"             Version="2.0" CssClass="slPlugin" PluginBackground="Transparent"/>

Place a div with some text in it:

<Div class = "content"> the release of Silverlight 2 Beta 1 brings us a lot of surprises, such as supporting the framework language Visual Basic, visual C #, IronRuby, Ironpython, and a series of new features such as support for JSON, Web Service, WCF, and Sockets. The article "one-step learning Silverlight 2 series" takes you to Silverlight 2 development quickly from the following aspects: Silverlight 2 basic knowledge, data and communication, custom controls, animation, and graphic images. </Div>

Run the program now:

 

We can see that some of the text we put in the div is blocked by the Silverlight area, because Silverlight is still running in the default mode at this time, it exists as an independent sub-window in the browser and can be set through the Windowless attribute:

 

After setting Windowless to true, run the program again:

 

Now we can see that text information can be displayed on the Silverlight plug-in. Let's adjust the text area and the position of the Silverlight plug-in:

<Div> <div class = "content"> the release of Silverlight 2 Beta 1 brings us a lot of surprises, such as supporting the framework language Visual Basic, visual C #, IronRuby, Ironpython, and a series of new features such as support for JSON, Web Service, WCF, and Sockets. The article "one-step learning Silverlight 2 series" takes you to Silverlight 2 development quickly from the following aspects: Silverlight 2 basic knowledge, data and communication, custom controls, animation, and graphic images. </Div> <asp: Silverlight ID = "Xaml1" runat = "server" Source = "~ /ClientBin/TerryLee. SilverlightWindowless. xap "Version =" 2.0 "CssClass =" slPlugin "PluginBackground =" Transparent "Windowless =" true "/> </div>

Run the following program:

In this case, Silverlight is displayed on the text. Because the background is set to transparent, you can see a part of the text.

Conclusion

This document briefly introduces the non-window mode of the hybrid Silverlight and HTML-Silverlight plug-ins, which is actually the setting of the Windowless attribute :)