TImageButton - Usage tutorial

Working with TImageButton

We will use the following images together with TImageButton:   
Notice that all the images use transparency.

1. Drag the TImageButton on the form from the toolbox.
2. Set its size to match the size of Done button (that is 40×23).
3. Set its “Text” property to empty string.
4. Use ImageDesignerNormal property to assign the Done button to it (you can download it from this website).

The ImageDesignerNormal property is only used for an image that will be shown during design-time. If you run the application now, the TImageButton will not show any image. The ImageDesignerNormal property is only used so that you can see the look of the TImageButton during design-time. Your form in the designer should now look like this:

To make the button appear during run-time we’ll have to set the ImageResxNormal and ImageResxPressed properties. These properties specify the image that will be shown by the TImageButton during run-time. The ImageResxNormal points to an image that is normally shown by TImageButton and ImageResxPressed points to an image which is shown when the button is pressed. The “resx” means that TImageButton loads the images from resources. For this reason we need to put the images into resources first. To do that download the Done button and Done button inverted from this website and add them to the project so that they appear in solution explorer:

To make the images part of project’s resources, right-click the selected images in solution explorer and then click properties. Set the “Build action” property to Embedded Resource:

Now the string that you have to set to ImageResxNormal has the following format: NamespaceName.FileName

To find out what the default namespace of your project is right-click the project in solution explorer and then click properties. Click Application from the menu on the left and there you’ll see the default namespace:

So if the namespace is TControlsTutorial and name of the file in solution explorer is DoneButton.png set the ImageResxNormal property to “TControlsTutorial.DoneButton.png”:

Similarly set the ImageResxPressed property to an image which you want to be shown when the TImageButton is pressed. You can now try to run the application and observer the result.

Now add two more TImageButtons to your form and use the following images for them:      

Your form should now look like this:

We are going to add a functionality which will close the form after the Done button has been clicked. Right-click the Done button in Visual Studio designer and choose properties from the context menu. One the properties pane go to Events section:

Now double-click the “Click” event so that an event handler is created. The event handler will be run each time the button is clicked. You will be taken to Visual Studio code editor. We will only use the following command for C#:

this.Close();

or this code for Visual Basic:

Me.Close()

That’s it.

This concludes the tutorial on TransparentControls. You are welcome to leave us a feedback by writing to: support@beemobile4.net. Thank you.