KB_Soft Group - Software Vendor's Development Partner [Articles]

Transparent controls 1

Introduction

There is an opportunity to improve the user’s interface for the 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 worsen 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 animation 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:

public static void GetControlScreenshot( Control control, ref Bitmap bitmap )
{
    if (control == null || control.Handle == IntPtr.Zero)
    return;

    if (control.Width < 1 || control.Height < 1) return;

    if (bitmap != null)
        bitmap.Dispose();

	// preparing the bitmap.
	bitmap = new Bitmap(control.Width, control.Height);
	Graphics destGraphics = Graphics.FromImage(bitmap);

    // setting the flag indicating that we need to print both the client's and
    // the non-client's window rectangles.
    int printFlags = (int)(	Win32API.PRF_NONCLIENT | Win32API.PRF_CLIENT);

    System.IntPtr param = new System.IntPtr(printFlags);
	System.IntPtr hdc = destGraphics.GetHdc();

    // sending the WM_PRINT message to the control window.
	Win32API.SendMessage(control.Handle, Win32API.WM_PRINT, hdc, param);
	destGraphics.ReleaseHdc(hdc);

	destGraphics.Dispose();
}

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 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 window with the non-transparent controls. Animation is performed using the image obtained on the 2 step. To reach the effect of the control’s smooth 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 the complete transparency to the value initially set in the image that is specified as a control’s background on the 2 step. To perform it, 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 were not critical for the task KB_Soft Group was faced with while developing the given controls, but the components elaboration may be necessary for other cases.

3. The description of the control’s usage

The control was inherited from the SkinControl base class. The class usage was described in the “The controls of an arbitrary shape” article. The most important properties and functions of the class are described below.

AlphaAnimation – the property setting whether to use the animation using smooth transparency changing.
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.
Labels – the collection of non-transparent labels on the semi-transparent window.

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.
Animate() – the function starting the control’s animation. The simplest way to use the control is to add it to 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 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:

using KBSoft.Components;

Now add the class a new item:

private SkinTooltip skinTooltip = new SkinTooltip();
private Button btn = new Button();

Add the following code to the constructor:

//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.

Transparent controls 2

		Download demo project - 190.7 Kb Download source files - 38.2 Kb
		Introduction There is an opportunity to improve the user’s interface for the 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 worsen 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 animation 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: public static void GetControlScreenshot( Control control, ref Bitmap bitmap ) { if (control == null \|\| control.Handle == IntPtr.Zero) return; if (control.Width < 1 \|\| control.Height < 1) return; if (bitmap != null) bitmap.Dispose(); // preparing the bitmap. bitmap = new Bitmap(control.Width, control.Height); Graphics destGraphics = Graphics.FromImage(bitmap); // setting the flag indicating that we need to print both the client's and // the non-client's window rectangles. int printFlags = (int)( Win32API.PRF_NONCLIENT \| Win32API.PRF_CLIENT); System.IntPtr param = new System.IntPtr(printFlags); System.IntPtr hdc = destGraphics.GetHdc(); // sending the WM_PRINT message to the control window. Win32API.SendMessage(control.Handle, Win32API.WM_PRINT, hdc, param); destGraphics.ReleaseHdc(hdc); destGraphics.Dispose(); }
		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 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 window with the non-transparent controls. Animation is performed using the image obtained on the 2 step. To reach the effect of the control’s smooth 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 the complete transparency to the value initially set in the image that is specified as a control’s background on the 2 step. To perform it, 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 were not critical for the task KB_Soft Group was faced with while developing the given controls, but the components elaboration may be necessary for other cases.
		3. The description of the control’s usage The control was inherited from the `SkinControl` base class. The class usage was described in the “The controls of an arbitrary shape” article. The most important properties and functions of the class are described below. `AlphaAnimation` – the property setting whether to use the animation using smooth transparency changing. `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. `Labels` – the collection of non-transparent labels on the semi-transparent window.		`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. `Animate()` – the function starting the control’s animation. The simplest way to use the control is to add it to 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 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: using KBSoft.Components; Now add the class a new item: private SkinTooltip skinTooltip = new SkinTooltip(); private Button btn = new Button(); Add the following code to the constructor: //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.

Non-transparent controls on the semi-transparent window

Introduction

2. The description of the control’s work

3. The description of the control’s usage