Silverlight Tips of the Day - Blog by Mike Snow

Silverlight Tip of the Day #11 – How to make your Silverlight Control Transparent.

In order to make your Silverlight control transparent to the background of your web site you have to do two things.

From an ASPX page:

1. Add the tag PluginBackground="Transparent" to your Silverlight control.
2. Add the tag Windowless="true" to your Silverlight control.

Example:

<asp:Silverlight PluginBackground="Transparent" Windowless="true" ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication4.xap" MinimumVersion="2.0.30523"  />

From an HTML page:

1. Add the param: <param name="background" value="Transparent" /
2. Add the param: <param name="windowless" value="true" />

Example:

<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" >
<param name="source" value="ClientBin/SilverlightApplication4.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="pluginbackground" value="Transparent" />
<param name="windowless" value="true" /> 
</object>

Notes:

By default your Silverlight control takes up the entire page. This is because the Width and Height are set to 100%. If you want the control to only consume part of the page change these values to represent what you want. For example, to make the control 400x400 pixels on the page you can set it like this:

<asp:Silverlight Width="400px" Height="400px" PluginBackground="Transparent" Windowless="true" ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication4.xap" MinimumVersion="2.0.30523"  />

Thank you,
--Mike Snow

 Subscribe in a reader