Copyright © 2003-2010 MultiMedia Soft

How to manage alpha channel transparency

Previous pageReturn to chapter overviewNext page

Alpha channel transparency can be used to create very interesting vanishing effects: starting from version 7 of the control, a variable transparency (alpha channel based and ranging from 0 to 255) was available for texts only; starting from version 8, you can manage alpha channel transparency for all of the control's elements, including surface, pictures, texts and cells: transparency can assume separate values for each of these elements (see below) or, at runtime, all at the same time and with the same value with a single call to the SetTotalTransparentFactor method.

Note that the use of transparency will cost more CPU ticks so, if rendering speed is critical for your application, you should avoid its use.

If you need to manage each of the control's elements transparency separately, here is a summary of the needed operations:

 

Surface transparency

At design-time, you can modify the button surface transparency through the Transparent factor field inside the Surface tab of 3D Button Visual Editor:

3dcm_i0000ed

Below you can see a screenshot of a form (white background) with a picture control containing a set of three identical buttons: the left one has the transparent factor set to 0 (total opacity, anti-alias with the form background color), the center one has the property set to 1 (total opacity, anti-alias with the underlying picture) and the right one has the property set to 128 (semi-transparent):

3dcm_i0000e9

When you have buttons with a SpecialEffect applied, like the buttons above, you have the possibility to decide which zone of the button will be affected by the alpha channel transparency:

3dcm_i0000ee

and you will have results like the following:

3dcm_i0000ea 3dcm_i0000eb 3dcm_i0000ec

At runtime the transparent factor can be changed through the SurfaceTransparentFactor property while the zone affected by transparency can be changed through the SurfaceTransparentZone property.

Note that, in case the underlying picture should change, you could force a refresh of the control using the RefreshTransparentControl method.

NOTE: when using alpha channel transparency on the control's surface, the control will merge its graphical representation only with the contents of its own parent window (the control container: could be a form or a frame control).

 

Text transparency

At design-time, you can modify a text transparency through the Transparency value inside the Texts tab of 3D Button Visual Editor:

3dcm_i0000ef

Below you can see a screenshot of two buttons with a background picture and a "A" as caption text; the text of left button is completely opaque (Transparency set to 0), while the right one is semi-transparent (Transparency set to 128): as you can see the underlying picture can be seen through the "A"

3dcm_i0000f0

At runtime the text transparent factor can be changed through the TextDescriptor.TransparentFactor property.

 

Pictures transparency

At design-time, you can modify a text transparency through the Transparent factor value inside the Graphics tab of 3D Button Visual Editor:

3dcm_i0000f1

Below you can see a screenshot of two buttons with a background picture; the picture of left button is completely opaque (Transparency set to 0), while the right one is semi-transparent (Transparency set to 128): as you can see the underlying picture can be seen through the "A"

3dcm_i0000f2

At runtime the picture transparent factor can be changed through the PictureTranspFactor property.

 

Cells background's transparency

At design-time, you can modify a cell's background transparent factor through the Transparent factor value inside the Cells main tab of 3D Button Visual Editor:

3dcm_i0000f3

Below you can see a screenshot of three buttons with a background picture inserted through the control's Picture property; the button on the left is the original button with no visible cell; the button in the middle has a cell with a caption text, a cyan solid background and a 5 pixels wide blue border; the button on the right has exactly the same characteristics as the one on the middle but (as seen on the screenshot above) the Background transparent factor has been set to 158: as you can see, the original button's picture can be seen through the cell's background.

3dcm_i0000f4

At runtime the cell's background transparency can be changed through the CellsManager.BackTranspFactor property.

 

Cells text's transparency

At design-time, you can modify a cell's text transparent factor through the Transparency value inside the Text for cell X tab of 3D Button Visual Editor:

3dcm_i0000f5

Below you can see a screenshot identical to the one seen before: the only difference is the "My cell caption" text whose Transparency field has been set to 165.

3dcm_i0000f6

At runtime the text's transparent factor can be changed through the CellsManager.TextDescriptor.TransparentFactor property.

 

Cells picture's transparency

At design-time, you can modify a cell's picture transparent factor through the Transparent factor value inside the Pictures for cell X tab of 3D Button Visual Editor:

3dcm_i0000f7

Below you can see a screenshot of three buttons with a background picture inserted through the control's Picture property; the button on the left is the original button with no visible cell; the button in the middle has a cell with a caption text and a background picture; the button on the right has exactly the same characteristics as the one on the middle but (as seen on the screenshot above) the the picture's Transparent factor has been set to 128: as you can see, the original button's picture can be seen through the cell's picture.

3dcm_i0000f8

At runtime the cell's picture transparent factor can be changed through the CellsManager.PictureTranspFactor property.

 

IMPORTANT:

Through 3D Button Visual Editor you have the possibility to evaluate which level of alpha channel transparency will best fit your needs in order to have optimal results over a chosen background image.

Simply load the needed background image using the Background menu item and then select the image, from your hard disk, using the Load image sub-item. Once loaded, you will have the possibility to drag the image around the preview pane keeping the right mouse button pressed and releasing it when you reach the needed position: after releasing the right mouse button, the 3D button under editing will refresh itself with the underlying image bits.

3dcm_i0000f9

Note that this procedure will not transfer the loaded image into the container form.