Transparent Background RSS

• 

  ahlawy1983

  Member

  20 Points

  6 Posts

  • Reply
  •  

  Transparent Background

  Oct 31, 2007 09:35 AM | LINK

  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
  

• 

  y_makram

  Contributor

  6952 Points

  1353 Posts

  • Reply
  •  

  Re: Transparent Background

  Oct 31, 2007 10:28 AM | LINK

  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 

  Thanks
  Yasser Makram
  Independent Consultant
  http://www.silverlightrecipes.com
  _____
  Dont forget to click "Mark as Answer" on the post that helped you.
• 

  ahlawy1983

  Member

  20 Points

  6 Posts

  • Reply
  •  

  Re: Transparent Background

  Oct 31, 2007 10:42 AM | LINK

  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)
    }
   });
  }

• 

  y_makram

  Contributor

  6952 Points

  1353 Posts

  • Reply
  •  

  Re: Transparent Background

  Oct 31, 2007 11:14 AM | LINK

  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. 

  Thanks
  Yasser Makram
  Independent Consultant
  http://www.silverlightrecipes.com
  _____
  Dont forget to click "Mark as Answer" on the post that helped you.
• 

  evilcoathanger

  Member

  10 Points

  5 Posts

  • Reply
  •  

  Re: Transparent Background

  Nov 13, 2007 03:02 PM | LINK

  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.

• 

  evilcoathanger

  Member

  10 Points

  5 Posts

  • Reply
  •  

  Re: Transparent Background

  Nov 13, 2007 03:43 PM | LINK

  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.
  

• 

  rakkanson

  Member

  8 Points

  4 Posts

  • Reply
  •  

  Re: Transparent Background

  Nov 15, 2007 12:19 AM | LINK

  I also had the same issue.

   Ray Akkanson

  akkanson

• 

  GearWorld

  Participant

  1788 Points

  2080 Posts

  • Reply
  •  

  Re: Transparent Background

  Dec 31, 2007 06:00 PM | LINK

  For me, this

  isWindowLess: "True",

  background : "#00FFFFFF"

   

  Gives me a Black background

   

• 

  evilcoathanger

  Member

  10 Points

  5 Posts

  • Reply
  •  

  Re: Transparent Background

  Dec 31, 2007 06:07 PM | LINK

  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.

• 

  MarkRiemann

  Member

  97 Points

  69 Posts

  • Reply
  •  

  Re: Transparent Background

  Dec 31, 2007 10:39 PM | LINK

  GearWorld,

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

  Thanks,

  Mark.