Draw Transparent Fill Rect Over UI

[LBox]

I'm trying to draw a transparent rectangle over the user interface using "TBGRAVirtualScreen" but I get an opaque result like in "A",
but I need a transparent result like in "B" (see Fig. 1). 

When I add the line "Bitmap.FillTransparent;" at the beginning, I again get an opaque rectangle filled with black (see Fig. 2). 

Of course, I did a search on this topic, but the search results did not give me an answer to the question, or I did not have enough knowledge to find answers, for example, on this https://forum.lazarus.freepascal.org/index.php?topic=45210.0 topic that came up during the search

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

1. procedure TForm1.BGRAVirtualScreen1Redraw(Sender: TObject; Bitmap: TBGRABitmap);
2. begin
3.   TBGRAVirtualScreen(Sender).Left:= 0;
4.   TBGRAVirtualScreen(Sender).Top:= 0;
5.   TBGRAVirtualScreen(Sender).Width:= 80; //TBGRAVirtualScreen(Sender).Parent.Width div 4;
6.   TBGRAVirtualScreen(Sender).Height:= TBGRAVirtualScreen(Sender).Parent.Height;
7.  
8.   // Draw Transparent FillRect Over UI
9.   //Bitmap.FillTransparent;
10.   Bitmap.Canvas.Pen.Color := clGray;
11.   Bitmap.Canvas.Pen.Width := 4;
12.   Bitmap.Canvas.Brush.Style := bsClear;
13.   Bitmap.Canvas.Rectangle(0, 0, Bitmap.Width, Bitmap.Height);
14. end;

[lainz]

Hi. Virtual screen is not capable of transparency. Try bgra graphic control.

One is like a tpanel and the other is like a paintbox.

[LBox]

Well guys, to be honest, I'm shocked that drawing a translucent rectangle over the UI turned out to be such a difficult and so far impossible task for Lazarus.

"BGRAGraphicControl" supports transparency but is not able to overlap panels,
"TBGRAVirtualScreen" is able to overlap panels but cannot be transparent,
"TBSPanel" is able to overlap panels and be transparent but its transparency is lost in those areas where it overlaps the panel. 

In short, I just can't believe my eyes that such a powerful software development tool as Lazarus cannot solve such a trivial task as a transparent rectangle over the UI.

I refuse to believe it. 
Most likely, the problem is that I simply do not have enough knowledge to achieve this, and I can't find a working example on the Internet. 

By the way, I am using version 3.4, maybe in version 4.x something has changed for the better in this regard? 

[lainz]

Basically a panel is a window object with his own canvas and with keyboard support. For that is opaque.

A graphic control has no canvas and draws in the parent canvas. It doesn't have keyboard support.

[LBox]

In general, I found one non-trivial solution for this trivial task 
Considering that I need this transparent rectangle as a temporary marker to indicate the docking area of ​​the panel over which the mouse will be located,
we can simply create another transparent form without a frame and dynamically place it above the panel under the mouse. 
I have not tried it in practice yet, but the rough test says that this is quite possible. 

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

1. TranspForm.Left:= ; // Depends Under Mouse Panel Local Left Value To Screen And The Docking Zone
2. TranspForm.Top:= ; // Depends Under Mouse Panel Local Top Value To Screen And The Docking Zone
3. TranspForm.Height:= ; // Depends Under Mouse Panel Height And The Docking Zone
4. TranspForm.Width:= ; // Depends Under Mouse Panel Width And The Docking Zone
5. TranspForm.AlphaBlendValue:= 160;
6. TranspForm.BorderStyle:= bsNone;  

[lainz]

Great idea.

You need to use client to screen to convert from local pixels to screen pixels.

[LBox]

Great idea.

You need to use client to screen to convert from local pixels to screen pixels.

Thanks for the tip  🙏