SOLVED: Is possible a button with 3 states (BGRAControls)? lazarus / 39-Graphics ---------------------------------------------------------------------- SaraT · 2020-02-22 00:19 Hi lainz/friends How can I use the attached image to create a custom button with 3 states (Normal, hover, pressed)? Tell me your ideas, tricks or recommendations. Many thanks ---------------------------------------------------------------------- trev · 2020-02-22 00:34 Did you try searching the forum or the wiki? That would be a good start. For example: * https://forum.lazarus.freepascal.org/index.php/topic,15634.0.html * https://wiki.freepascal.org/BGRAControls ---------------------------------------------------------------------- winni · 2020-02-22 01:00 Hi! Take time, read this and sit back in amazement: https://wiki.freepascal.org/BGRAControls Winni Oooops - too late ---------------------------------------------------------------------- lainz · 2020-02-22 01:03 Hi, you can use TBCImageButton. But you need a 4th state with the disabled state. Check attached project. ---------------------------------------------------------------------- SaraT · 2020-02-22 13:50 Quote from: lainz on February 22, 2020, 02:03:15 amHi, you can use TBCImageButton. But you need a 4th state with the disabled state. Check attached project. Many thanks guys. Sample worked like a charm but I can't see any option to add icon/glyph :/ Gonna take a look to the BGRA wiki. Have a great day. ---------------------------------------------------------------------- lainz · 2020-02-22 16:32 Quote from: SaraT on February 22, 2020, 02:50:23 pmQuote from: lainz on February 22, 2020, 02:03:15 amHi, you can use TBCImageButton. But you need a 4th state with the disabled state. Check attached project. Many thanks guys. Sample worked like a charm but I can't see any option to add icon/glyph :/ Gonna take a look to the BGRA wiki. Have a great day. Yes, there's no glyph in that control. But, you can instead of using an image, create a style for normal TBCButton (that has glyph support), the images you provided are just a 1px border (with 1px rounded corner at top left, top right) and a gradient, so is not that complex. Check the unit bcsamples.pas For example how to do an Office 2010 button: 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 BCButtonOffice2010(AButton: TBCButton);begin  AButton.Rounding.RoundX := 3;  AButton.Rounding.RoundY := 3;  AButton.RoundingDropDown.Assign(AButton.Rounding);   with AButton.StateNormal do  begin    Background.Gradient1EndPercent := 50;    Background.Gradient2.Point1XPercent := 0;    Background.Gradient2.Point1YPercent := 0;    Background.Gradient2.Point2YPercent := 100;    Background.Gradient2.GradientType := gtLinear;    Border.Color := RGBToColor(207, 208, 210);    Border.LightWidth := 1;    Border.LightOpacity := 175;    Border.Style := bboSolid;    FontEx.Color := clBlack;    FontEx.Shadow := False;    FontEx.Style := [];  end;   AButton.StateHover.Assign(AButton.StateNormal);  AButton.StateClicked.Assign(AButton.StateNormal);   with AButton.StateNormal do  begin    Background.Gradient1.StartColor := RGBToColor(255, 255, 255);    Background.Gradient1.EndColor := RGBToColor(237, 239, 241);    Background.Gradient1EndPercent := 100;  end;   with AButton.StateHover do  begin    Background.Gradient1.StartColor := RGBToColor(254, 241, 189);    Background.Gradient1.EndColor := RGBToColor(254, 228, 134);    Background.Gradient2.StartColor := RGBToColor(254, 228, 134);    Background.Gradient2.EndColor := RGBToColor(254, 248, 196);    Border.Color := RGBToColor(244, 210, 81);  end;   with AButton.StateClicked do  begin    Background.Gradient1.StartColor := RGBToColor(255, 229, 117);    Background.Gradient1.EndColor := RGBToColor(255, 216, 107);    Background.Gradient2.StartColor := RGBToColor(255, 216, 107);    Background.Gradient2.EndColor := RGBToColor(255, 239, 129);    Border.Color := RGBToColor(194, 161, 63);    Border.LightWidth := 0;  end;end; Pass a TBCButton to style it. ---------------------------------------------------------------------- SaraT · 2020-02-22 16:57 Great! Your component is perfect. I had never used it and it seems is too big. Amazing.  Any button designer? Many, many thanks. ---------------------------------------------------------------------- lainz · 2020-02-22 17:12 Quote from: SaraT on February 22, 2020, 05:57:21 pmGreat! Your component is perfect. I had never used it and it seems is too big. Amazing.  Any button designer? Many, many thanks. Thanks. About the button designer, there is no one. One is the designer =) ---------------------------------------------------------------------- SaraT · 2020-02-22 17:32 Quote from: lainz on February 22, 2020, 06:12:50 pmQuote from: SaraT on February 22, 2020, 05:57:21 pmGreat! Your component is perfect. I had never used it and it seems is too big. Amazing.  Any button designer? Many, many thanks. Thanks. About the button designer, there is no one. One is the designer =) Lainz, can you add to your component a new control, lets say: TBCImagePanel? In this case, what I would like to have are the options ...MarginBottom, MarginTop, MarginLeft, MarginRight We can do it with this button but I want a panel as a container. So I could use an image similar to above buttons, to create my custom form style/theme/frame. Please and many thanks ---------------------------------------------------------------------- lainz · 2020-02-22 20:01 There is already TBCPaperPanel in BCListBox.pas, but is not customizable yet. Maybe you can try to see how it's made TBCPaperPanel and adapt it to your needs. Is a really very simple control, you can just copy the code to your form and it will work. The steps are: - Add a private variable FShadow: TBGRASliceScaling;  - Drop a BGRAVirtualScreen - Add OnRedraw event from the object inspector 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 BCRedraw(Sender: TObject; ABitmap: TBGRABitmap);begin  FShadow.Draw(ABitmap, 0, 0, ABitmap.Width, ABitmap.Height);end; Add this method to your form OnCreate event to load the slice scaling bitmap from resources: 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 var  res: TLazarusResourceStream;begin  res := TLazarusResourceStream.Create('SHADOW', nil);  FShadow := TBGRASliceScaling.Create(res);  FShadow.Margins := Margins(6, 9, 6, 9);  res.Free;end;     Don't forget to Free the bitmap OnDestroy 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 FShadow.Free; ---------------------------------------------------------------------- lainz · 2020-02-25 18:18 I've added a bug report to see if at some time we can implement it https://github.com/bgrabitmap/bgracontrols/issues/62 ---------------------------------------------------------------------- SaraT · 2020-02-25 19:07 Quote from: lainz on February 25, 2020, 07:18:30 pmI've added a bug report to see if at some time we can implement it https://github.com/bgrabitmap/bgracontrols/issues/62 Great news Lainz Hope to see the control soon... it would be very useful to me. Thanks. ---------------------------------------------------------------------- lainz · 2020-03-03 00:43 Quote from: SaraT on February 22, 2020, 02:50:23 pmQuote from: lainz on February 22, 2020, 02:03:15 amHi, you can use TBCImageButton. But you need a 4th state with the disabled state. Check attached project. Many thanks guys. Sample worked like a charm but I can't see any option to add icon/glyph :/ Gonna take a look to the BGRA wiki. Have a great day. Here another bug report https://github.com/bgrabitmap/bgracontrols/issues/64 But I don't have much time to implement it. Maybe it's time to get more people working on BGRAControls? Volunteers?