[SOLVED]transparent TPanel? lazarus / 8-Other ---------------------------------------------------------------------- majid.ebru · 2017-05-05 10:15 Hi . How to make transparent TPanel? or how to set alphablend to panel? ---------------------------------------------------------------------- RAW · 2017-05-05 10:35 The easiest way would probably be to not use a TPanel...  I saw someone who did that with Delphi but it was not possible to scroll something inside that panel. Good Luck ! EDIT: Another easy way would be to use a TImage inside that TPanel with a part of the background image... (not the best though). ---------------------------------------------------------------------- majid.ebru · 2017-05-05 16:49 Quote from: RAW on May 05, 2017, 12:35:42 pm Another easy way would be to use a TImage inside that TPanel with a part of the background image... (not the best though). hi i need container element and Timage is not? ---------------------------------------------------------------------- kupferstecher · 2017-05-05 19:38 Some time before I also searched for it, and didn't find any solution for Lazarus (doesn't work in the way it does for Delphi). In the meantime I stumbled across the below link, containing code for a transparent panel. No idea if/how it works though. There is a remark in the description, it roughly says: "The transparent panel is realized through capturing the picture of the parent, thus there may not be any other component under the panel, otherwise it will be hidden." http://lc51746.blog.163.com/blog/static/123509108200982802026564/ If you try it please let us know if it works. Regards ---------------------------------------------------------------------- majid.ebru · 2017-05-05 21:32 QuoteLazarus中没有透明Panel组件，就自己写了一个，经过一番折腾，总算是设计期和运行期都可以正确的透明了。 注意，透明Panel是通过抓取Parent图片的方式实现的，因此Panel下不能放置别的组件，否则会被背景图挡住。 我写了一个具有背景图片功能的Panel组件，可以结合透明Panel一起使用，效果非常不错，详情参考《Lazarus 的具有背景图片的Panel组件》 下面是组件源码 Google translate : QuoteLazarus no transparent Panel components, write their own one, after some toss, finally the design period and the operation period can be correct and transparent. Note that the transparent Panel is achieved by capturing the Parent image, so the Panel can not place other components, otherwise it will be blocked by the background. I have written a Panel component with background image functionality that can be used in conjunction with a transparent Panel. The results are very good. For details, refer to "Lazarus Panel Components with Background Pictures" The following is the component source Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i unit uTransparentPanel; {$mode objfpc}{$H+} interface uses   Classes, SysUtils, LMessages, Forms, Controls, Graphics, LCLType, types, Windows; type   { TTransparentPanel }   TTransparentPanel = class(TCustomControl)   private     fBuffer: Graphics.TBitmap;     fBufferChanged : boolean;     procedure SetColor(Value: TColor); override;   protected     function getBuffer : Graphics.TBitmap; virtual;     procedure WMWindowPosChanged(var Message: TLMWindowPosChanged); message LM_WINDOWPOSCHANGED;     procedure WMEraseBkgnd(var Message: TLMEraseBkgnd); message LM_ERASEBKGND;     procedure CreateParams(var Params: TCreateParams);     procedure Paint; override;     procedure Resize; override;     procedure redrawBackgroundBuffer(var buffer : Graphics.TBitmap); virtual;     function getBufferChanged : boolean; virtual;     procedure setBufferChanged(val : boolean); virtual;     procedure Invalidate; override;   public     constructor Create(AOwner : TComponent); override;     destructor Destroy; override;   published     property OnPaint;     property Color;     property Align;     property Height;     property Cursor;     property HelpContext;     property HelpType;     property Hint;     property Left;     property Name;   property Tag;     property Top;     property Width;     property Anchors;     property Constraints;   end; procedure Register; implementation procedure Register; begin   RegisterComponents('aess',[TTransparentPanel]); end; { TTransparentPanel } procedure TTransparentPanel.SetColor(Value: TColor); begin   inherited SetColor(Value);   RecreateWnd(Self); end; function TTransparentPanel.getBuffer: Graphics.TBitmap; begin   Result := fBuffer; end; procedure TTransparentPanel.WMWindowPosChanged(var Message: TLMWindowPosChanged); begin   setBufferChanged(true);   Invalidate;   inherited; end; procedure TTransparentPanel.WMEraseBkgnd(var Message: TLMEraseBkgnd); begin   Message.Result := 1; end; procedure TTransparentPanel.CreateParams(var Params: TCreateParams); begin   inherited CreateParams(Params);   params.exstyle := params.exstyle or WS_EX_TRANSPARENT; end; procedure TTransparentPanel.Paint; begin   if getBufferChanged then   begin     redrawBackgroundBuffer(fBuffer);   setBufferChanged(false);   end;   Canvas.Draw(0, 0, fBuffer);   if assigned(OnPaint) then     OnPaint(Self); end; procedure TTransparentPanel.Resize; begin   setBufferChanged(true);   Invalidate;   inherited Resize; end; procedure TTransparentPanel.redrawBackgroundBuffer(var buffer : Graphics.TBitmap); var   rDest : TRect;   bmp : Graphics.TBitmap; begin   bmp := Graphics.TBitmap.Create;   try     bmp.PixelFormat := pf24bit;     bmp.Width := Parent.Width;     bmp.Height := Parent.Height;     bmp.TransparentColor:= Self.Color;   bmp.Canvas.brush.Color:=TCustomForm(parent).Color;     bmp.Canvas.FillRect(types.rect(0,0,bmp.width,bmp.height));     SendMessage(parent.Handle, WM_PAINT, bmp.Canvas.handle, 0);     Application.ProcessMessages;     buffer.Width:= Self.Width;     buffer.Height := Self.Height;     rDest := types.Rect(0,0,Width, Height);     buffer.Canvas.CopyRect(rDest, bmp.Canvas, BoundsRect);   finally     freeandnil(bmp);   end;//fianlly end; function TTransparentPanel.getBufferChanged: boolean; begin   Result := fBufferChanged; end; procedure TTransparentPanel.setBufferChanged(val: boolean); begin   fBufferChanged := val; end; procedure TTransparentPanel.Invalidate; begin   if assigned(parent) and parent.HandleAllocated then   begin     InvalidateRect(parent.Handle, BoundsRect, true);     inherited Invalidate;   end   else     inherited Invalidate; end; constructor TTransparentPanel.Create(AOwner: TComponent); begin   inherited Create(AOwner);   fBuffer := Graphics.TBitmap.Create;   ControlStyle := [csAcceptsControls, csCaptureMouse, csClickEvents,   csDoubleClicks, csReplicatable];   Width := 200;   Height := 150;   ParentCtl3d := False;   Ctl3D := False;   ParentColor := False;   fBufferChanged:= false;   inherited Color := clWindow; end; destructor TTransparentPanel.Destroy; begin   fBuffer.Free;   inherited Destroy; end; end.  . . Thank you but how can i use this ?!?!? ---------------------------------------------------------------------- wp · 2017-05-05 22:12 In the attachment, there's a quick test in which the panel extends over the entire form which is painted with a gradient background; the panel also contains a button and a radiogroup. I had to fix a couple of issues (compilation error due to properties Ctrl3D and ParentCtrl3D not existing in Lazarus, remove Windows unit to make the component cross-platform, add missing override directive to CreateParams). The panel really is transparent but causes a lot of flicker when the form is resized. If you can live with this you must add the unit to a package and install the package into the ide (http://wiki.lazarus.freepascal.org/How_To_Write_Lazarus_Component). After that the panel will appear in the component palette for usage like any other component. ---------------------------------------------------------------------- jc99 · 2017-05-05 22:22 @majid.ebru What do you try to do ? Do your users have to work with Controls e.G: Buttons under the transparent panel ? -> try shaped controls Do you only need it for a cool blending effect ?-> Try TImage or BGRA The transparent panel is just a Transparent Panel, but alpha-blending might be possible (but only for the background). ---------------------------------------------------------------------- majid.ebru · 2017-05-06 08:21 thanks for answer. . in this topic i show what i need and Mr.jmpessoa solved it . i just have a beauty form and both of my program (OS : android and windows ) Like each other. . the TShape element is not container and i don't find any samlpe of BGRA aboute alpha transparent. . i just find this post. . this program sets Blur panel ---------------------------------------------------------------------- kupferstecher · 2017-05-06 17:17 Quote from: wp on May 06, 2017, 12:12:22 amThe panel really is transparent but causes a lot of flicker when the form is resized.Now I also made a try. Same here, a lot of flickering, even when entering the form with the mouse. Anyone any idea how to improve that? Regards ---------------------------------------------------------------------- majid.ebru · 2017-05-26 13:57 Quote from: majid.ebru on May 05, 2017, 11:32:11 pmQuoteLazarus中没有透明Panel组件，就自己写了一个，经过一番折腾，总算是设计期和运行期都可以正确的透明了。 注意，透明Panel是通过抓取Parent图片的方式实现的，因此Panel下不能放置别的组件，否则会被背景图挡住。 我写了一个具有背景图片功能的Panel组件，可以结合透明Panel一起使用，效果非常不错，详情参考《Lazarus 的具有背景图片的Panel组件》 下面是组件源码 Google translate : QuoteLazarus no transparent Panel components, write their own one, after some toss, finally the design period and the operation period can be correct and transparent. Note that the transparent Panel is achieved by capturing the Parent image, so the Panel can not place other components, otherwise it will be blocked by the background. I have written a Panel component with background image functionality that can be used in conjunction with a transparent Panel. The results are very good. For details, refer to "Lazarus Panel Components with Background Pictures" The following is the component source Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i unit uTransparentPanel; {$mode objfpc}{$H+} interface uses   Classes, SysUtils, LMessages, Forms, Controls, Graphics, LCLType, types, Windows; type   { TTransparentPanel }   TTransparentPanel = class(TCustomControl)   private     fBuffer: Graphics.TBitmap;     fBufferChanged : boolean;     procedure SetColor(Value: TColor); override;   protected     function getBuffer : Graphics.TBitmap; virtual;     procedure WMWindowPosChanged(var Message: TLMWindowPosChanged); message LM_WINDOWPOSCHANGED;     procedure WMEraseBkgnd(var Message: TLMEraseBkgnd); message LM_ERASEBKGND;     procedure CreateParams(var Params: TCreateParams);     procedure Paint; override;     procedure Resize; override;     procedure redrawBackgroundBuffer(var buffer : Graphics.TBitmap); virtual;     function getBufferChanged : boolean; virtual;     procedure setBufferChanged(val : boolean); virtual;     procedure Invalidate; override;   public     constructor Create(AOwner : TComponent); override;     destructor Destroy; override;   published     property OnPaint;     property Color;     property Align;     property Height;     property Cursor;     property HelpContext;     property HelpType;     property Hint;     property Left;     property Name;   property Tag;     property Top;     property Width;     property Anchors;     property Constraints;   end; procedure Register; implementation procedure Register; begin   RegisterComponents('aess',[TTransparentPanel]); end; { TTransparentPanel } procedure TTransparentPanel.SetColor(Value: TColor); begin   inherited SetColor(Value);   RecreateWnd(Self); end; function TTransparentPanel.getBuffer: Graphics.TBitmap; begin   Result := fBuffer; end; procedure TTransparentPanel.WMWindowPosChanged(var Message: TLMWindowPosChanged); begin   setBufferChanged(true);   Invalidate;   inherited; end; procedure TTransparentPanel.WMEraseBkgnd(var Message: TLMEraseBkgnd); begin   Message.Result := 1; end; procedure TTransparentPanel.CreateParams(var Params: TCreateParams); begin   inherited CreateParams(Params);   params.exstyle := params.exstyle or WS_EX_TRANSPARENT; end; procedure TTransparentPanel.Paint; begin   if getBufferChanged then   begin     redrawBackgroundBuffer(fBuffer);   setBufferChanged(false);   end;   Canvas.Draw(0, 0, fBuffer);   if assigned(OnPaint) then     OnPaint(Self); end; procedure TTransparentPanel.Resize; begin   setBufferChanged(true);   Invalidate;   inherited Resize; end; procedure TTransparentPanel.redrawBackgroundBuffer(var buffer : Graphics.TBitmap); var   rDest : TRect;   bmp : Graphics.TBitmap; begin   bmp := Graphics.TBitmap.Create;   try     bmp.PixelFormat := pf24bit;     bmp.Width := Parent.Width;     bmp.Height := Parent.Height;     bmp.TransparentColor:= Self.Color;   bmp.Canvas.brush.Color:=TCustomForm(parent).Color;     bmp.Canvas.FillRect(types.rect(0,0,bmp.width,bmp.height));     SendMessage(parent.Handle, WM_PAINT, bmp.Canvas.handle, 0);     Application.ProcessMessages;     buffer.Width:= Self.Width;     buffer.Height := Self.Height;     rDest := types.Rect(0,0,Width, Height);     buffer.Canvas.CopyRect(rDest, bmp.Canvas, BoundsRect);   finally     freeandnil(bmp);   end;//fianlly end; function TTransparentPanel.getBufferChanged: boolean; begin   Result := fBufferChanged; end; procedure TTransparentPanel.setBufferChanged(val: boolean); begin   fBufferChanged := val; end; procedure TTransparentPanel.Invalidate; begin   if assigned(parent) and parent.HandleAllocated then   begin     InvalidateRect(parent.Handle, BoundsRect, true);     inherited Invalidate;   end   else     inherited Invalidate; end; constructor TTransparentPanel.Create(AOwner: TComponent); begin   inherited Create(AOwner);   fBuffer := Graphics.TBitmap.Create;   ControlStyle := [csAcceptsControls, csCaptureMouse, csClickEvents,   csDoubleClicks, csReplicatable];   Width := 200;   Height := 150;   ParentCtl3d := False;   Ctl3D := False;   ParentColor := False;   fBufferChanged:= false;   inherited Color := clWindow; end; destructor TTransparentPanel.Destroy; begin   fBuffer.Free;   inherited Destroy; end; end.  does anyone has idea ? or help who  i can use this unit??? ---------------------------------------------------------------------- majid.ebru · 2017-05-26 14:10 in this topic talk aboute transparent. but i am beginner and i don't understand. help and guide me please ---------------------------------------------------------------------- SunyD · 2017-05-26 16:01 This is very easy, at least on Windows: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i procedure TForm1.FormCreate(Sender: TObject);begin  Panel1.ControlStyle := Panel1.ControlStyle - [csOpaque] + [csParentBackground];end; ---------------------------------------------------------------------- jc99 · 2017-05-26 17:07 But they are talking about a Transparent (fully clear) region around a control to give it the shape you want. Even more the part that ia shaped out is not existing for the LCL this way you can click through, if you have an other control (e.G: a button) behind the control/panel. Sometimes this is also a nice feature. see: https://github.com/joecare99/Public/master/idee/FPC Prj_Clock.*        https://github.com/joecare99/Public/master/idee/source frm_clock*.*       But as I understood your problem (like the picture in the other thread) You have a picture as a background. Than you have one or more panels with other components on it that look half transparent (transparent but a little darker). Since there is no native way in LCL you do it on your own.   As it only has to look half transparent all you have to do is take a panel and paint the part of the background that is covered by the panel on the background of the panel.   ... and since you have the drawing procedures in your hand you can do what ever you want with the picture (lighten it, darken it, blur it, rotate zoom ... and here BGRA comes handy        because it offers many of these image-manipulation-techniques. The code from the chinese site offers you the ability to put a screenshot of what's behind the panel on the panel. To do so it has to make the panel invisible itself, for any screenshot taken. therefore the flickering. To reduce that you can either take screenshot only when it's necessary (e.G: when there are actual changes behind the panel ), or you can make a screenshot from a copy of your form outside the visible part of the screen. ---------------------------------------------------------------------- jc99 · 2017-05-26 17:13 Quote from: Soner A. on May 26, 2017, 06:01:57 pmThis is very easy, at least on Windows: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i procedure TForm1.FormCreate(Sender: TObject);begin  Panel1.ControlStyle := Panel1.ControlStyle - [csOpaque] + [csParentBackground];end;  Your solution is only half the way, look at picture, but maybe it's enough ---------------------------------------------------------------------- avra · 2017-05-26 17:36 Not a transparent panel, but maybe you can find something you want here: https://www.getlazarus.org/forums/viewtopic.php?f=18&t=40 https://www.getlazarus.org/forums/viewtopic.php?f=18&t=48 https://www.getlazarus.org/forums/viewforum.php?f=18 http://lazplanet.blogspot.rs/2013/04/make-your-forms-transparent.html https://www.youtube.com/watch?v=oPFyQI0GF_o ---------------------------------------------------------------------- jc99 · 2017-05-26 17:49 Try that, only a proove of concept but have a try: https://github.com/joecare99/Public/blob/master/Projects/bin/x86_64- win64/prj_TestTranspPanel_easy.exe ---------------------------------------------------------------------- majid.ebru · 2017-05-26 18:19 thank you ---------------------------------------------------------------------- jc99 · 2017-05-26 18:30 Two Screenshots: With the checkbox you switch the panel on and off. ---------------------------------------------------------------------- taazz · 2017-05-26 20:22 Here is a quick and dirty implementation. Its Slow,(really slow but it shows the required steps). I wrote it to test Soner's post for transparency. https://sourceforge.net/projects/evssimplegraph/files/Release/Samples/ TranslucentPanel.rar/download EDIT: oh I just show jc99's "more interesting" solution. Really nice! thanks. ---------------------------------------------------------------------- RAW · 2017-05-26 20:56 Unfortunately this is not working with a classic theme...  Funny, I can scroll a label inside the panel and it looks good... but yeah, it's too slow... ---------------------------------------------------------------------- taazz · 2017-05-26 23:48 Quote from: RAW on May 26, 2017, 10:56:38 pmUnfortunately this is not working with a classic theme...  Oh! I'll disable the aero theming and see how it works thanks for the heads up. Quote from: RAW on May 26, 2017, 10:56:38 pmFunny, I can scroll a label inside the panel and it looks good... but yeah, it's too slow...  Yeah. There are a number of ways to make it faster inlcuding the alphablend function from the windows API. I'll take a closer look when I get a bit more time. ---------------------------------------------------------------------- jc99 · 2017-05-27 06:50 @taazz: Making the scrolling of the Label on the panel faster is no problem: What needs time is the pixel-by-pixel-calculation of the background in the onPaint-method. So: if you only do the necessary stuff at the necessary point of time. (and nowadays you have enough mem to store precalulated data) you get a BIG acceleration. 1. Calculating the darkend, or maybe somehow other transformed background of the form can be done at the very start of the program, maybe in a second task. It can be even done externaly (e.G: with Paint.net) like I did and be stored in the App. I mean the complete background of the form. 2. in the onpaint-method you "only" have to BitBlit the needed part of that precalculated background on the panel. [edit] 2a) If you put a Timage on the panel even the redrawing when something is moving on the panel (e.G: the label, mentioned above) is done by the system, and you only have to paint on the Image when you move or resize the panel. ---------------------------------------------------------------------- Pascal · 2017-07-12 11:52 Quote from: Soner A. on May 26, 2017, 06:01:57 pmThis is very easy, at least on Windows: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i procedure TForm1.FormCreate(Sender: TObject);begin  Panel1.ControlStyle := Panel1.ControlStyle - [csOpaque] + [csParentBackground];end;   Doesn't this work on other Platforms? ---------------------------------------------------------------------- wp · 2017-07-12 15:05 No, Windows only... ---------------------------------------------------------------------- Pascal · 2017-07-12 15:54 Is there a way to do it cross platform? ---------------------------------------------------------------------- wp · 2017-07-12 16:00 Nothing is impossible, but nobody did it so far (at least as far as I know). Even the current TPanel behaves differently on different platforms: Win: opaque, gtk2: transparent, qt: opaque. (Maybe I am confusing gtk2 and qt here, but I am sure that in my recent test one of them was transparent). ---------------------------------------------------------------------- majid.ebru · 2017-07-13 04:49 Quote from: Pascal on July 12, 2017, 05:54:22 pmIs there a way to do it cross platform? Hi if it is possible ,use BGRA component