(SOLVED) Styling popup/main menu lazarus / 39-Graphics ---------------------------------------------------------------------- AsleyCruz · 2020-03-06 16:16 Hi team I would like to know if any of you know how to do/draw this popup menu style (like Office 2007). Or maybe you already have any component. See attached image. Any idea or recommendation will be welcome. Thanks a lot. ---------------------------------------------------------------------- lucamar · 2020-03-06 16:51 What is it that you're trying to replicate? If it's the icons, TPopupMenu already has an Images property which can be used for that (thought whether they show might depend on the widgetset). If it's something else (what?) you may have to handle the events OnMeasureItem and/or OnDrawItem. ---------------------------------------------------------------------- AsleyCruz · 2020-03-06 17:30 Quote from: lucamar on March 06, 2020, 05:51:54 pmWhat is it that you're trying to replicate? If it's the icons, TPopupMenu already has an Images property which can be used for that (thought whether they show might depend on the widgetset). If it's something else (what?) you may have to handle the events OnMeasureItem and/or OnDrawItem. I would like the same design as the attached image. ---------------------------------------------------------------------- wp · 2020-03-06 17:35 Every menu has an OnDrawItem event which you can use to style the menu according to your needs. But note that you must paint everything, not just the background and cannot keep the icon, the caption and the gutter. ---------------------------------------------------------------------- lucamar · 2020-03-06 17:36 Then you'll have to handle those events and draw it yourself. It shouldn't be too dificult. Quote from: wp on March 06, 2020, 06:35:11 pm[...] and cannot keep the icon, the caption and the gutter. Why not? One can use OnMeasureItem to give them space and draw them in OnDrawItem. I've never done it with menus but with similar controls (e.g. TListBox) that's how it's usually done. ---------------------------------------------------------------------- wp · 2020-03-06 18:33 Here is a quick-and-dirty OnDrawItem handler. It draws the background as a horizontal gradient, and the selected item gets bold type-face. Everything here must be drawn by yourself. The routine is by far not complete. Disabled items are not drawn as such, and the icons must be drawn in a slightly different way to support "high-dpi" mode. This code works on Windows, but I do not know if all widgetset support a custom OnDrawItem handler. 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.MenuItemDrawHandler(Sender: TObject; ACanvas: TCanvas;  ARect: TRect; AState: TOwnerDrawState);var  x, y: Integer;begin  ACanvas.Font.Assign(Screen.MenuFont);   if AState * [odSelected, odFocused] <> [] then begin    ACanvas.Brush.Color := RGBToColor(216, 215, 255);    ACanvas.Pen.Color := RGBToColor(190, 190, 230);    ACanvas.Rectangle(ARect);    ACanvas.Font.Style := [fsBold];  end  else    ACanvas.GradientFill(ARect, clSkyBlue, clWhite, gdHorizontal);   x := 2;  y := (ARect.Top + ARect.Bottom - ImageList1.Height) div 2;  ImageList1.Draw(ACanvas, x, y, TMenuItem(Sender).ImageIndex, TMenuItem(Sender).Enabled);;   x := x + ImageList1.Width + 4;  ACanvas.Pen.Color := clGray;  ACanvas.Line(x, ARect.Top, x, ARect.Bottom);   x := x + 4;  y := (ARect.Top + ARect.Bottom - ACanvas.TextHeight('Tg')) div 2;  ACanvas.Brush.Style := bsClear;  ACanvas.TextOut(x, y,  TMenuItem(Sender).Caption);end; ---------------------------------------------------------------------- AsleyCruz · 2020-03-07 23:39 Quote from: wp on March 06, 2020, 07:33:26 pmHere is a quick-and-dirty OnDrawItem handler. It draws the background as a horizontal gradient, and the selected item gets bold type-face. Everything here must be drawn by yourself. The routine is by far not complete. Disabled items are not drawn as such, and the icons must be drawn in a slightly different way to support "high-dpi" mode. This code works on Windows, but I do not know if all widgetset support a custom OnDrawItem handler. Hi wp, almost done using your code, plis see attached gif. After many hours... still working on little details xD ---------------------------------------------------------------------- wp · 2020-03-07 23:43 Nice. Did you already find out how to draw larger icons on high-dpi screens? I can show you tomorrow, for now it's too late. ---------------------------------------------------------------------- AsleyCruz · 2020-03-07 23:51 Quote from: wp on March 08, 2020, 12:43:46 amNice. Did you already find out how to draw larger icons on high-dpi screens? I can show you tomorrow, for now it's too late. Perfect! I dont know too mucho about high-dpi and would like to have an idea with your samples. Although, to me, it is something tedious to use the canvas. I got crazy with x, y, z............. xD Thanks ---------------------------------------------------------------------- lainz · 2020-03-08 00:20 Looking really nice. ---------------------------------------------------------------------- wp · 2020-03-08 12:25 Here is a demo with a bit more sophisticated owner-drawing of the menu items. It uses the multi-resolution imagelist of Laz2.x and selects the correct image size when the application runs under 96, 144 and 192 ppi.It draws disabled menu items correctlyIt draws menu dividing lines correctly (they have a hyphen as caption)Not 100% sure about checked items. Now, when AutoCheck is on, a checkmark character is drawn when no image is assigned to the menu item and the item is checked; when the item is unchecked nothing is drawn even when an image is assigned. ---------------------------------------------------------------------- Fahmy Rofiq · 2020-03-08 17:36 Quote from: AsleyCruz on March 08, 2020, 12:39:33 amQuote from: wp on March 06, 2020, 07:33:26 pmHere is a quick-and-dirty OnDrawItem handler. It draws the background as a horizontal gradient, and the selected item gets bold type-face. Everything here must be drawn by yourself. The routine is by far not complete. Disabled items are not drawn as such, and the icons must be drawn in a slightly different way to support "high-dpi" mode. This code works on Windows, but I do not know if all widgetset support a custom OnDrawItem handler. Hi wp, almost done using your code, plis see attached gif. After many hours... still working on little details xD Nice, would you mind to share your code here? Thanks... ---------------------------------------------------------------------- wp · 2020-03-08 18:24 It's the zip in reply #10 ---------------------------------------------------------------------- AsleyCruz · 2020-03-09 05:12 Quote from: wp on March 08, 2020, 01:25:14 pmHere is a demo with a bit more sophisticated owner-drawing of the menu items. It uses the multi-resolution imagelist of Laz2.x and selects the correct image size when the application runs under 96, 144 and 192 ppi.It draws disabled menu items correctlyIt draws menu dividing lines correctly (they have a hyphen as caption)Not 100% sure about checked items. Now, when AutoCheck is on, a checkmark character is drawn when no image is assigned to the menu item and the item is checked; when the item is unchecked nothing is drawn even when an image is assigned.Amazing!!!!! Thanks wp. I will extract useful code from your example. A question... As we share zip code, Is it allowed to share with others our apps (.exe not the code) on this forum? Any section? Thanks again, without your first code, I would not have achieved the new popup menu design. Happy week