Quick Win Series - Silverlight Background Transparency With "Orcas"

  • Article

Have you already tried to create a Silverlight project with Visual Studio "Orcas" and wondered why setting the isWindowless property to true and the background property to transperent on the Javascript function that creates the Silverlight control like seen below has no real visible effect when you run your application?

function createSilverlight()
{
Sys.Silverlight.createObjectEx({
source: "Page.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "640px",
height: "480px",
version: "0.95",
isWindowless: true,
background: "transparent",
enableHtmlAccess: true
},
events: {}
});
}

Yes, me too. I ran into the problem currently and I was puzzeled however when digging a little more into the issue I found out that the root for this effect is that when "Orcas" creates the XAML file for your application the generator sets properties on the root canvas of the file like this:

<Canvas x:Name="parentCanvas"
xmlns=" https://schemas.microsoft.com/client/2007 "
xmlns:x=" https://schemas.microsoft.com/winfx/2006/xaml "
Loaded="Page_Loaded"
x:Class="SilverlightProject2.Page;assembly=ClientBin/SilverlightProject2.dll"
Width="640"
Height="480"
Background="White"
>
</Canvas>

The same thing does Expression Blend 2 May Preview by the way which is a sign of consistency in the code generators ;). So you probably already identified the conflicting property, it is the fact that the background property of the main Canvas is set to a solid white color brush which overrides the transparent setting for the Silverlight control as the Canvas fills the whole screen real estate of the control. So simply delete the property from the XAML and you will have the expected behaviour. Removing the "Height" and "Width" properties will basically have the same effect however I'm not quite sure if this will impact your Layout at some stage as this Canvas is the UI Root container.