Home Up Download Order Contact

Cutout Regions 

  1. Start with a Form in the designer, and set its FormBorderStyle to None.
  2. 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.
  3. In the Form's Load event handler (or OnLoad override), add a call to TransformForm().
     
    alphaFormTransformer1.TransformForm();
     
  4. 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.
  5. 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.
  6. 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.
  7. 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.

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


     
  9. 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.