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!

# # #



About the Author

Bradley Jones

Bradley Jones, in addition to managing CodeGuru, Brad! oversees the Developer.com Newtwork of sites including Codeguru, Developer.com, DevX, VBForums, and over a dozen more with a focus on software development and database technologies. His experience includes development in C, C++, VB, some Java, C#, ASP, COBOL, and more as well as having been a developer, consultant, analyst, lead, and much more. His recent books include Teach Yourself the C# Language in 21 Days, Web 2.0 Heroes, and Windows Live Essentials and Services.
Google+ Profile | Linked-In Profile | Facebook Page

Downloads

Comments

  • Excellent How to Create Non-Rectangular Forms

    Posted by epensado on 09/05/2008 10:23am

    Practical and efficient, which is rare for an article among our developers' community. I think this should be considered to be included on some book, mostly because this issue was very complex in past and now is a very easy to use tip.

    Reply
  • Need a full transparency form!

    Posted by eyej on 12/19/2005 08:37am

    Is there any chance to make a form fully transparent? I mean not just invisible, but when i click on the transparent part of the form, i want to focus goes on the program that was under my form! With this solution, when i click on the transparent part, and for example, beyond my form is another form with the button, you cannot click the button! I`m also interesting is there any chance to make a shaped button, not the rectangle button with an image of that shape! Because, in this solution, when you click in some corner of the rectangle, where the picture is transparent, and the user think that there is no button, he can still click on it! I want a shape (circle, for example), so user can click on the button only when the cursor is in the circle!

    Reply
  • Hey, It is possible with vb6 Also

    Posted by cmshafi on 08/05/2005 11:48am

    Any kind of form like round, like an image, eclipse, etc with Vb6 , just use some API functions like BitBelt.

    Reply
  • didn't work for me

    Posted by medoz on 07/21/2005 11:47pm

    I try it with a simple app, but the maroon color didn't go away. Then I downloaded your code, but it also faild to work (the maroon color was still there). Am I doing anithing wrong?

    • the same for me

      Posted by tridang on 07/27/2005 01:37am

      When my computer setting is set at 32 bits, the form transparency doesn't work (it appeared as solid color). When I set my computer at 16 bits (my computer just support 2 modes), the form is some transparent, that is not completely transparent.

      Reply
    • known bug

      Posted by Brad Jones on 07/21/2005 11:58pm

      Check your system to verify that your monitor (desktop) is not set to a color level greater than 24-bits. Many people set their system to 32-bit color -- which causes a problem. Right click on the desktop, select properties, then select the Settings tab to see what color level you have set. If it is 32-bit, then adjust it to a lower level. This is a known Microsoft bug.

      Reply
    Reply
  • is that possible in vb 6 ??

    Posted by upen_10 on 07/20/2005 03:22am

    send me the source if possible on upen_10@yahoo.com

    Reply
  • Looks good but does not deliver the good

    Posted by Bni on 07/18/2005 06:54pm

    When I run it (included executable) under Windows XP 5.1 ServicePack 2 I do not have transparency but real dark red background !!!

    • black

      Posted by Brad Jones on 07/20/2005 08:03am

      Black, however is a risky color to set to transparent since other things in a form are often also black. I'm looking into this deeper to see if I can find out why it is so flakey.

      Reply
    • Microsoft and graphics

      Posted by Laust on 07/20/2005 02:57am

      I guess Microsoft just once again proved that graphics is not their area.
      
      Neither the provided exe nor the re-compiled app is producing anything transparent (XP, FW1.1).
      However try using a .gif with transparency as background,
      for some reason that produced a black area on the dialog (where the .gif is transparent).
      Then selecting black (0,0,0) as TransparencyKey in VS2003, seams to do the trick.

      Reply
    • Version

      Posted by Brad Jones on 07/19/2005 08:33am

      What version of the .NET Framework are you running? On my XP Pro SP2 system it appears correctly (I just downloaded the EXE to verify. I'd be curious for you to compile the program and see if it then works.

      Reply
    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Download the Information Governance Survey Benchmark Report to gain insights that can help you further establish business value in your Records and Information Management (RIM) program and across your entire organization. Discover how your peers in the industry are dealing with this evolving information lifecycle management environment and uncover key insights such as: 87% of organizations surveyed have a RIM program in place 8% measure compliance 64% cannot get employees to "let go" of information for …

  • By providing complete access control with granular permissions, deployment flexibility, mapped drive support, and ability to transfer large files, Egnyte provides a more robust, secure and an affordable file sharing solution for the business than Box

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds