Create a customized Item Appearance for ListView D

Question

Im having a lot of trouble trying to create a customized item appearance for the TListView firemonkey control for Delphi XE7. What I want is to define my own "design" for what an item should be and use that item. For example :

I would like to have an item with a Title(on top) - A Description(Middle) - A Date (Bottom) - Button(Right).

I could not find any good documentation about this but i got some samples of how to create an TListView with muti details, but the problem is : that sample is not documented so is very hard to understand whats going on there.

I would like to have a link or some explanation of how to do this, or if theres other way to achive what I want. I have tried using TListBox but the performance on mobile is a little bad. I have to say that I could make what I want with TListBox, but this is the problem... The performance.

So I would like to have a control to list items(that I can create by my own) with a good performance.

Answer 1

A TListView is indeed the appropriate thing to use when you have many items which are to have the same layout as each other (although it is possible to make each one vary from the next). A TListBox is only meant when you have not too many items, and each one needs to have different contents (such as configuring application settings). I actually just got done fixing this mistake, switching some List Boxes to List Views.

The tools built-in to Delphi don't necessarily allow you to design a layout / template in design-time (I've heard of third-party libraries for this), however you can still customize it with code. A TListView does not actually contain controls inside - instead a particular type of object (inherited from TListItemObject). These are virtual objects meant to place various types of data in the final drawing.

This starts by adding an event handler for TListView.OnUpdateObjects. This is where you essentially "design" the layout. Here's some code which I'm using for example in some inventory search results:

procedure TfrmInventoryContent.lstItemsUpdateObjects(const Sender: TObject; const AItem: TListViewItem);
var
  TextLabel: TListItemText;
begin
  //Add objects per item in list view for displaying more info

  //Item Price Label
  TextLabel := AItem.Objects.FindObject('lblPrice') as TListItemText;
  if TextLabel = nil then begin
    TextLabel:= TListItemText.Create(AItem);
    TextLabel.Name:= 'lblPrice';
    TextLabel.Align:= TListItemAlign.Trailing;
    TextLabel.VertAlign:= TListItemAlign.Leading;
    TextLabel.TextAlign:= TTextAlign.Trailing;
    TextLabel.PlaceOffset.X:= -10;
    TextLabel.PlaceOffset.Y:= 4;
    TextLabel.Font.Size:= 14;
    TextLabel.Width:= 60;
    TextLabel.Height:= 18;
    TextLabel.Text:= '';
    TextLabel.TextColor:= TAlphaColorRec.Green;
  end;
  //Item Quantity Label
  TextLabel := AItem.Objects.FindObject('lblQty') as TListItemText;
  if TextLabel = nil then begin
    TextLabel:= TListItemText.Create(AItem);
    TextLabel.Name:= 'lblQty';
    TextLabel.Align:= TListItemAlign.Trailing;
    TextLabel.VertAlign:= TListItemAlign.Leading;
    TextLabel.TextAlign:= TTextAlign.Trailing;
    TextLabel.PlaceOffset.X:= -120;
    TextLabel.PlaceOffset.Y:= 4;
    TextLabel.Font.Size:= 14;
    TextLabel.Width:= 30;
    TextLabel.Height:= 18;
    TextLabel.Text:= '';
    TextLabel.TextColor:= TAlphaColorRec.Blue;
  end;
end;

There are other similar types other than just TListItemText, inheriting from TListItemObject. You can even design your own if you need to. Once you have designed this layout, you then need to populate the contents...

var
  TextLabel: TListItemText;
  I: TListViewItem;
begin
  //Assuming I is already added to list somewhere
  TextLabel := I.Objects.FindObject('lblPrice') as TListItemText;
  if Assigned(TextLabel) then begin
    TextLabel.Text:= FormatFloat('$#,##0.00', InventoryItem.CustomerPrice.Price);
  end;

  TextLabel := I.Objects.FindObject('lblQty') as TListItemText;
  if Assigned(TextLabel) then begin
    TextLabel.Text:= IntToStr(InventoryItem.Quantity);
  end;
end;

Note how each of these objects has a "name" which is to be unique (but doesn't follow the same component names you're already used to). These names are unique to each list item.