From Dan Mabbutt,
Your Guide to Visual Basic.
FREE Newsletter. Sign Up Now!

Oct 20 2007

VB.NET makes it easy to create an actual form, one that can contain buttons and other components, in just about any shape you can imagine. But there are a few 'conditions' that you have to understand. In this article, two different programs to create a form in the shape of an irregular star will be coded. The first has a plain background and the second uses a background based on your favorite photo.

The basic method is as follows:

1. Set the form properties so nothing on the form is visible
2. Clear the form by setting the background to the invisible color
3. Draw a shape on the form using GDI+ as a background for the form components

For the first program, I've decided to start with the complete code. We'll discuss some of the interesting side effects after that.

To get started, create a standard Windows Application and set FormBorderStyle to None. (I used the name StarForm for my form.) Set the TransparencyKey to an obscure color. (I used 191, 1, 191.) Add a Button component to the form. (In the program below, it's called CloseTheForm.)

Public Class StarForm
   Private Sub StarForm_Paint( _
      ByVal sender As Object, _
      ByVal e As System.Windows.Forms.PaintEventArgs) _
      Handles Me.Paint
      e.Graphics.Clear(Color.FromArgb(255, 191, 1, 191))
      e.Graphics.FillPolygon(Brushes.DarkTurquoise, _
          New PointF() { _
          New Point(122, 36), New Point(180, 102), _
          New Point(262, 126), New Point(189, 173), _
          New Point(217, 230), New Point(132, 194), _
          New Point(62, 228), New Point(62, 160), _
          New Point(13, 112), New Point(73, 97) _
          })
   End Sub
   Private Sub CloseTheForm_Click( _
      ByVal sender As System.Object, _
      ByVal e As System.EventArgs) _
      Handles CloseTheForm.Click
      Me.Close()
   End Sub End Class

When you run this program, you get a result like the one shown below. I've displayed the form on top of the program source so you can see the effect better.

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

You'll need a way to close the form because setting FormBorderStyle to None eliminates the control buttons that you might normally use. Without a Button component (or something else) to close the form, you would have to cancel the application to end it.

And just one note on coding technique. Finding just the right X and Y coordinate values for all of the Point objects in the array to create the irregular star can be frustrating. The easy way is to code a Click event for the mouse to display them in the right format. Then run the application and then copy each value from the Immediate window into the GDI code. This code will display the X and Y coordinate values for each Point.

Private Sub StarForm_MouseClick( _
   ByVal sender As Object, _
   ByVal e As System.Windows.Forms.MouseEventArgs) _
   Handles Me.MouseClick
   Debug.Print(e.X.ToString & ", " & e.Y.ToString)
End Sub

The TransparencyKey is a color value that is ignored by Windows and just "doesn't exist" on the form. This means that you can click areas that are transparent and whatever is visible underneath will register the click. Because this is implemented at the operating system level, it's only supported starting with Windows 2000.

Since you have sixteen million colors to choose from, it's not hard to pick a unique one. The way I did it was to pick purple and then adjust each color number by 1 to get 191, 1, 191. The Alpha value must be 255 (0 means full transparency and 255 means opaque).

The color number of TransparencyKey must be unique because anything with that same color number will be considered to be transparent. To show this effect, I set the transparency key to KnownColor.ButtonFace (and adjusted the button so it will show up better). The illustration below shows that the button is transparent along with the rest of the form.

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

In fact, it's possible to have a phantom "floating component" where the actual form doesn't seem to be there at all. If you want "just a button" on your desktop, this is how to create it. Simply eliminate the code that draws the GDI+ graphic. Here's our application with a floating button on my Windows Vista desktop. Notice the button is floating on top of Windows Explorer.

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

The form works now, but there are still some problems. On the next page, we solve them.