delphi - How to custom draw a ListView using the OnDrawItem event when the ViewStyle is vsIcon

Question

How can I custom draw a ListView to make it look like this?

Answer 1

You can draw content of TListView in custom way very eae only if you will read help resources carefully.
Image below is a result of code running. The code attached after this picture.

Component ImageList1 that is attached to TListView has both width and height set to 24 pixels

This one picture is the same TListView but without attached ImageList.

Orange rectangle is a selected item

Now go to the code.

procedure TForm1.ListView1AdvancedCustomDrawItem(Sender: TCustomListView; Item: TListItem; State: TCustomDrawState; Stage: TCustomDrawStage; var DefaultDraw: Boolean);
var
  Bmp: TBitmap;
  Image: TBitmap;
  R: TRect;
  CenterH: Integer;
  CenterV: Integer;
  ImageIndex: Integer;
begin
  R := Item.DisplayRect(drBounds);
  Bmp := TBitmap.Create;
  try
    Image := TBitmap.Create;
    try
      Bmp.SetSize(R.Width, R.Height);

      // Make fill for item
      if Item.Selected then
        Bmp.Canvas.Brush.Color := clWebOrange
      else
        Bmp.Canvas.Brush.Color := clMoneyGreen;
      Bmp.Canvas.FillRect(Bmp.Canvas.ClipRect);

      // Output image associated with current item
      if Assigned(TListView(Sender).LargeImages) then
        begin
          TListView(Sender).LargeImages.GetBitmap(Item.ImageIndex, Image);
          CenterH := (R.Width - Image.Width) div 2;
          CenterV := (R.Height - Image.Height) div 2;
          Bmp.Canvas.Draw(CenterH, CenterV, Image);
        end;

      // Draw ready item's image onto sender's canvas
      Sender.Canvas.Draw(R.Left, R.Top, Bmp);
    finally
      Image.Free;
    end;
  finally
    Bmp.Free;
  end;
end;

You must be informed that size of each item of TListView in vsIcon ViewMode depend on the size of TImageList attached to control via LargeImages property. Than large image - than large item in TListView.