WPF : Opaque child windows on a transparent parent background

If you set a parent window’s Opacity, any child windows can only have an opacity equal to or below the parent window’s. So if you want to keep the main window background transparent but leave the child controls (such as a text box) fully opaque, it will not work as you expect. One solution (there are possibly others too) is to do the following.

Set the main window’s AllowTransparency to true and set the Background to Transparent.

<Window . . .
    AllowsTransparency="True" Background="Transparent"
    >

Now say you main panel is a grid, put a Border control on it as follows :

<Border Opacity="0.9" . . .>
      <Border.Background>
          . . .
      </Border.Background>
</Border> 

Set the border’s background to what you originally wanted the main window’s background to be. Now you’ll find a transparent window background where your editable controls can still retain 100% opacity.

Warning : Setting AllowTransparency to true on the main window potentially results in some very bad performance issues on both XP and Vista since WPF switches to software rendering (in my experience, even with good video cards). Once that happens, animations and video can get pretty unusably slow.

Advertisements

3 thoughts on “WPF : Opaque child windows on a transparent parent background

  1. Any clue how to set the transparency but leave the window chrome around the form? Setting the AllowTranparency gets rid of the Window border and makes it unresizable.. which, that can be handy also but I’m stuck on how to keep the border but have the Window be transparent.

    Not to complain (but I will, hehe), but this was a piece of cake in WinForms. ;P Wpf is pretty slick but I’m left a lot of times thinking “how is it that we took both a step forward and a step back at the same time?”.

  2. John – unfortunately I don’t know of a way to do that. I suppose the intended reason for AllowsTranparency is to let us make windows of any shape and that wouldn’t go well with a rectangular border / title bar I guess.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s