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

Source: Internet
Author: User
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 :)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.