June CTP and Transparent Windows

The June CTP of .Net Framework 3.0 was released on Friday. One new June CTP feature that I am very excited to introduce is a new property on Window called AllowsTransparency. AllowsTransparency enables you to create those semi-transparent windows and rounded-corner windows for which many of you have been asking.

I have written a small sample to illustrate some of the things to think about when creating semi-transparent windows. The central part of the sample is the following XAML:

<Window x:Class="WindowTransparency.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WindowTransparency" Height="300" Width="300"
    AllowsTransparency="True" WindowStyle="None"
    Background="Transparent"
    >
  <Border CornerRadius="50" Background="Blue" Opacity=".7">
    <Button Click="CloseWindow" Height="30" Width="100">Close Me
    </Button>
  </Border>
</Window>

There are a few things to notice in this XAML. First is that I set Window.AllowsTransparency to true. Of course, as the name implies, this simply means that the Window may be made transparent (under the covers, it switches to using a layered window), it does not actually set the background to transparent. To achieve a transparent window, I set Window.Background to Transparent. Now that I have a transparent window surface, I can draw whatever content inside of it that I like. In this example, I’m simply using a Border with rounded corners to show that you can create rounded-corner windows and dialogs.

You’ll also notice that I have set Window.WindowStyle to None. For now, Windows with AllowsTransparency=true are not compatible with any of the other WindowStyles, and we expect that this will be fine for most scenarios (if you are using a transparent window, you probably don’t want the standard Win32 window chrome). Drawing your own Window chrome is easy (as an example, I’ve created a close button that I’ve hooked up to Window.Close()). Making your Window user-draggable is actually just as easy to do. The following code does it:

public Window1()
{
    InitializeComponent();
    MouseLeftButtonDown += new MouseButtonEventHandler
           (Window1_MouseLeftButtonDown);
}

void Window1_MouseLeftButtonDown(object sender,
     MouseButtonEventArgs e)
{
    DragMove();
}

Super sexy rounded corner window

You can download the full sample here.

38 Responses to “June CTP and Transparent Windows”


  1. 1 Valentin Iliescu Jun 26th, 2006 at 12:51 pm

    Are the transparent windows still rendered in software mode?

  2. 2 eburke Jun 27th, 2006 at 6:29 am

    ha, you beat me to the punch. i second that question! :D

  3. 3 Aaron Jun 27th, 2006 at 12:42 pm

    Schweet! Does it work in partial trust? ;)

  4. 4 Valentin Iliescu Jun 27th, 2006 at 1:14 pm

    Aaron,

    I don’t think you can use this stuff in partial trust - you cannot create a new Window.

  5. 5 Tomi B. Jun 28th, 2006 at 1:07 pm

    I’ll third the question about software vs. hardware.

  6. 6 Andy Wilkinson Jun 30th, 2006 at 11:41 am

    Yipeeee!

    Those five pixels non-transparent in each corner of my app annoy me (see at http://channel9.msdn.com/ShowPost.aspx?PostID=204528#204528). But please don’t kill hardware rendering. I’m not sure I can justify a performance hit for twenty pixels you can hardly see!

  7. 7 lauren Jun 30th, 2006 at 3:14 pm

    Sorry about the delay in responding to your questions about HW acceleration. I actually don’t know whether or not HW acceleration for layered windows made it into the June CTP. I’m hunting around for a build of Perforator that matches the June CTP so that I can check, but I’m out of the office until Wednesday 7/5, so I likely will not have an answer until then.

  8. 8 Valentin Iliescu Jul 3rd, 2006 at 7:12 pm

    I have tried your sample using Perforator and it seems that it is hardware rendering. Good job!

  9. 9 simon Jul 4th, 2006 at 12:11 am

    I have the June CTP on XP but I have no AllowTransparency property and if I add it to the xaml is just throws an error.

    any advice?

  10. 10 lauren Jul 4th, 2006 at 5:34 pm

    Valentin,
    Thanks for checking into HW rendering!

    Simon,
    What kind of error are you seeing? Does your app compile?

  11. 11 Robert Jul 7th, 2006 at 9:53 pm

    However, as Nick Kramer pointed out a while back, HwndHost is not supported with layered windows which means that a element in the window that is navigated to a non-XAML Uri (ex: http://www.microsoft.com) is rendered fully transparent or invisible/blank. So, this AllowsTransparency=true feature is currently useless for any application that has support for loading external web content into a frame element in the XAML construction.

  12. 12 Andy Wilkinson Jul 8th, 2006 at 7:28 am

    An important note from Nick Kramer’s blog:

    “Windows Vista will support hardware accelerated layered windows, but we’re not sure about Windows XP… it’s possible we’ll need to pull support for layered window acceleration on XP”

    [http://blogs.msdn.com/nickkramer/archive/2006/07/08/659656.aspx]

  13. 13 Tjeerd Mulder Jul 8th, 2006 at 5:06 pm

    I also have the June CTP on XP and when using the AllowTransparency property I get an error.

    Is allow transparency only supported on Vista?

  14. 14 Pavel Lazureykis Jul 9th, 2006 at 10:28 am

    Use AllowsTransparency, not AllowTransparency :)
    On Windows Server 2003 it works fine :)

  15. 15 lauren Jul 9th, 2006 at 4:15 pm

    Thanks for catching that, Pavel. :) The property is indeed called AllowsTransparency, not AllowTransparency.

  16. 16 Leo Xue Jul 9th, 2006 at 6:44 pm

    Have anybody notice my question on this topic? Here it is. http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=534864&SiteID=1

  17. 17 lauren Jul 9th, 2006 at 9:58 pm

    Leo,
    Thanks for the heads up. I just responded to your forum question.

  18. 18 Damian Galletini Jul 10th, 2006 at 2:12 pm

    Hi! I have the Jun CTP and I can’t find the AllowsTransparency property :(. Here is a screenshot of my Visual Studio’s Intellisence –> http://www.subir-imagenes.com/subir-fotos/3a34d75f69.jpg

  19. 19 lauren Jul 10th, 2006 at 2:28 pm

    Damian,
    If you try typing in the property name manually (without Intellisense), does your app compile? My guess is that this is just a bug in our Intellisense, and you should still be able to use the property. If your app does not build, please let me know.

  20. 20 Damian Galletini Jul 10th, 2006 at 4:23 pm

    Yes the app compile perfectly. But… in my PC with Windows Vista (5456) the transparency effect works, in other computer with the same version of Windows Vista, the same video card, the same video drivers, the Jun Runtimes, SDK, etc, when I start the application this doesn’t appear :S
    If I disable aero and then I enabled it again, the application it works perfectly. Can you help me with that please? .
    PD: Sorry about my english, I’m from Argentina.-

  21. 21 Brian A. Aug 6th, 2006 at 1:01 am

    Rounded corners are cool but, can it take a generic shape object to define the outer shape of the window? Also, can the transparency be given a gradient or topographic contour? That would be cool! :) (forgive me if WPF can already do all of this… I’m relatively new to it)

    -Brian A.

  22. 22 Keith Patrick Aug 12th, 2006 at 3:48 am

    Is WindowStyle going to ultimately allow for the full set of possible styles? I’m trying to add a transparency slider to some windows in my app but the windows are really just supposed to be title bar & content, ala mIRC…nothing fancy.

  23. 23 lauren Aug 12th, 2006 at 9:26 am

    Keith,
    I’ll pass your feedback along to the team to consider for v2. If you could give me any more details — e.g. the analogous Win32 style that you are trying to emulate, or some screen shots of what you are trying to emulate, that would be very helpful.

  24. 24 Keith Patrick Aug 13th, 2006 at 4:17 am

    I’m really just going for the effect here: http://www.ishiboo.com/~nirva/Projects/froost/transparent.gif, with or without the title bar being transparent. For now, I think I’m going to draw my own title bar/border, although I have to acquaint myself with the new scheme for referencing system settings to duplicate as much of the current XP look as possible & then hook in some drag/drop & context menu.

  25. 25 Aaron Aug 24th, 2006 at 4:09 pm

    What about changing the AllowsTransparency property at runtime? Currently there is an exception thrown stating that exact thing is not possible. This might be an issue for skinning engines that might want to switch between two different window types…

  26. 26 Chris Lott Sep 21st, 2006 at 4:04 pm

    I have the September CTP of .net 3.0 installed on an older XP SP2 machine and a newer Vista RC1 machine. I’m using multiple windows that have AllowsTransparency=”true”. They run fine and DragMove works, except on the Vista machine transformations and storyboards run very very slow. I hope this will be fixed in later builds but for the meantime is there a temporary fix without me having to create “fake” mdi-style children inside one window as oppose to creating multiple real windows with transparency? Thanks.

  27. 27 Luiz Alberto Sep 29th, 2006 at 1:12 pm

    Can I do the button not transparent?

  28. 28 lauren Sep 29th, 2006 at 1:42 pm

    Luiz,
    You should be able to set the Button to non-transparent by setting its Opacity.

  29. 29 Balu Vasudev Nov 22nd, 2006 at 10:36 pm

    I have an xbap application which is launching a WPF window with rounded corners. If i apply some tooltips or try to open some kind of popup windows inside this window, It crashes giving a message “Cannot create top level child windows” But if i remove the AllowsTransparency property of the WPF window then it works perfectly, But then i wont be getting Rounded corners. But i want to do both? Please help me!!

    (by the way no such issues in Desktop application)

  30. 30 Nitin Mar 31st, 2007 at 10:32 am

    Hi, I am using WPF Sept CTP on XP xp2, and as suggested by you, transperancy thing works gr8, but it is not glass effect ( the vista one ) I have seen some apps (http://www.launchy.net/) which seem to give that effect in dot net 2.0 so how abt getting those same effects in WPF for XPsp2

    For vista we can do it this way : http://msdn2.microsoft.com/en-us/library/ms748975.aspx but what about XPsp2?

    I looked it up on internet and found http://blogs.msdn.com/unnir/archive/2006/03/01/541154.aspx
    however the code does not compile.. at least on my machine.. it complains about some baml file which is not found.

  1. 1 Olivier Dewit : Les nouveautés de WPF version CTP juin Pingback on Jul 10th, 2006 at 11:03 pm
  2. 2 .Net 3.0 June CTP at dansays.co.uk Pingback on Jul 16th, 2006 at 2:22 pm
  3. 3 ultram Trackback on Aug 27th, 2006 at 6:41 am
  4. 4 WPF Community Bloggers Trackback on Sep 9th, 2006 at 7:17 pm
  5. 5 Olivier Dewit Trackback on Sep 17th, 2006 at 9:15 am
  6. 6 WPF Community Bloggers Trackback on Sep 19th, 2006 at 3:25 pm
  7. 7 On .net client stuff.. Trackback on Dec 8th, 2006 at 4:26 pm
  8. 8 the rasx() context » Blog Archive » Today’s Media News Pingback on May 8th, 2007 at 9:22 am

Leave a Reply