PopupMenu With Different Item Heights (and Custom Graphics)

A popup menu appears when the user clicks on a control with the right mouse button.

Popup Menu wih Images

Drop a TPopupMenu (name "PopupMenu1") on a form. Assign it 3 menu items: popItem1, PopItem2 and popItem3. Drop a TImageList (name "ImageList1"), populate it with 3 bitmaps.
Use ImageList1 for the PopupMenu1's Images property.

When a popup menu is shown, the image appears next to the menu item caption. By design, all items are of the same height.

Menu Items with Custom Height

If you need to have different height for some of the menu items, you must turn to owner drawing.

Let's say we want to have a larger height for the second menu item "popItem2", and draw some custom graphics for it.

When OwnerDraw for the TPopupMenu is true, each menu item will receive an OnMeasureItem and an OnDrawItem event when they need to be rendered on screen.

Here's what to do:

1. Set OwnerDraw to True for the Popup Menu.
2. To apply owner drawing for the second menu item, handle the OnMeasureItem and AdvancedDrawItem events

The OnMeasureItem event is used to set the height (and width) of the menu item. The OnAdvancedDrawItem occurs when an owner-draw menu needs to be drawn.

Here's the implementation for those two events, for the "popItem2":

//draw graphics item
procedure TMainForm.popItem2AdvancedDrawItem(
  Sender: TObject; ACanvas: TCanvas;
  ARect: TRect; State: TOwnerDrawState) ;
begin
  ACanvas.FillRect(ARect) ;

  //draw text
  ACanvas.Font.Style := [fsBold];
  ACanvas.TextRect(ARect,24 + ARect.Left, 4 + ARect.Top,'Picture in PopupMenu!') ;

  //shrink rect
  InflateRect(ARect,-5,-5) ;
  //move it "down"
  ARect.Top := ARect.Top + 20;
  //draw image
  ACanvas.StretchDraw(ARect, Image1.Picture.Graphic) ;
end;

//set the item height
procedure TMainForm.popItem2MeasureItem(
  Sender: TObject; ACanvas: TCanvas;
  var Width, Height: Integer) ;
begin
  //set to desired height
  Height := 100;
end;

Note: in the above code, a TImage (name "Image1") is used to supply the graphics to be drawn for the menu item.

If you want to use an image contained in the ImageList, you can use the next code for the OnAdvancedDrawItem event:

//draw graphics item
procedure TMainForm.popItem2AdvancedDrawItem(
  Sender: TObject; ACanvas: TCanvas;
  ARect: TRect; State: TOwnerDrawState) ;
var
  bitmap : TBitmap;
begin
  ACanvas.FillRect(ARect) ;

  //draw text
  ACanvas.Font.Style := [fsBold];
  ACanvas.TextRect(ARect,24 + ARect.Left, 4 + ARect.Top,'Picture in PopupMenu!') ;

  //draw graphics from the imagelist
  bitmap := TBitmap.Create;
  try
    ImageList1.GetBitmap(popItem2.ImageIndex,bitmap) ;
    InflateRect(ARect,-5,-5) ;
    ACanvas.StretchDraw(ARect, bitmap) ;
  finally
    bitmap.Free;
  end;
end;

In the above code, the GetBitmap of the TImageList is used to draw the graphics contained in the image list.

Delphi tips navigator:
» Save (and Load) all the Images from a Delphi TImageList to a Single File
« How to Hide / Show the Main Menu of a Delphi Application