Form Transparency

In addition to the properties that specify how the non-client area of a form are rendered by Windows , the Form class provides a set of properties that allow you to change the appearance of the form as a whole, including making it partially transparent or removing pieces of the form altogether.

The property that governs transparency of the entire form is called Opacity and defaults to 1.0, or 100% opaque . A value between 0.0 and 1.0 denotes a degree of opacity using the alpha-blending ^[7] support in more modern versions of Windows, where any number less than 1.0 results in a form that is partially transparent. Opacity is mostly a parlor trick, but it's kind of fun for making top-level windows less annoying than they would normally be, as shown here:

^[7] Alpha-blending is the blending of partially transparent elements together based on an alpha value denoting their level of transparency.

 Sub InitializeComponent()   ...   Me.Opacity = 0.5   Me.Text = "Opacity = 0.5"   Me.TopMost = True   ... End Sub Sub OpacityForm_Activated(sender As Object, e As EventArgs) _       Handles MyBase.Activated   timer1.Enabled = True End Sub Sub timer1_Tick(sender As Object, e As EventArgs) Handles timer1.Tick   If Me.Opacity < 1.0 Then Me.Opacity += 0.1   Me.Text = "Opacity = " & Me.Opacity.ToString() End Sub Sub OpacityForm_Deactivate(sender As Object, e As EventArgs) _       Handles MyBase.Deactivate   timer1.Enabled = False   Me.Opacity = 0.5   Me.Text = "Opacity = " & Me.Opacity.ToString() End Sub 

This example shows code from a top-level form whose Opacity property starts at 50%. When the form is activated, it starts a timer that increases the Opacity by 10% on each tick, giving a nice "fade in" effect, as shown in Figure 2.4. When the form is deactivated, it is set to 50% opaque again, making it available for viewing and clicking but hopefully not obscuring too much.

Figure 2.4. Opacity (See Plate 5)

Nonrectangular Forms

Opacity affects the transparency of the entire form. It's also possible to change the shape of the form by making parts of the form completely transparent. One way to do this is with the TransparencyKey property, which designates a color to use in marking transparent pixels. When a pixel on the form is supposed to be drawn with the transparent key color , that pixel will instead be removed from the form, in two senses: The pixel will not be drawn, and clicking on that spot on the form will actually result in a click on what's showing through from underneath.

For example, setting the TransparencyKey property to the same as the BackColor property of the form will cause a form to lose its background (as well as anything else drawn with that color), as shown in Figure 2.5.

Figure 2.5. Form Shown in Front of Notepad with TransparencyKey Set to BackColor

The novelty of the form shown in Figure 2.5 seems limited until you combine it with FormBorderStyle.None, which removes the non-client area altogether, as shown in Figure 2.6.

Figure 2.6. TransparencyKey Combined with FormBorderStyle.None

The combination of a transparent color to erase the form's background and the removal of the form border yields a nonrectangular window, which is all the rage with the kids these days. The transparency key color is used to create a region that describes the visible area of the form to Windows.

As easy as setting TransparencyKey is, you need to be careful with it. For example, you need to choose a color that you know won't appear in the parts of your form that you need to show, or else they'll be made transparent, too. Also, when using the TransparencyKey, you must calculate the region each time the form is drawn. And most importantly, TransparencyKey requires certain capabilities of the video driver that are often missing, causing it to fail completely.

So instead of using TransparencyKey, you may want to set the form's Region property directly. This approach is slightly less convenient but much more robust. Regions are covered in detail in Chapter 6: Advanced Drawing, but here's an example of using an ellipse as the form's region:

 Imports System.Drawing.Drawing2D Sub SetEllipseRegion()   'Assume: Me.FormBorderStyle = FormBorderStyle.None   Dim rect As Rectangle = Me.ClientRectangle   Dim path As GraphicsPath = New GraphicsPath()   path.AddEllipse(rect)   Me.Region = New Region(path)   path = Nothing End Sub Sub TransparentForm_Load(sender As Object, e As EventArgs) _       Handles MyBase.Load   SetEllipseRegion() End Sub Sub TransparentForm_SizeChanged(sender As Object, e As EventArgs) _       Handles MyBase.SizeChanged   SetEllipseRegion() End Sub 

Notice that our code sets the region both when the form is loaded and whenever the form is resized. However, as careful as we are to handle resizing, with the caption and the edges on the form missing, there's no way for the user to actually move or resize the form. When that's the case, you're on the hook to implement moving and resizing yourself. Here's an example of using the mouse events to move the form around when the user clicks in the client area of the form:

 Dim downPoint As Point = Point.Empty Sub TransparentForm_MouseDown(sender As Object, e As MouseEventArgs)   If e.Button <> MouseButtons.Left Then Exit Sub   downPoint = New Point(e.X, e.Y) End Sub Sub TransparentForm_MouseMove(sender As Object, e As MouseEventArgs)   If downPoint = Point.Empty Then Exit Sub   Dim mylocation As Point = New Point(_       Me.Left + e.X  downPoint.X, Me.Top + e.Y  downPoint.Y)   Me.Location = mylocation End Sub Sub TransparentForm_MouseUp(sender As Object, e As MouseEventArgs)   If e.Button <> MouseButtons.Left Then Exit Sub   downPoint = Point.Empty End Sub 

When the user clicks on the client area of the form, the MouseDown event is fired, and we handle this event by caching the point on the screen where the user clicked. When the user moves the mouse, the MouseMove event is fired , and we use that to move the form based on the difference between the current mouse location and the point where the user first clicked. Finally, when the user releases the mouse button, the MouseUp event fires, which we use to stop the move. You'd need something similar to implement resizing. The details of mouse events, as well as keyboard events, are covered in Chapter 8: Controls.