Creating a .NET Transparent Panel


Building the Right Environment to Support AI, Machine Learning and Deep Learning

In the overabundance of .NET controls, one can probably forgive Microsoft for not having enough Properties for certain controls. On the other hand, some Properties are quite redundant, but that is just my opinion. I have always wanted an Opacity property for most .NET controls. It is probably an impractical thought, but it would have saved me a ton of hours manipulating and improving existing .NET controls.

Yes, you are able to set the Background color of controls to Transparent, but this causes the control to be completely see-through. What if you wanted the control to only be semi-transparent, or what if you wanted to be able to set the control's opacity?

I'm sure I'm not alone on this.

To make controls semi-transparent, you would need to create a component that inherits from the desired control. This will cause the newly created component to act and look like the control in question. Then, you would have to override the existing control's properties and methods.

In your project today, you will create a new Panel component, as stated above, add a new property named Opacity to the panel, override its Paint event to compensate for the new opacity settings, and add the semi-transparent parameter to the Panel window object. You can follow along in either C# or VB.NET.


Create a new Windows Forms project in either C# or VB.NET. Name it anything descriptive. Once the project has been created, add a Component to your project by selecting Project, Add Component. Figure 1 shows a dialog that will be displayed. Provide a nice name for your component.

Add Component
Figure 1: Add Component

Add the necessary namespaces to your component.


using System.ComponentModel;


Imports System.ComponentModel

Ensure that your Panel object inherits from "Panel."


public partial class Panel_C : Panel


Partial Public Class Panel_VB
   Inherits Panel

Add the Transparent Window setting. You will use this setting once you override the Window's create parameters.


      private const int WS_EX_TRANSPARENT = 0x20;


      Private Const WS_EX_TRANSPARENT As Integer = &H20

WS_EX_TRANSPARENT specifies that a window created with this style is to be transparent. A full list of all the available Extended Windows Styles can be found here.

Add the Constructors.


      public Panel_C()


         SetStyle(ControlStyles.Opaque, true);


      public Panel_C(IContainer con)





      Public Sub New()

         SetStyle(ControlStyles.Opaque, True)

      End Sub

      Public Sub New(con As IContainer)


      End Sub

Add the Opacity Property.


      private int opacity = 50;

      public int Opacity

            return this.opacity;



            if (value < 0 || value > 100)

               throw new ArgumentException("value must be between
                  0 and 100");

               this.opacity = value;



      Private iopacity As Integer = 50

      Public Property Opacity() As Integer


            Return Me.iopacity

         End Get


            If Value < 0 OrElse Value > 100 Then

               Throw New ArgumentException("value must be between _
                  0 and 100")

            End If

            Me.iopacity = Value

         End Set

      End Property

You now will be able to choose this property from the Properties Window.

Override CreateParams.


      protected override CreateParams CreateParams


            CreateParams cpar = base.CreateParams;

            cpar.ExStyle = cpar.ExStyle | WS_EX_TRANSPARENT;

            return cpar;




      Protected Overrides ReadOnly Property CreateParams () _
            As CreateParams

            Dim cpar As CreateParams = MyBase.CreateParams

            cpar.ExStyle = cpar.ExStyle Or WS_EX_TRANSPARENT

            Return cpar

         End Get

      End Property

The CreateParams property gets all the required creation parameters when a control handle is created. Override OnPaint.


      protected override void OnPaint(PaintEventArgs e)

         using (var brush = new SolidBrush(Color.FromArgb
            (this.opacity * 255 / 100, this.BackColor)))

            e.Graphics.FillRectangle(brush, this.ClientRectangle);




      Protected Overrides Sub OnPaint(e As PaintEventArgs)

         Using brush = New SolidBrush(Color.FromArgb(Me.Opacity _
               * 255 / 100, Me.BackColor))

            e.Graphics.FillRectangle(brush, Me.ClientRectangle)

         End Using


      End Sub

Here, you have created the Panel with the appropriate Opacity setting. Build your project. After you have built your project, you should notice your component in the Toolbox, as shown in Figure 2.

Figure 2: Toolbox

Double-click the component in the toolbox and choose a BackColor. In the next image (see Figure 3), I have added a button, a standard panel, and the newly created component. I have set the Component's BackColor to 255; 128; 128, and you can clearly see the button underneath it.

Transparent Panel in action
Figure 3: Transparent Panel in action

The source code for this article is available on GitHub.


When in need, create a user component. As you can see, components are very versatile and easy to manipulate. Semi-Transparent controls can be quite useful in a user interface and it is not difficult to create them.

About the Author

Hannes DuPreez

Hannes du Preez is an ex MVP for Visual Basic from 2008 to 2017. He loves technology and loves Visual Basic and C#. He loves writing articles and proving that Visual Basic is more powerful than what most believe. You are most welcome to reach him at: ojdupreez1978[at]gmail[dot]com

Related Articles


  • Works nicely but:

    Posted by Marius Quatreulls on 03/05/2018 05:55am

    I set the borderstyle property to fixedsingle but I don't see the border!

  • Excellent post

    Posted by Maurizio Vecoli on 03/01/2018 02:26am

    Works like a charm! Thank you.

  • github project is empty

    Posted by thomas on 02/27/2018 10:19am

    Hi, Your github project is empty, Thanks for your code, Best regards Thomas


    Posted by Mohammad on 02/17/2018 01:51pm

    Just transparent at design time not at runtime

  • Issue

    Posted by Alex on 12/31/2017 10:00pm

    The panel shows as transparent in the form design but when I run the app it appears as a solid color.

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • As all sorts of data becomes available for storage, analysis and retrieval - so called 'Big Data' - there are potentially huge benefits, but equally huge challenges...
  • The agile organization needs knowledge to act on, quickly and effectively. Though many organizations are clamouring for "Big Data", not nearly as many know what to do with it...
  • Cloud-based integration solutions can be confusing. Adding to the confusion are the multiple ways IT departments can deliver such integration...

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date