Did You Know That... you must set isWindowless to true to use HTML overlays?
One of the parameters you pass in when creating a Silverlight object is the parameter isWindowless. That parameter defaults to false.
Normally, you do want isWindowlessto be set to false, because when it is set to true, you pay a very large performance penalty. However, there are two circumstances under which you must set it to true.
- If you want the background to be transparent, you must set isWindowless to true
- if you want to overlay an HTML control on top of your Silverlight control, you must set isWindowless to true.
The second issue of using an HTML overlay arises quite frequently. To see this at work, create a new Silverlight 1.0 application in Visual Studio 2008.
Add the following select statement to default.html
<select id="colors" style=" position:relative; left:20px; top:30px ">
<option>"Black"</option>
<option>"Red"</option>
<option>"Orange"</option>
<option>"Yellow"</option>
<option>"Green"</option>
<option>"Blue"</option>
<option>"Indigo"</option>
<option>"Violet"</option>
</select>
Run the application and you'll see that the drop-down is immediately covered by the button created by the sample XAML. . As noted above, the default is for isWindowless to be false and therefore for Silverlight controls to be windowed. Windowed Silverlight controls have a z-index of 1 and are always on top.
Open up default.HTML.JS and change the isWindowless parameter to true, and run the application again. This time the HTML overlay appears on top of the Silverlight control. Windowless Silverlight controls do not have as z-index of 1, and so you can overlay HTM controls on top of them.