Hi

 

Yesterday I was trying to create a control with a partially transparent background,. I am writing this because what I thought was so straight forward, was not.

Here is a simple example:

   1: <Grid>
   2:    <Button Height="23" Margin="94,103,109,0" Name="button1" 
   3:            VerticalAlignment="Top">Button</Button>
   4:    <Border Margin="57,61,21,101" Name="border1" 
   5:            Background="blue" />
   6: </Grid>

When we run this example we will get the following:

Transparent background control

As you can see, the button is hidden. If we were to add Opacity=”0.5″ to the border we will be able to see the button:

semi transparent border

 

Looks exactly what we wanted no? NO! Lets add a rectangle to the border and see what happens. The code now looks like this:

   1: <Grid>
   2:     <Button Height="23" Margin="94,103,109,0" Name="button1" 
   3:             VerticalAlignment="Top">Button</Button>
   4:     <Border Margin="57,61,21,101" Name="border1" 
   5:             Background="blue" Opacity="0.5">
   6:         <Rectangle Width="50" Height="50" Fill="Pink"></Rectangle>
   7:     </Border>
   8: </Grid>

And this is the outcome:

see through background control

As you can see the Rectangle got Opacity=”0.5″ as well. You can try overriding it and specifying the Opacity property to be 1, but it wont help.

I then thought to my self how can I limit the opacity to the Border and the solution was to specify the opacity only on the Border Background color. All I had to do was create a StaticResource Brush and set it’s transparency. Now the code looks like this:

   1: <Window.Resources>
   2:     <SolidColorBrush Color="Blue" Opacity="0.5" 
   3:                      x:Key="TransparentBackground">
   4:     </SolidColorBrush>
   5: </Window.Resources>
   6: <Grid>
   7:     <Button Height="23" Margin="94,103,109,0" Name="button1" 
   8:             VerticalAlignment="Top">Button</Button>
   9:     <Border Margin="57,61,21,101" Name="border1" 
  10:             Background="{StaticResource TransparentBackground}" >
  11:         <Rectangle Width="50" Height="50" Fill="Pink" ></Rectangle>
  12:     </Border>
  13: </Grid>

Notice that the Border’s opacity is not set. And the outcome is exactly what we (I) wanted:

Only Background is transparent

 

Only the background is transparent. This works also for Silverlight

 

Enjoy.

 

Amit.

Tags :

8 Responses to “Creating a WPF / Silverlight Control With a Semi Transparent Background”


  1. vidalsasoon

    Said on February 26, 2009 :

    you don’t know how to use layouts properly.

  2. Amit

    Said on February 26, 2009 :

    And why would you say that?

    the tutorial you directed to is very basic and I dont see how it relates to this post…

  3. Hüseyin Tüfekçilerli

    Said on February 27, 2009 :

    The reason behind the non-working case is that opacity values of outer (0.5) and inner (1.0) elements are get multiplied when the final rendering opacity of the inner element is calculated.

    Also AFAIK setting opacity values on Colors/Brushes rather then on elements performs better.

  4. Amit

    Said on February 27, 2009 :

    @ Huseyin

    I thought so 2. To do it other wise you would have to add another control where as setting opacity on the brush changes nothing in the visual tree.

    Thanks

  5. Todd McDermid

    Said on October 6, 2010 :

    Thanks a bunch, Amit. This kind of thing must be straightforward to people who have used Silverlight for a while, but it’s not for someone who hasn’t. Thanks for posting about this.

  6. agarwick

    Said on November 8, 2010 :

    Awesome, thanks!

2 Trackback(s)

  1. Jul 23, 2009: Changing Brush Brightness in WPF/Silverlight | Dev102.com
  2. Sep 12, 2009: WPF: 90+ miejsc, które warto zna? « Dawid Po?li?ski

Post a Comment