Home Up Download Order Contact

Controls on Top 

  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 an image to be the background image for the main form. This image must be the same size and have the save content as the image we will choose as the AFT's background image. The only difference is it will not have regions cut out of its alpha channel - in fact it doesn't have to have an alpha channel.
  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 and its background image, AFT control, and the AFT's background image must all have the same dimensions.
  6. 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. It should have the same RGB content as the image you set for the main form's background image in step 4.

    VERY IMPORTANT: Unlike the cutout regions case, you do not want an antialiased edge along the interior, cutout region border(s) - there should be no semi-transparent pixels along these borders.

    This is so the composited pixels from the AFT image do not blend with the background image set in step 4 (which might create a visible border). If you're using an image editing program to construct your alpha channel regions, disable antialiasing (and selection feathering in Photoshop) before cutting out regions in the alpha channel.
  7. In the AFT's property window, set the CanDrag property to true to allow dragging of the form by clicking on the background of the AFT control. The remaining steps are identical to the cutout region case.
  8. 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.



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


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