Title: Make a skinned form in C#, Part 1 (the controls)

A skinned form is just plain cool. It adds a bit of interest to the square windows used by every other application.

By setting a Windows Form's TransparencyKey property to a color that should not be rendered, you can make a form with a distinctive shape. That's a good start, but it has several drawbacks. In particular, it requires the form to be non-resizable. It also can cut off the form's borders and title bar, which makes it hard to resize the form or drag it into new positions.

Using TransparencyKey can also cut off the system menu (in the upper left corner). Even though the system menu is missing, it still lets the user close the application by pressing Alt-F4. That may or may not be what you want.

This example shows how to provide a more elaborate skinned form with the following properties:

• If you place the mouse over the form's left, right, or bottom border, or over one of its corners, the mouse changes to an appropriate resize cursor. You can then click and drag to resize the form.
• The form includes a close button in the upper left corner in place of the system menu. If you place the mouse over this button, the cursor changes to the Stop cursor. (The circle with a line through it.)
• You can click and drag the title bar to move the form.

The key to resizability is to fill the form with Panel and PictureBox controls that are docked appropriately so they resize when the form is resized. If you set a Panel or PictureBox control's BackgroundImage property to a picture and set its BackgroundImageLayout property to Tile, then the control repeats its background image as many times as necessary to fill its area when it resizes.

The following picture shows the arrangement of controls on the skinned form.

The following list describes the skinned form's controls.

1. panTopContainer - This Panel holds the controls that span the top of the form. It has Dock = Fill so it always resizes to take up the top of the form.
2. panBottomContainer - This Panel holds the controls that span the bottom of the form. It also has Dock = Fill.
3. picUpperLeft, picUpperRight, picLowerLeft, picLowerRight - These PictureBox controls hold the pictures that belong in the form's corners. Their SizeMode properties are set to AutoSize so they resize to fit their pictures. Their Dock properties are set to Left/Right to make them stick to the sides of the Panel controls that contain them. Their Cursor properties are set to the appropriate resize cursors. (You can set all of the example's cursors to the default arrow if you don't like the cursors I picked.)
4. panTop - This Panel control's BackgroundImage property holds the image that should be repeated across the top. Its Dock property is set to Fill so it fills any space within panTopContainer that is not take up by picUpperLeft and picUpperRight. Its Cursor property is set to the "resize all" cursor so it displays arrows pointing up, down, left, and right.
5. picClose - This PictureBox displays the form's close button image. It has SizeMode = AutoSize and Cursor set to the "stop" cursor.
6. lblTitle - This Label displays the form's title text.
7. picLeft, picRight - These PictureBox controls hold the images that should be repeated across the left and right sides of the form. Their Dock properties are set to Left/Right so they take up as much space is available vertically. Their cursors are the left/right resize cursors.
8. panMiddle - This Panel has Dock = Fill so it fills all space that isn't claimed by panTopContainer, panBottomContainer, picLeft, and picRight.
9. picBottom - This PictureBox holds the image that should be repeated across the bottom of the form. Its has Dock = Fill so it takes up any space in panBottomContainer that isn't used by picLowerLeft and picLowerRight.

To make everything line up:

• picUpperLeft, panTop, and picUpperRight should have the same height
• picLeft and picLowerLeft should have the same width
• picRight and picLowerRight should have the same width
• picLowerLeft, picBottom, and picLowerRight should have the same height

Now when you resize the form, the corner pictures remain unchanged while the top, bottom, left, and right pictures repeat as often as necessary to fill their new areas.

Those are the controls used by the application. If you create those controls, set their images, and run the program, the program will resize correctly. The example sets the form's TransparencyKey property to Cyan so parts of the images that are cyan are not drawn.

In my next post, I'll show you how to finish making the skinned form. I'll explain the code that the example uses to:

• Remove the normal window borders
• Load different skins
• Let the user move, resize, and close the form

Download the example to experiment with it and to see additional details.