Transparent background for Container and UserControls

Background

By default, the containers and user controls in .NET have opaque background. There is no way to set a transparent background. This is OK in most cases, but in cases where you want your user control to show through, you are stuck. In this article we will see how we can set a transparent background for our container controls and UserControls.

The Problem

Build a UserControl with transparent background.

The Solution

1. Add the following code to your UserControl

Protected Overrides ReadOnly Property CreateParams() As System.Windows.Forms.CreateParams
    Get
        Dim cp As CreateParams = MyBase.CreateParams
        cp.ExStyle = &H20
        Return cp
    End Get
End Property
 
Protected Overrides Sub OnPaintBackground(ByVal e As System.Windows.Forms.PaintEventArgs)
    'do nothing here
End Sub
 
Public Overrides Sub Refresh()
    Parent.Invalidate(New Rectangle(Me.Location, Me.Size), True)
End Sub

2. The code above will work for most situations. But in cases, where you would change the background of the control this usercontrol is on (or overlaps), you will observe that it doesn’t refresh properly. In such cases, call the Refresh method immediately after setting the background image.

PictureBox1.Image = Image.FromFile("C:\temp\test.bmp")
MyUserControl1.Refresh()
MyUserControl2.Refresh()

That’s it. Enjoy!

How it works

We have overridden 3 default members of our custom control. I’ll explain the significance of each override:

1. CreateParams: The CreateParams class has all the information needed for the control being created. Here we are interested in the CreateParams.ExStyle which defines extended attributes of the control.
Read more about it here: http://msdn.microsoft.com/en-us/libr…ateparams.aspx

2. OnPaintBackground: Next we override the OnPaintBackground method which is essentially responsible for painting the control background whenever there is a need for it. But we don’t want to paint it with its background color or image. We override the default behavior and keep it empty so that it does nothing.

3. Refresh: The default refresh will paint the control and all its child control. We don’t want it to be called. So we override it and let the Parent (i.e. the form or container in which our control is in) paint itself. The Parent will paint the UserControl background with whatever is actually in the background.

Advertisements

3 Responses to “Transparent background for Container and UserControls”

  1. Richard Says:

    Excellent and simple scheme to create a custom control with no background paint event. Very useful and fast. There is a good difference in speed (rendering) between this scheme and a transparent background control.

    Thank you,

    … Richard

  2. Nicholas Chapin Says:

    Thank you so much! You just saved me from many hours of frustration. This post was exactly what I was looking for.

  3. Manasi Ranade Says:

    Doesn’t work for me!! I have added your code in my usercontrol file and add the user control like this in my form:
    Private Sub w_ShortcutPanelUserControl()

    If IsNothing(zucShortcut) Then

    MainControl.SuspendLayout()

    zucShortcut = New ucShortcutPanel(Me)

    Dim x, y As Double
    x = MainControl.Width – zucShortcut.Width – 50
    y = MainControl.Location.Y + 10
    Dim location As New System.Drawing.Point(x, y)
    zucShortcut.Location = location
    zucShortcut.Margin = New System.Windows.Forms.Padding(0, 0, 10, 0)
    zucShortcut.Anchor = AnchorStyles.Top + AnchorStyles.Right

    MainControl.Controls.Add(zucShortcut)
    zucShortcut.Visible = True
    zucShortcut.Refresh()
    MainControl.ResumeLayout()

    End If

    End Sub
    All buttons and images and properties are set in design of the user control, so I am not setting image property through code.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: