TSpeedbutton StyleLookup - can we override predefined styles properties?

Question

EDIT: I'm using Delphi 12.1 (not able to add comment)

I saw this link:

In Delphi XE2 FireMonkey - How do i change the color of a button after pressing it

I set my code to:

SpeedButton1.StyleLookup  := 'segmentedbuttonmiddle';

var Background: TRectangle;
if SpeedButton1.FindStyleResource('background') <> nil then
begin
  Background := SpeedButton1.FindStyleResource('background') as TRectangle;
  Background.Fill.Color := TAlphaColorRec.LightBlue;
end;

Why isn't 'background' found?

How do I over-ride the colour of the speedbutton?

Answer 1

Firemonkey styles are based on bitmaps, and include different bitmaps for different states. For a TSpeedButton, the different states are:

• HotLink
• FocusedLink
• NormalLink
• PressedLink

The bitmaps are actually sections of a larger bitmap. So for a styled control, you specify the bitmap containing the images to use, and for each state you specify the section of the bitmap to use. In your case, you'd need to provide a bitmap that includes a light blue area for the PressedLink state.

Styled controls have a StyleLookup property. If this is not provided, it defaults (in this case) to a style named SpeedButtonStyle. You can choose to change the style for either all TSpeedButtons on your form, or just selected ones. To change a style at design time, right-click on the control and select either EditCustomStyle or EditDefaultStyle. If you choose the first option, Delphi creates a style named SpeedButton1Style1, and sets the StyleLookup property to that name. If you want selected other buttons to use the same style, simply set their StyleLookup properties to the same name.

You can change that name while in the style editor, but you'll also need to change it in the SourceLookup property of the button.

When you're in the style editor, expand the style to find the background sub-component, and use the object inspector to change the appropriate properties (SourceLookup for the bitmap and the properties for the different states listed above).

The Link properties specify two dashed rectangles, one inside the other. If I understand it correctly, the inner one specifies the appearance of the interior of the background (which is stretched to fill the background) and the difference between the inner and outer rectangles specifies the edges of the background (similarly stretched).

When you've finished editing the style, simply close that editor tab, which will ask if you want to apply the changes before closing it (clicking No will discard your changes).

I don't think that there's a way to make a copy of the default bitmap to modify it. I recommend that before you provide your own bitmap, you play around with modifying styles with the default bitmap to get the hang of what's required.

After closing the style editor, you will notice that there is a new (non-visual) control on the form, called StyleBook1, and the form's StyleBook property is now set to StyleBook1.

From the component palette, add another TStyleBook to the form. It will be called StyleBook2. Change the form's StyleBook property to StyleBook2 then repeat all the steps above for creating your (second) new style.

To test the concept out, I didn't create a new bitmap, but simply relocated and resized the dashed rectangles for the NormalLink state to a different part of the bitmap (e.g. a check box image, see screenshot).

I put several buttons on the form, and on one of them I put the following click event handler:

procedure TForm1.SpeedButton1Click(Sender: TObject);
begin
  if StyleBook=StyleBook1 then StyleBook:=StyleBook2
                          else StyleBook:=StyleBook1;
end;

Clicking that button caused all the buttons on the form to change their appearance.