Silverlight: windowless property and transparent controls

Today I”ve been playing with the Windowless property of the Silverlight control and seeing what can be achieved when you set this property to true. The first thing you should keep in mind is that this property can only be set during the creation of the control. You can always check the value of the property, but you cannot change its value after the control has been created.

Generally, you”ll be setting this property to true when you want to get a “transparent” control (however, there are other scenarios where you need to set this property to true). When you want transparency, you need to do more than just set that property set true: for starters, you need to pay attention to the Background property of the control. Currently, you can define it in several ways. Some let you define the alpha value of color (check the help). When you use one of these approaches, the control takes that value into account and the result is a cool blend of the control”s color with the current background color of the page (ie, of the HTML control that is used as a container).  For instance, the following code makes the control totally transparent:

  source: “Page2.xaml”,
  parentElement: document.getElementById(“SilverlightControlHost”),
  id: “SilverlightControl”,
  properties: {
    width: “100%”,
    height: “100%”,
    version: “0.95”,
    background: “#00ffffff”,
    isWindowless: true,
    enableHtmlAccess: true
  events: {onLoad:handleLoad}

Since I”ve set the alpha channel to 0, I”ll get total transparency, letting you see what”s on the page. On the other hand, setting it to ff would give me an opaque background color. 

Again, if you”re looking for true “transparency”, there”s still a couple of extra details to keep in mind: pay attention to the background and opacity of your silverlight elements. For instance, if you run the previous code for creating an object and if you set the background color of your top Canvas to white without changing the default opacity you end up getting an “opaque control”.

At the end of the day, getting true transparency means you need to:

  • set the Windowless property to true during the creation of the control;
  • pay attention to the background color”s alpha value;
  • pay attention to the background color and opacity of the silverlight elements that you have in your pages.

~ by Luis Abreu on June 15, 2007.

One Response to “Silverlight: windowless property and transparent controls”

  1. Unable to make the SilverLight application transparent while seeing its content over my HTML web page.

    As you can see

    I did use your properties above

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: