Form transparency at a glance

• Download source code - 58.3 KB

Background

I have seen in many applications that custom skins are used to make applications attractive to the user. So I decided to do the same and looked for a way to accomplish the task, and finally I am here sharing it with you. There may or may not be similar approaches available on the CodeProject. Furthermore, transparent windows and regions are only supported under the Windows 2000 Operating System.

Introduction

This project will be generating a form with shape similar to Windows Phone 7. No special coding and no additional controls are required to accomplish the task. We just need to understand the working of the Form.TransparencyKey property.

Prerequisites

The idea behind the article is to demonstrate the magic behind the Form.TransparencyKey property. A remark regarding the Form.TransparencyKey property from MSDN:

“When the TransparencyKey property is assigned a Color, the areas of the form that have the same BackColor will be displayed transparently.”

When you open the project, you will see I have set the image from the “Property Window” at design time as well as in the code. You can remove the image from the property window. I used it to see where I needed to place other controls to be visible at runtime.

This is how it works:

Any mouse action, such as the click of the mouse, that is performed on the transparent areas of the form will be transferred to the windows below the transparent area. For example, if the client region of a form is made transparent, clicking the mouse on that area would send the event notification of the click to any window that is below it. If the color assigned to the TransparencyKey property is the same as any control on the form, they also will be displayed transparently.

For example, if you have a Button control on a form that has its TransparencyKey property set to SystemColors.Control, the control will be displayed transparently unless the BackColor property of the Button control is changed to a different color.

See this image, a button has its BackColor property set to the same as the form’s BackColor property. The line behind the form is visible from the button’s body.

If the BackColor property of the button is changed to some other color, different from the Form’s BackColor, the window behind them will not be visible to us. In the below image, I have set the button’s BackColor to System.ControlDark, and you can see the window behind the button is not visible.

What happens if a button has an image or something else instead of just an empty background?

If an image is added to the button (or some items are added to say a list), only the area covered by the image (or the items) will be nontransparent, the rest will be showing the window behind them. As you can see in the image below, the area covered by the image of the button and the items in the ListBox are occupying space on the form but the rest of the area is still showing the window behind them.

Procedure

I have added an image in the resourece.resx of the project named “phone_7”. I have used the color System.Control for both BackColor property and TransparencyKey property. You can use any color but both should have the same color.

Me.BackColor = Color.FromName("Control")
Me.TransparencyKey = Color.FromName("Control")

The Code

Private Sub Form1_Load(ByVal sender As System.Object, _
            ByVal e As System.EventArgs) Handles MyBase.Load
    Me.BackgroundImage = My.Resources.phone_7
    Me.BackColor = Color.FromName("Control")
    Me.TransparencyKey = Color.FromName("Control")
End Sub

How to Move the Form

Since we have changed the FormBorderStyle property to None how can we make the form movable? We need to track the co-ordinates during MouseButtonUP (Form_MouseUp) and MouseButtonReleases (Form_MouseDown). The difference will be added to the current position to displace the form.

To make this condition working, we have taken four variables:

Dim X1, X2, Y1, Y2 As Integer

Using the Code

Here we are capturing the co-ordinates when the mouse button goes down:

Private Sub Form1_MouseDown(ByVal sender As Object, _
            ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseDown
    X1 = e.X  ' X-coordinate when mouse goes down
    Y1 = e.Y  ' Y-coordiante when mouse goes down
End Sub

In the mean while, at MouseUp event, we will be deciding to displace the form from its actual position to the final position:

Private Sub Form1_MouseUp(ByVal sender As Object, _
        ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseUp
    X2 = e.X        ' X-coordinate when mouse goes up
    Y2 = e.Y        ' Y-coordiante when mouse goes up
    ' X coordiante difference added to the original
    ' position to displace the form
    Me.Left = Me.Left + (X2 - X1)
    ' Y coordiante difference added to the original position
    ' to displace the form
    Me.Top = Me.Top + (Y2 - Y1)
End Sub

Now click on the Form (with Formborderstyle set to None) and displace it. It will become movable.

Conclusion

Using this technique you can change the shape of the form and make it movable. There may be other possible solutions to achieve this target but I feel this is a viable solution for it. I hope you find this article interesting and useful.