|
| |
- Start with a Form in the designer, and set its
FormBorderStyle to None.
- There are two controls that come with this
component:
AlphaFormTransformer and a helper control AlphaFormMarker.
Drag an instance of the
AlphaFormTransformer control (AFT) onto the Form and dock it to
Fill. The AFT must be the same size as the Form.
- In the Form's
Load event handler
(or OnLoad override), add a call to TransformForm().
alphaFormTransformer1.TransformForm();
- Select a 32 bit alpha channel PNG as the AFT
control's background image. This image needs to have the desired Window
frame elements masked by its alpha channel and interior transparent
areas that will hold other controls. Set the form's width and height
equal to the background image.

- Select the form, and set its width and height
equal to the width and height of the image. This is an important
prerequisite. The form, AFT control, and the AFT's background image
must all have the same dimensions.
- By itself, the alpha channel is not enough
information for the AFT to calculate the main form's Region necessary to
show the controls you will be adding. But we make it easy. Drag an
AlphaFormMarker (AFM) control into each transparent region that
will show controls. These areas must be completely bounded by a
non-transparent border. Each marker simply needs to be anywhere in the
transparent region, and its center (shown by the crosshairs) must fall
on a transparent pixel. Once positioned, make them as small as desired,
or send them to the back to get them out of the way. It's important
to note that they must be added to the AFT and not to any other
container control. Be mindful of this if you decide to add them
later. Finally, they are hidden at run time.

The marker's FillBorder property specifies how far into the
non-transparent pixel border the region will be constructed. The
composited image will typically have semitransparent edges. Therefore
the region that's built from the marker position needs to expand some
number of pixels into (and *under* from the compositing point of view)
the semitransparent area, otherwise you will see through to the desktop
along these borders. You want the border value to be large enough to
cover the thickness of the semitransparent edge (typically a couple
pixels), but not too large which might cause it to extend past the other
side of the image frame.
- Now add whatever other controls you like to
the interior transparent regions of the image. The AFT is a container
control (descends from
Panel), so you will be adding the
controls to it. The image will always mask out the control area(s) at
run time, but not necessarily at design time. If you don't set a
control's background color to transparent, it may cover the masked
borders of the image while in the designer because it's on top whereas
at run time it's beneath the alpha channel image. By setting a control's
background color to transparent, you can essentially fake the runtime
behavior. And doing this can help you lay things out even if you later
change it to a non-transparent color. Not all controls support a
non-transparent background color, so in some cases your controls may
overlap the image borders in the designer.

- That's it, let's run and see what we have.

- Optionally, we can set the background image
property of the main Form and set each control's background color to
transparent. This allows us to have a custom background like you see
below. You could also achieve this by using additional controls like
panels each with their own background.

|