Transparent Background

10-31-2007 5:35 AM |

Hi
I want to do a silverlight control to work as a logo
I'll put some images and animation
but I want the main canvas to be transparent
I want the background of the host HTML page to be shown
Is that possible

Re: Transparent Background

10-31-2007 6:28 AM |

Yes this is possible. You need to set isWindowless property to true, set the silverlight control background to a color wit 0 alpha channel, and set the main canvas background to transparent. For details check this forum thread 

Re: Transparent Background

10-31-2007 6:42 AM |

I have tried what you said but it is displayed with a black background
this my XAML code
<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="100" Height="50" Canvas.Left="0" Canvas.Top="0"
     Background="Transparent"
    >

     <TextBlock FontSize="14"
         FontFamily="Comic Sans MS"
         Text="test" Foreground="Blue" />
   
  </Canvas>

and this is my Create object javascript code

function createSilverlight()
{
 var scene = new UntitledProject3.Page();
 Silverlight.createObjectEx({
  source: "Page.xaml",
  parentElement: document.getElementById("SilverlightControlHost"),
  id: "SilverlightControl",
  properties: {
   width: "100",
   height: "50",
   version: "1.0",
IsWindowless: "True",
background : "#00FFFFFF"
  },
  events: {
   onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
  }
 });
}

Re: Transparent Background

10-31-2007 7:14 AM |

I have tried it on my machine right now, and it is working. Can you clear your browser cache, sometimes the browser just loads the XAML file form the cache and you may be seeing an old version. 

Re: Transparent Background

11-13-2007 11:02 AM |

I tried this same code as above.. and I am having the same issue. I also read your other thread but found the issue. Any ideas?

Heres the current code I'm using:

Default.html.js

function createSilverlight()
{
 var scene = new TestGradient.Page();
 Silverlight.createObjectEx({
  source: "Page.xaml",
  parentElement: document.getElementById("SilverlightControlHost"),
  id: "SilverlightControl",
  properties: {
   width: "100%",
   height: "100%",
   version: "1.0",
   IsWindowless: "True",
   background: "#00FFFFFF"
  },
  events: {
   onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
  }
 });
}

Page.xaml

<Canvas
 xmlns="http://schemas.microsoft.com/client/2007"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Width="640" Height="480"
 x:Name="Page"
 Background="Transparent"
 >
 <Rectangle Width="107" Height="107" Fill="#FFFFFFFF" Stroke="#FF000000" Canvas.Left="281" Canvas.Top="188" RadiusX="31.5" RadiusY="31.5"/>
</Canvas>

 Default.html CSS

 <style type="text/css">
  body {
   background-color: #ff0000;
  }
  .silverlightHost {
   height: 480px;
   width: 640px;
  }
 </style>

Thanks in advance.

Re: Transparent Background

11-13-2007 11:43 AM |

I figured out what the issue was:

Since this is javascript, it's very case sensitive obviously. In the code above, the property is stated as follows:

IsWindowless: "True",

When the correct statement is:

isWindowless: "True",

The I has to be lowercase to work.

Hopefully this fixes some peoples issues.

Re: Transparent Background

11-14-2007 8:19 PM |

I also had the same issue.

 Ray Akkanson

Re: Transparent Background

12-31-2007 2:00 PM |

For me, this

isWindowLess: "True",

background : "#00FFFFFF"

Gives me a Black background

Re: Transparent Background

12-31-2007 2:07 PM |

Here is how it breaks down the Background Color in Silverlight...

Think of it as 2 Seperate Letter/Number combinations put together..

Example: #00FFFFFF

The Bold "00" Means that the Alpha is 0%, and "FF" is 100% Alpha.

The Underline "FFFFFF" is your standard HTML Hex Code.

So, if you wanted a Red Background, the code would be "#FFFF0000"

Alpha "FF" , Hex Color "FF0000".

Hope this helps.

Re: Transparent Background

12-31-2007 6:39 PM |

GearWorld,

 Is the capital L in isWindowLess right? I think it is suppose to be isWindowless without the capital L.

Thanks,

Mark.

Re: Transparent Background

01-02-2008 8:45 AM |

Good Catch Mark, that is true. The correct syntax is isWindowless as in my example above.

Re: Transparent Background

11-04-2008 10:38 AM |

Hi all,

how can i clear the canvas backgroung color dynamically..

i code is given below.in one click canvas gets a color(working fine).. but not able to clear it. 

private void ButtonClear_Click(object sender, RoutedEventArgs e)

{

 rb1.IsEnabled = true;

 rb2.IsEnabled = true;

can.Background.ClearValue(Canvas.BackgroundProperty);

}

 private void ButtonSet_Click(object sender, RoutedEventArgs e)

 {

SolidColorBrush _buttonFillStyleNotApplied = new SolidColorBrush(Color.FromArgb(255, 34, 23, 67));

 rb1.IsEnabled = false;

rb2.IsEnabled = false;

can.Background = _buttonFillStyleNotApplied;

}

thanks

Balu

Re: Transparent Background

11-06-2008 7:14 AM |

balukr54:

Hi all,

how can i clear the canvas backgroung color dynamically..

i code is given below.in one click canvas gets a color(working fine).. but not able to clear it. 

private void ButtonClear_Click(object sender, RoutedEventArgs e)

{

 rb1.IsEnabled = true;

 rb2.IsEnabled = true;

can.Background.ClearValue(Canvas.BackgroundProperty);

}

 private void ButtonSet_Click(object sender, RoutedEventArgs e)

 {

SolidColorBrush _buttonFillStyleNotApplied = new SolidColorBrush(Color.FromArgb(255, 34, 23, 67));

 rb1.IsEnabled = false;

rb2.IsEnabled = false;

can.Background = _buttonFillStyleNotApplied;

}

thanks

Balu

can.Background = new SolidColorBrush(Colors.Transparent);

Re: Transparent Background

03-24-2009 5:35 PM |

 Is there a live working example of this someplace?????????

Re: Transparent Background

03-25-2009 6:38 AM |

ClosDesign:

 Is there a live working example of this someplace?????????

Hi,

Just click on your SilverLight control on the asp.net page.  There's a ton of properties and one is Windowless.  Set it to true.
Then just make the LayoutRoot background of your page alpha channel 0.

Bingo !