Creating transparent irregular shaped forms in a WinForms applications using Visual Basic is not too difficult. Using a photographic background with a transparent color, a programmer can create some really attractive interfaces. Of course creating an interface sans the standard titlebar chrome requires a bit more work and programming. However, if you want to provide a memorable interface that is attractive as well as personalized – its worth the extra effort required.
Start With a New Windows Forms Application
A few form properties need to be changed before your application form is ready for your photographic background. You’ll change these properties using the IDE (its just easier than coding).
- Set AutoScaleMode to None
- Set the BackColor to something like Lime or any other color that you will notice right away (it shouldn’t show anywhere in the completed application)
- Set the FormBorderStyle to None
- Set the TransparencyKey to White or whatever color you desire to be transparent in your background image (see below)
Create Your Background Image
Your background image should be created with the background color selected in the previous section for transparency in mind. Anything created or painted on the background image using that color will be transparent. So paint the entire background of the image with that color (on its own layer if possible).
Getting the transparency color exactly right in the image can become an issue (as it did for myself in the past). One version of Lime Green isn’t always someone elses version of the same color. Added to this is the fact that there is nowhere to enter or retrieve a hex color value in the IDE at all.
What I do is use the eyedropper tool in Photoshop on a screenshot of the IDE with the TransparencyKey property showing. This way the color is always right and I know I’ll have no problems afterward. Another way of getting it right is to simply use White as the transparency key color. In this case anywhere you would need white inside the interface you would just use an off shade of white instead. Either way you should always set up the TransparencyKey in Visual Studio first.
Adding the required buttons
After adding your background image to the form you have to add at least one button to the interface – the Close button. A minimize button probably wouldn’t be a bad idea eaither. Keep in mind that if you are adding a maximize button to your interface the extra effort that will be required to support it (graphics wise).
Keep in mind that you really don’t have to use the Button control for buttons. You can use any control that emits a Click event. I find using the Label control with the Cursor changed to a pointer is often the easiest way to get the desired effect in many cases.
Coding these buttons is as simple as creating the Click handler function for the button and closing the application or setting the window state.
Making the form draggable
Coding the form to be draggable in Visual Basic is a bit easier than most think. Most of the time I create small, widget like applications when I use transparent forms. Applications like these should be easy to move around so I make the entire form draggable. If you are working on something larger the methodology is pretty much the same except for the fact that you’ll be coding it to a specific part of the form (for instance a custom titlebar – you code the extra math) instead of the entire form.
I use one form global to hold the initial MouseDown location on the form which is considered the offset (remember you’re moving the entire form). In the MouseMove event handler you change the Location property by subtracting that offset from the cursor location and setting it. In the MouseUp event handler you just set the form global to nothing this way it can be used as a check in the MouseMove event handler.
Finally
Although creating a basic transparent form application seems simple at first glance, your project can get complicated quickly. The more functionality you want, the more things can get more tedious. Creating a maximize button means you’ll have to work out horizontal and vertical tiling on the form and certain components. A custom titlebar means more math in the mouse handler functions. If your application has a lot of animations, perhaps the project should be moved to a XAML imterface instead.
Still, if you’re after a custom look and feel for your app – there’s no better start than a transparent form with a photographic background.