TListView DesignMode and DynamicAppearance

Getting to grips with TListView DesignMode and DynamicAppearance, part of the 10 Berlin release of RAD Studio

TListView

The TListView is a fast scrollable list that is typically used to display, select and navigate through data.

For those new to the TListView using FireMonkey see FMX TListView tutorial

TListView DesignMode

With the release of RAD Studio 10 Berlin, it is now possible to modify the look of TListView Items, TListView Header and TListView footer using the Toggle DesignMode.

When you right-click your list view on the Form Designer and select the new Toggle DesignMode, you enable the visual list view item editor. Rather than having to manually adjust the position of each component that makes up the item layout, you can now visually modify the control.

TListView DesignMode
Using the TListView DesignMode

TListView DynamicAppearance

The listview control also supports a new type of item appearance (also available for the edit mode), DynamicAppearance, that you can use to customise the elements that make up your list view: labels, images, buttons, and so on.

DynmanicAppearance for use with TListView DesignMode
TListView ItemAppearance set to DynamicAppearance, adding new items to the design

On your TListView item change the ItemAppearance property to DynamicAppearance, and then use the + to add in new objects.

Once added they appear under the Objects and can be renamed and modified manually as before or you can use the design mode to modify them.

 

5 thoughts on “TListView DesignMode and DynamicAppearance”

  1. Hi

    How i can to assign by code this property ( text2/3.. ) ?

    lvAnagrafiche.Items[0].Objects.DrawableByName(‘Text2’).Data.AsString := ‘New Value’;

    DrawableByName is read only.

    Thank again for good article 🙂

    1. Use the Data property for example

      procedure TForm2.Button1Click(Sender: TObject);
      var
      LVI: TListViewItem;
      begin
      LVI := ListView1.Items.Add;
      LVI.Data[‘Text1’] := ‘Hello’;
      LVI.Data[‘Text2’] := ‘World’;
      end;

      1. Hi, on your example above, how to get value of Data[‘Text1’] on selected ListView1 in Form

        I was try something like :
        Var
        LVI: TListViewItem;
        result : string;

        LVI :=ListView1.Selected;
        result := LVI.Data[‘Text1’].toString;
        or
        result:=LVI.Data[‘Text1’](ListView1.selected).tostring;

        and not working (this is not real code just logic)

        Thx

        1. This works for me. Create a new app with a button and a TListView and use the Button click and OnItemClick

          procedure TForm1.Button1Click(Sender: TObject);
          var
          LVI: TListViewItem;
          s: string;
          begin
          LVI := ListView1.Items.Add;
          s := ‘Hello ‘+ListView1.Items.Count.ToString;
          LVI.Text := s;
          LVI.Data[‘MyData’] := s;
          end;

          procedure TForm1.ListView1ItemClick(const Sender: TObject;
          const AItem: TListViewItem);
          begin
          if Assigned(AItem) then
          Self.Caption := AItem.Data[‘MyData’].AsString
          else
          Self.Caption := ‘ – none -‘;
          end;

  2. Hello, I guess this notation will please you

    To get a field (in this case Text3) of the current record in the TListView, use this

    ListView1.Items[ListView1.ItemIndex].Data[‘Text3’].AsString

Leave a Reply

Your email address will not be published. Required fields are marked *