How can I place a label in front of a button without overlapping it?

[Galmer]

Hello!

I only recently started using Lazarus, so I don’t know many of the nuances. I created TBitBtn and I need to place a label “on top” of it. If this is implemented directly, then the label intercepts button events and the button does not react to anything.

I have two options. Either somehow disable the label’s response to events, or somehow “throw” these events onto the button located under it.

I would be grateful for any help. Today I spent the whole day trying to understand how TVirtualStringTree works, my head is already hard to think)

P.S. The Caption property is not suitable here because it only places text on the side of the image.

[ASerge]

Replace TLabel with TStaticText. It can.

[Galmer]

Replace TLabel with TStaticText. It can.

Thanks for the advice, but it didn't help. Static text, intercepts mouse events just like a label.

[wp]

Why don't you use the Caption property of the TBitBtn? You write "The Caption property is not suitable here because it only places text on the side of the image." So, you want to have the Caption above/below the image? Use the button's Layout property for this. Further parameters for affecting the text position are Margin (distance between image and border) and Spacing (distance between text and caption). -1 means in both cases: "automatic selection of value". Or you do not want to display an image at all? Leave the Glyph property empty (or ImageIndex at -1) in this case.

[Galmer]

Hello!

I use the TBitBtn properties - ImageIndex, HotImageIndex and PressImageIndex to set my textures for these events. But at the same time, I need the inscription to be placed in the center of the button. I have attached a picture, there is a button with the inscription "AAC, 64 kbps".

The Caption and Layout properties are not suitable here, because I need to place the caption not on the side, but above the button - on top of it.

[cdbc]

Hi
Use "TSpeedButton" instead of TBitButton...
It has a 'OnPaint' event, so when /push comes to shove/, you can use that to paint your text on the button, however you please. 
ps.: The rest of the properties seem equivalent to TBitButton
Regards Benny

[wp]

TBitBtn.Layout in action in the attached project

I need to place the caption not on the side, but above the button

Above = outside? Then I don't understand why you cannot use a Label or StaticText...

Please post a drawing demonstrating what you want the button to look like.

[Galmer]

I don’t know spoken English well, so I use a translator.
Sorry if I don't express myself clearly.
Here is a project with an example of what I need to achieve.

[wp]

Now I understand (yes, this "above", "on top of it" has two meanings...)

The following code implements a handler for the OnPaint event of the associated SpeedButton:

• it queries the button state (pressed, mouse is over button, or not)
• gets the corresponding images from the imagelist and adjusts the button's font (bold and aqua when pressed, normal and white otherwise)
• stretchdraws the image over the entire button
• draws the button's caption centered over the image.

Code: Pascal  [Select][+][-]

1. uses
2.   LCLIntf, LCLType;
3.  
4. procedure TForm1.SpeedButton3Paint(Sender: TObject);
5. var
6.   P: TPoint;
7.   idx: Integer;
8.   bmp: TBitmap;
9.   R: TRect;
10.   ts: TTextStyle;
11.   mousePressed: Boolean;
12.   btn: TSpeedButton;
13. begin
14.   // Exit when event is not fired by a speedbutton
15.   if (Sender is TSpeedButton) then
16.     btn := TSpeedButton(Sender)
17.   else
18.     exit;
19.  
20.   // Detect whether the mouse currently is pressed
21.   mousePressed := (GetKeyState(VK_LBUTTON) < 0);
22.  
23.   // Detect whether the mouse currently is inside the speedbutton
24.   P := btn.ScreenToClient(Mouse.CursorPos);
25.   R := Rect(0, 0, btn.Width, btn.Height);
26.   if PtInRect(R, P) then
27.   begin
28.     if mousePressed then
29.       idx := 2      // idx identifies the image index needed from the ImageList
30.     else
31.       idx := 1
32.   end else
33.     idx := 0;
34.  
35.   // create a bitmap for the image
36.   bmp := TBitmap.Create;
37.   try
38.     // Extract the image from the imagelist for the specified index into the bitmap
39.     ImageList.GetBitmap(idx, bmp);
40.     // Stretch-draw the bitmap to fit into the bounds of the speedbutton (R)
41.     btn.Canvas.StretchDraw(R, bmp);
42.     // Get the textstyle currently active in the speedbutton's canvas...
43.     ts := btn.Canvas.TextStyle;
44.     // ... and adjust it to center text horizontally
45.     ts.Alignment := taCenter;
46.     // ... and vertically inside the given rectangle (R)
47.     ts.Layout := tlCenter;
48.     // Apply the speedbutton's Font to the canvas
49.     btn.Canvas.Font.Assign(btn.Font);
50.     // Modify the font depending on the mouse state.
51.     if mousePressed then
52.     begin
53.       btn.Canvas.Font.Style := [fsBold];
54.       btn.Canvas.Font.Color := clAqua;
55.     end else
56.     begin
57.       btn.Canvas.Font.Style := [];
58.       btn.Canvas.Font.Color := clWhite;
59.     end;
60.     // Draw the text into the rectangle R using the canvas's TextStyle.
61.     btn.Canvas.TextRect(R, 0, 0, btn.Caption, ts);
62.   finally
63.     // Destroy the temporary bitmap
64.     bmp.Free;
65.   end;
66. end;      

I don't know how familiar you are with events in Lazarus:

• copy the above code into your form's code
• in the interface section of the form's unit, add the line "procedure SpeedButton3Paint(Sender: TObject);" immediately above the "private" in TForm's declaration.
• in the object inspector select the speed button. On page "Events" of the object inspector click on dropwdown arroy next to OnPaint, and select the previously added procedure. This will assign this procedure to the OnPaint event of the button which will be executed whenever the speedbutton is repainted.
• Repeat with other speedbutton which should share the same code.

[Galmer]

Thank you very much! Your advice helped me, but I took only part of the code with text rendering, this was enough for me.

Code: Pascal  [Select][+][-]

1. procedure TForm1.ButtonSourcesPaint(Sender: TObject);
2. var
3.    R: TRect;
4.    ts: TTextStyle;
5.  
6. begin
7.    R := Rect(0, 0, ButtonSources.Width, ButtonSources.Height);
8.  
9.    // Get the textstyle currently active in the speedbutton's canvas...
10.    ts := ButtonSources.Canvas.TextStyle;
11.    // ... and adjust it to center text horizontally
12.    ts.Alignment := taCenter;
13.    // ... and vertically inside the given rectangle (R)
14.    ts.Layout := tlCenter;
15.  
16.    ButtonSources.Canvas.Font.Color := clHighlightText;
17.  
18.    ButtonSources.Canvas.TextRect(R, 0, 0, 'AAC, 64 kbps', ts);
19. end;
20.  

But when I used your code in full, when replacing the texture of the button from the code, for some reason it was drawn darker than when setting the texture through properties. It is not clear what this is connected with. I'll attach a screenshot to make it clearer.

Thanks again! It is very difficult to find any detailed resources on Lazarus, at least for me)

[What I can do]

I'm not a pro in any sort but I have done something similar. I think I made a button that was on/ off I use correldraw to make tow version of a bitmap so if you are a fair artist paint brush will do. I can't remember the exact button but any type with two version of bitmaps (active/inactive) in the settings should work. The on bitmap was bright blue with ON in the center colored red then the off was a bitmap with off in the center that was dark red while the rest was light gray. Sorry I don't have any code on hand but I think that should do it.  Hope this helps, keep on coding..

[Чебурашка]

I had similar situation, I just created a callback method and assigned to both the components.

Procedure therealclick

Button.onclick := therealclick
Label.onclick := therralclick