Tutorial: Using the BitmapLinks Editor

From RAD Studio
Jump to: navigation, search

Go Up to FireMonkey Tutorials

This tutorial explains how to edit the TBitmapLink properties of a TButton component using the BitmapLinks Editor.

Let us consider a one-button multi-device application. The button has different background colors for each of the possible link types listed in the following table:

Link type Definition


The default status.


A focused link. In our scenario, when the button takes the focus, for example, while hovering the mouse over the button.


A clicked link. In our scenario, while clicking the button.


A visited link. In our scenario, after clicking the button.

Customizing BitmapLink Properties for a Button

This section illustrates how to customize the button background. Perform the following steps:

  1. Create a new Multi-Device Application, either Delphi or C++Builder.
  2. On the Form Designer, drop a TButton component.
  3. To open the FireMonkey Style Designer, right-click the button, and on the context menu, select Edit Custom Style.
  4. In the Structure pane, select the background node.
  5. In the Object Inspector, select the NormalLink property and double-click its value to open the BitmapLinks Editor.
  6. In the BitmapLinks Editor, click BitmapLinks Editor Open.png to load the image file that you want to use to customize the button.
    In our example, we use the following image file:
    Colored Buttons.png
  7. Select NormalLink from the Links panel.
  8. Select the resolution from the Resolutions panel.

    Note: For Windows style the only available resolution is Scale 1,00x.

  9. In the bitmap, select an area to use as the button background.

    Note: The selection appears on the Previsualization panel. In our scenario, for NormalLink, we have selected the blue rectangle.

    BitmapLinks Selection.png
  10. Perform steps 7 to 9 for each of the links: HotLink, FocusedLink and PressedLink.
  11. Click Close to exit from the BitmapLinks Editor.
  12. Apply changes in the FireMonkey Style Designer, click Apply and Close.
  13. Run the application to see the results.

See Also