WynApse Home Page
Home    Blog    About    Contact       
Latest Article:


My Tags:
My Sponsors:







Lifetime Member:

Setting Silverlight Canvas Background Transparent


To set the outer canvas transparent you need to do two things:
  • Set IsWindowless to true
  • Set the Alpha of the background color code to 00 in the agHost instantiation
The actual color of the background doesn't matter as long as the alpha part of the code, the first two hex values, are 00. For instance: #00FFFFFF.

A canvas overlayed on the outer one can be set to have a transparent background by setting Background="Transparent" in it's initial statement.

For example, the following will define a small rectangular canvas that will be transparent against it's background:

   new agHost(
      "agControl1Host", // hostElementID (The HTML element inside of which
                                // the WPF/E ActiveX control is inserted.
                                // This element is usually a <div>)
                                // If you change the name of the host HTML element,
                                //change it here too.
      "agControl1", // The ID of the WPF/E ActiveX control to create.
      "220px", // The width of the control.
      "40px", // The height of the control.
      "#00000000", // The background color of the control.
      null, // SourceElement (name of script tag containing XAML)
      "Page.xaml", // The uri of the source file that
                         // contains the WPF/E content.
      false, // IsWindowless
      "30", // MaxFrameRate
      null // OnError handler.
            // You can set this to a method name (no quotes).
   );


The following is a snippet from one of my first Pages showing a hyperlink on it's own transparent canvas:

  <!-- Hyperlink to Page 2 -->
  <Canvas Width="100" Height="50" Canvas.Left="200" Canvas.Top="275"
     Background="transparent"
     MouseEnter="javascript:_linkEnter2"
     MouseLeave="javascript:_linkLeave2"
     MouseLeftButtonDown="javascript:_linkDown2">

     <TextBlock FontSize="14"
         FontFamily="Comic Sans MS"
         Text="To Page 3" Foreground="Blue" />
     <Line Stroke="Blue" StrokeThickness="1"
         X1="0" Y1="20" X2="65" Y2="20"
         x:Name="ToPage3Line" Opacity="0" />
  </Canvas>
  <!-- Hyperlink to Page 2 -->



Microsoft MVP

Member of WPF and Silverlight Insiders
Silverlight Control
Creative Commons License

Copyright © 2006-2014, WynApse