1. Introduction

There is an opportunity to improve the user’s interface for windows in Windows by setting the transparency. In Windows versions beginning from 2000, it is implemented by setting the WS_EX_LAYERED style for the window. But here, we are faced with a problem – the style can’t be set for the child windows. The semi-transparent window looks showy, but everything that is drawn on it (including controls) will also be semi-transparent. And it considerably worsens the ergonomics of the user’s interface.

The article describes the SkinTooltip control developed by the KB_Soft Group company for its internal needs, that allows the effect of the non-transparent controls on the semi-transparent window to be reached. The approach described below also allows different animations to be implemented on the control while displaying it.

It is necessary to note that the control is not really semi-transparent but it only imitates the transparency. In this connection, some restrictions to its usage appear, that will be described below.

2. The description of the control’s work

The essence of our approach to the solution of the given problem is as follows. The control itself (and all the child controls on it) is not semi-transparent. The semi-transparency of the window is imitated. Two steps are performed for this.

On the first step, the screenshot of the parent window is made using the following function:

The function draws the control window to the “bitmap” bitmap. It is made with the help of the SendMessage Win32 function. It sends the WM_PRINT message to the window, its parameters specify the device context for output.

The controls of the parent window are also drawn at the obtained image. Then the image is displayed on the control’s surface, and as a result, the control becomes invisible on the parent window.

On the second step, the background of our semi-transparent window is set to another object of the Bitmap class. The background should present the image with the set semi-transparency (i.e., having the alpha-channel). All child controls are drawn on the image (it is needed to implement the animation). The obtained image is drawn above the background already displayed, and all the controls become visible. As a result, we have the effect of semi-transparent windows with non-transparent controls.

Animation is performed using the image obtained on the second step. To reach the effect of the control’s smoothness appearing on the background of the parent window, the alpha value for each bitmap’s pixel is multiplied according to the timer’s message, on a multiplier in the range from 0 to 1.0; as a result, the image varies from complete transparency to the value initially set in the image that is specified as a control’s background on the second step. To perform this, the .NET Framework library has a standard mechanism basing on the ColorMatrix class. Using the class, you may specify the transformations to be done with the image’s colors before it is displayed on the screen.

Some restrictions concerning the control’s usage result from the described algorithm. Since the screenshot of the state of all the controls on the parent window is made only once before displaying, the changes in their appearance may break the illusion of semi-transparency. Any changes in the child controls on the semi-transparent window after its first initialization may also lead to the control’s malfunction. The given restrictions are not critical for the task KB_Soft Group was faced with while developing the given controls, but the component's elaboration may be necessary for other cases.

3. The description of the control’s usage

The most important properties and methods of the class are described below:

AlphaAnimation – the property setting whether to use the animation using a smooth transparency change.

AnimationInterval – the property setting the time interval between two animation steps.

AnimationPosition – the property setting the position to start the control’s animation.

AnimationSteps – the property setting the number of animation steps.

ExpandAnimation - the property setting the animation type by changing the control’s sizes.

ExpandType – the property setting the animation type by changing the control’s sizes (moving, stretching, and so on).

FrontImage – the property setting the control’s background image.

Labels – the collection of non-transparent labels on the semi-transparent window.

Animate() – the function starting the control’s animation.

The simplest way to use the control is to add it to the Toolbox in the Visual Studio environment and to set all its properties. But for more deliberate usage of the control, given below is its manual creation:

Create a new Windows-application project on C#. Add a new resource – the result.png image. It will be our control’s background, and also a pattern for specifying its shape. It is necessary not to forget to specify Build Action = Embedded Resource in the resource's properties.

Add to the application a link to the KBSoft.Components.dll library, and add the corresponding using directives to the beginning of the file containing the form:

//getting the assembly for extracting the resources.
Assembly currentAssembly = Assembly.GetAssembly( this.GetType() );
//setting the pop-up animation.
skinTooltip.AlphaAnimation = true;
//setting the time interval between animation steps.
skinTooltip.AnimationInterval = 40;
//the position to display the control.
skinTooltip.AnimationPosition = new System.Drawing.Point(80, 24);
//the number of animation steps.
skinTooltip.AnimationSteps = 20;
//setting not to use animation by changing the control’s sizes.
skinTooltip.ExpandAnimation = false;
//setting the image of the control’s background.
skinTooltip.FrontImage = (Bitmap)Bitmap.FromStream(
currentAssembly.GetManifestResourceStream("TestControls.result.png") );
//setting the control’s shape.
skinTooltip.PatternBitmap = (Bitmap)Bitmap.FromStream(
currentAssembly.GetManifestResourceStream("TestControls.result.png") );
//setting the color of the image parts that
//are not included to the control’s //region
skinTooltip.TransparentColor = Color.FromArgb( 255, 255, 255 );
//creating the button and adding it to the list
//of the controls that are child for the skinTooltip control.
btn.Size = new Size(50,30);
btn.Location = new Point(150,30);
btn.Text = "Demo";
btn.FlatStyle = FlatStyle.System;
skinTooltip.Controls.Add( btn );
//the call needed for the control to function correctly.
skinTooltip.EndInit();
//necessarily set the control’s parent window.
skinTooltip.Parent = this;

The result is shown in the screenshot below:

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

I am New to C# ,& Sory For my English . I want to set my Form as Transparent . I tried this by using Opacity . It is giving Correct Result but The Controls in the Form is visibled partially . I want my Controls also visible 100% Purity.All Controls in My Form are looking very Dull . Please tell me How to set Brightness for my Controls When it is in Transparent Form.

This is an ok contol, but it is by no means a replacement or even an improvement to the WS_EX_LAYERED approach.

Why? Well because you always have your window directly behind the "semi-transparent window". This is as easy as placing any control on a form and changing the opacity property in C#. Having a top level window semi-transparent and then non-transparent controls on it is one thing, what you have is a "semi-transparent control on a non-transparent window", hardly revolutionary as it is already implemented in .NET.

Evidently there is a misunderstanding. The article does not concern the semi-transparent controls on the non-transparent window but, on the contrary, it does concern the non-transparent controls on the window that is ALREADY semi-transparent. The WS_EX_LAYERED style can’t be applied to the child windows (see MSDN). Therefore there is a problem – if the form is set the Opacity that differs from 100% then all the controls on it become semi-transparent TOO. Not to mention the fact that only forms have the opacity property and all the controls derived from the Control class do not.

I stand corrected on the issue of Controls having the opacity property, they do not.

However, this still doesnt change the fact that you do not have a "top level" semi-transparent window, but a custom drawn semi-transparent control (the notify bubble) on a top level completely opaque window (KB_Soft Demo window to use your own example). It's just not a "non-transparent controls on a semi-transparent window", it is like I said, a custom drawn semi-transparent control on an opaque window.

Your control is nice, but it doesnt achieve the effect that most people expect from reading the title of the article. Your control has the ability to change its opacitiy yet have child controls that are completely opaque. Your control is NOT a semi-transparent top level window with non-transparent controls, it is a semi-transparent control with non transparent children controls. All this is ignoring the fact that everything, even a Label in Windows, is a... "window", according to Microsoft. When I'm refering to a "window", and so are most people, I'm talking about a top level window (title bar, border, close, minimize buttons etc.). When talking in microsoft lingvo, saying "window" refers to pretty much everything on the screen (ignoring some special situations). So which lingvo are we talking in?

Thank You for Your comments.
You are right, the article doesn’t deal with the top-level window. Other things are placed the emphasis on. The task using the component, which is mentioned in the article, required to arrange non-transparent controls on a semi-transparent “background”. In particular, it was used by KB_Soft when developing the application for a payment kiosk with touchscreen.

It’s difficult for me to say what people expect when reading the title of this article. Maybe your formulation - "a semi-transparent control with non transparent children controls" - appears to be more exact being applied to the mentioned control. But the existing title is absolutely correct in respect to terminology. Since you have rightly said that window was the basic notion for MS Windows and every control was a window. Besides, the article describes the approach and principle that may be used for every window.

I looked into some time ago, and its virtually not possible under Windows XP/2000/etc. At the very least its simply not worth the effort. Save yourself the trouble and forget the idea untill Vista is mainstream. Vista will have proper opacity control.

The technique has definite restrictions but may be potentially used for glass effect (i.e. to make the client areas of windows semi-transparent saving the non-transparency of the separate controls and strings). But we suppose the technique to be ineffective in many respects to implement the glass effect. For example, one of the reasons is the background that should be constantly screened, when the window is moving, in order to maintain the semi-transparency effect. Now we plan to create the components allowing the vista glass effect to be implemented, but we have nothing concrete yet.

Thats exactly what I was talking about when I said "its simply not worth the effort". Just to have a semi-transparent frame you need to have three windows and you need to track their location at all times, to keep them synchronized. I'm asuming the bottom (the frame) window has the LAYERED property set. Now imagine having the whole form transparent and then having to create dozens of windows for each non transparent control. Its not worth it, not in terms of effort, not in terms of performance.