Making Transparent Controls with C# and .NET 3.5

• Download demo project - 32.24 KB
• Download demo project - 38.13 KB
• Download source - 19.45 KB
• Download source - 8.79 KB

Introduction

This article provides an approach to a Transparent Control that draws an ellipse with real transparent background and a brush that supports transparent colors.

Using the Code

A sample project TranspControlTest is included in the ZIP file. In addition, you will find a file that contains the source code for the TranspControl.dll. To obtain a background transparent you just need to change the Control style. You can do this by setting the Control style to opaque and changing the CreateParamExStyle property to WS_EX_TRANSPARENT. That’s all.

public TranspControl()
{
     SetStyle(ControlStyles.SupportsTransparentBackColor, true);
      SetStyle(ControlStyles.Opaque, true);
      this.BackColor = Color.Transparent;
}

protected override CreateParams CreateParams
{
    get
    {
        CreateParams cp = base.CreateParams;
        cp.ExStyle |= 0x20;
        return cp;
}
}

The included source code and the application example will show what you can do with this transparent control

The control has the following basic properties to be considered:

1. Opacity: The opacity controls the Control transparency. This affects the background and the fill color. This ranges between 1 and 100.
2. Background color: Here you select the background color. Full background transparency you will get by selecting the color to Transparent color.
3. Fill color: Here you will select the color to fill your drawing. Full transparency you will get by selecting the color to Transparent color.
4. Fore color: This wills the color to draw the contour.

This solution works fine in static applications. It is not recommended for using as an animated control because it will flick during the Form refreshing. If you intend to use it for drawing of lines, shapes, frames, or text then you made the right choice, even so in animated applications.

No-flicking Approach

For animated control applications with filled shapes and transparent background I recommend to use this second solution. See the below image. There is an example of animation using both approaches. Execute the test program and see the animation.

I made a Circle component to demonstrate how to obtain the no-flicking shape with full transparent background. Please see the included Circle.dll source file. The code is written in a clear manner and speaks for itself.

To obtain full background transparency just changes the Circle background color property to Transparent color.

Hope this can be helpful.