How To Give a Silverlight 2 Gadget a Transparent Background

Warning: This is a poor solution if your gadget has any level of dragging interaction in it. The “windowless=true” step will make it so that any dragging interaction will be interrupted by the gadget, which will interpret such a move as an attempt to drag the gadget off the side bar.

Giving your Silverlight gadget a transparent background is actually quite simple. First, follow the directions from Chris Szurgot’s post on Silverlight gadgets. No point in duplicating his work.

When you’re done, create a transparent png file. Or download this one.

Now, head over to your html file. Get rid of all CSS background information. Add the following just below the body tag:

<g:background id=”background”
src=”transparent.png”
style=”position:absolute;top:0;left:0;z-index:-999;no=repeat;“ />

Finally, change the following params in the Silverlight object host.

<param name=”background” value=”transparent” />
<param name=”windowless” value=”true” />

And that’s it.

Additional Warning: It looks like there is no solution yet for the pink halo around any anti-aliased pixels in a Silverlight gadget.

This is a problem that transparent Silverlight gadgets have had for some time now. If that doesn’t bother you then you’re all set.