Recent

Author Topic: (SOLVED) Styling popup/main menu  (Read 3638 times)

AsleyCruz

  • Jr. Member
  • **
  • Posts: 98
    • Graphic and web designer
(SOLVED) Styling popup/main menu
« on: March 06, 2020, 05:16:52 pm »
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.
« Last Edit: March 15, 2020, 03:04:59 am by AsleyCruz »
Graphic & web designer

lucamar

  • Hero Member
  • *****
  • Posts: 4219
Re: Styling popup/main menu
« Reply #1 on: March 06, 2020, 05:51:54 pm »
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.
Turbo Pascal 3 CP/M - Amstrad PCW 8256 (512 KB !!!) :P
Lazarus/FPC 2.0.8/3.0.4 & 2.0.12/3.2.0 - 32/64 bits on:
(K|L|X)Ubuntu 12..18, Windows XP, 7, 10 and various DOSes.

AsleyCruz

  • Jr. Member
  • **
  • Posts: 98
    • Graphic and web designer
Re: Styling popup/main menu
« Reply #2 on: March 06, 2020, 06:30:32 pm »
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.

I would like the same design as the attached image.
Graphic & web designer

wp

  • Hero Member
  • *****
  • Posts: 11858
Re: Styling popup/main menu
« Reply #3 on: March 06, 2020, 06:35:11 pm »
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

  • Hero Member
  • *****
  • Posts: 4219
Re: Styling popup/main menu
« Reply #4 on: March 06, 2020, 06:36:17 pm »
Then you'll have to handle those events and draw it yourself. It shouldn't be too dificult.

[...] 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.
« Last Edit: March 06, 2020, 06:41:11 pm by lucamar »
Turbo Pascal 3 CP/M - Amstrad PCW 8256 (512 KB !!!) :P
Lazarus/FPC 2.0.8/3.0.4 & 2.0.12/3.2.0 - 32/64 bits on:
(K|L|X)Ubuntu 12..18, Windows XP, 7, 10 and various DOSes.

wp

  • Hero Member
  • *****
  • Posts: 11858
Re: Styling popup/main menu
« Reply #5 on: March 06, 2020, 07:33:26 pm »
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][+][-]
  1. procedure TForm1.MenuItemDrawHandler(Sender: TObject; ACanvas: TCanvas;
  2.   ARect: TRect; AState: TOwnerDrawState);
  3. var
  4.   x, y: Integer;
  5. begin
  6.   ACanvas.Font.Assign(Screen.MenuFont);
  7.  
  8.   if AState * [odSelected, odFocused] <> [] then begin
  9.     ACanvas.Brush.Color := RGBToColor(216, 215, 255);
  10.     ACanvas.Pen.Color := RGBToColor(190, 190, 230);
  11.     ACanvas.Rectangle(ARect);
  12.     ACanvas.Font.Style := [fsBold];
  13.   end
  14.   else
  15.     ACanvas.GradientFill(ARect, clSkyBlue, clWhite, gdHorizontal);
  16.  
  17.   x := 2;
  18.   y := (ARect.Top + ARect.Bottom - ImageList1.Height) div 2;
  19.   ImageList1.Draw(ACanvas, x, y, TMenuItem(Sender).ImageIndex, TMenuItem(Sender).Enabled);;
  20.  
  21.   x := x + ImageList1.Width + 4;
  22.   ACanvas.Pen.Color := clGray;
  23.   ACanvas.Line(x, ARect.Top, x, ARect.Bottom);
  24.  
  25.   x := x + 4;
  26.   y := (ARect.Top + ARect.Bottom - ACanvas.TextHeight('Tg')) div 2;
  27.   ACanvas.Brush.Style := bsClear;
  28.   ACanvas.TextOut(x, y,  TMenuItem(Sender).Caption);
  29. end;
« Last Edit: March 06, 2020, 07:34:59 pm by wp »

AsleyCruz

  • Jr. Member
  • **
  • Posts: 98
    • Graphic and web designer
Re: Styling popup/main menu
« Reply #6 on: March 08, 2020, 12:39:33 am »
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.

Hi wp, almost done using your code, plis see attached gif.
After many hours... still working on little details xD
Graphic & web designer

wp

  • Hero Member
  • *****
  • Posts: 11858
Re: Styling popup/main menu
« Reply #7 on: March 08, 2020, 12:43:46 am »
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

  • Jr. Member
  • **
  • Posts: 98
    • Graphic and web designer
Re: Styling popup/main menu
« Reply #8 on: March 08, 2020, 12:51:25 am »
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.
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
Graphic & web designer

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Styling popup/main menu
« Reply #9 on: March 08, 2020, 01:20:21 am »
Looking really nice.

wp

  • Hero Member
  • *****
  • Posts: 11858
Re: Styling popup/main menu
« Reply #10 on: March 08, 2020, 01:25:14 pm »
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 correctly
  • It 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.
« Last Edit: March 08, 2020, 01:28:22 pm by wp »

Fahmy Rofiq

  • Jr. Member
  • **
  • Posts: 83
Re: Styling popup/main menu
« Reply #11 on: March 08, 2020, 06:36:45 pm »
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.

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...
Lazarus Trunk + FPC Fixes 32bit
Windows 10 x64

wp

  • Hero Member
  • *****
  • Posts: 11858
Re: Styling popup/main menu
« Reply #12 on: March 08, 2020, 07:24:21 pm »
It's the zip in reply #10

AsleyCruz

  • Jr. Member
  • **
  • Posts: 98
    • Graphic and web designer
Re: Styling popup/main menu
« Reply #13 on: March 09, 2020, 06:12:30 am »
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 correctly
  • It 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
Graphic & web designer

 

TinyPortal © 2005-2018