Creating Non-Rectangular Forms

It is amazingly easy to create forms of any size and shape within Visual C#. You can even do it with VB .NET! For the most part, this can be broken down into the following steps:

1. Create a background image for the form.
2. Set the background of image to a color for transparency.
3. Create a project in Visual Studio .NET.
4. Set a couple of properties on the form to set the transparency color and to turn off the title bar.

The following walks you through each of these steps.

CAUTION (Bug Alert):
If a non-rectangular form is displayed on a system with the color depth set to something greater than 24-bits, the transparency may not display correctly.

Creating the Background Image

To create a non-rectangular form, the first step is to create an image that will be used for your background. You can use any program to create your image as long as you can save into a standard format. In general, I use Microsoft Paint because it comes with Windows.

Open Paint and draw an image for your form. I created the image shown in Figure 1 as my non-rectangular form. Be aware, I am a developer and not a graphics artist!

Figure 1: The initial drawing of the non-rectangular form.

It is by using transparency that a non-rectangular form is created. Once you've created your form in your drawing program, you will need to set the remaining background of your image to a color that will be made transparent. In Microsoft Paint, you can select and use a color that you know will not be used elsewhere within your application for forms, buttons, controls, or anything else that will be displayed.

Rather than selecting one of the existing colors, I tend to create a custom color to use. That way, I'll know its exact value. To do this in a page, select Colors | Edit Colors... to get the Edit Colors dialog. You then can click on the Define Custom Colors >> button to expand out the dialog so that you can create a custom color. Within the expanded dialog (shown in Figure 2), I use the values of 100 for Red, 0 for Green, and 0 for Blue. This produces a maroon looking color.

Figure 2: Creating a custom color in Microsoft Paint.

Clicking OK saves this color. You then can use it to fill the background of your image. I've done this as shown in Figure 3.

Figure 3: The non-rectangular form with a custom background color.

Now that you have an image to use as your form, save it so that you can use it within Visual Studio .NET

Creating the Visual Studio .NET Project

Open Visual Studio .NET and create a new project. You can create either a C# Windows form or a Visual Basic Windows Form project. I use C# in this article, but the steps are identical for Visual Basic .NET.

Your project will start out with the standard rectangular Windows form. This, however, will be changed.

Select the form and then display the properties. Change the BackgroundImage property to the form you created. You then may need to resize the form displayed in the Design editor so that your entire background image is displayed. I've done this in Figure 4 with my form.

Figure 4: The non-rectangular form image within the Design editor of Visual Studio .NET 2005.

To drop out the custom color you created, you need to set the TransparencyKey property. To set this property, click on the down arrow next to the entry box. This will display a color dialog with tabs. Select the Custom tab to ensure that the dialog displays similarly to Figure 5.

Figure 5: The Custom tab in the TransparencyKey color selection dialog box.

Right-click on one of the empty color boxes in this dialog. This will bring up the dialog for defining a custom color similar to what you saw in Microsoft Paint. Set the colors to the same values you did in Paint (Red 100, Green 0, Blue 0). Click the Add Color button to save this color. This also sets the TransparencyKey property to the color you created.

Now that you've set the background color to be transparent, the remaining step is to get rid of a few items that will make your form look goofy. Because you are using a non-rectangular form, the Title bar will no longer look good floating above your form. Additionally, your form is not set up to be resized. As such, you should set the FormBorderStyle property to the value of None.

Because you've now turned off the title bar, you will need to make sure your form has a way to exit. For the example I created in the attached zip, I simply dropped a button onto the form and put an Application.End() command into it.

You now should be able to build and run your form as I've done in Figure 6. Of course, the colors looked okay on the screen. The dithering is a result of my capturing the image.

Figure 6: The final form on Windows.

In Conclusion...

In conclusion, creating a custom form is simple. Once you've done the above process, you can drag and drop any controls and features that you'd like onto your form. Creating the rest of a form's functionality does not change from the way you've done it before.

Granted, there are a few things you may want to do such as create non-rectangular buttons, add drag&drop functionality, resize the form, and add other title button functionality back onto the form. This can all be done, but they are tasks for other articles!

# # #