RAD Studio 10.4.1 is now available! Learn more. Looking for discounts? Visit our Special Offers page!
C++DelphiRAD Studio

Easily Customize The Appearance Of The FireMonkey ListView Using The ListViewAddThumbAndCaption Cross Platform Sample App

Viewing your valuable data in a List with ultimate user experience becomes the essential need in Modern Desktop and Mobile Applications. Some of the usecase needs to toggle between the editingmode or viewing the list items with different appearance .e.g Selecting Multiple Contacts to delete from a Contacts List. Delphi/C++ Builder offers robust components to do the Job at Design time or Runtime with less code and made developer life easy.

ListViewAddThumbAndCaption Sample shows how to customize the appearance of a TListView to show a thumbnail with a caption on the right-hand side of every list view item. You can have the list view enter a selection edit mode where you can select several items on tapping ToggleEditMode button.
It does this by modifying the appearance of the list view at run time.

You can find Delphi and C++ code samples in GitHub Repositories. Search by name into the samples repositories according to your RAD Studio version.

Components used in ListViewAddThumbAndCaption App:

TListView: FireMonkey component that you can use to hold and present various types of items.

TBindingsList: Built on the TCustomBindingsList component and publishes additional properties that can be accessed from within the Object Inspector. Add a new binding and select TLinkFillControlToField under Quick Bindings. TLinkFillControlToField: Links a control to a field and fills the control with possible values.

TPrototypeBindSource:  It can be used to generate sample data for the LiveBindings in your project. After you prototype an application, configure the real data source so that you see the new data source fields in the LiveBindings design.

Implementation Details :

When you run the application, it shows a list view. Each list item shows a thumbnail image with a caption on the right-hand side corner.
You can tap the ToggleEditMode button to have the list view enter a selection edit mode where you can select several items. The buttons at the bottom, LiveBindings and Fill in Code, let you fill the list view with items defined using LiveBindings or defined at run time, respectively.

To render the thumbnail and caption on each list view item the application handles the OnUpdateObjects event of the list view. For each list view instance, the application creates and initializes the required TListItemImage instance that will hold the thumbnail and the TListItemText instance that will hold the caption.

When using LiveBindings, the application handles the OnFilledListItem event of the instance of TLinkFillControlToField to fill list view items with the required data for their new fields: the bitmap of the thumbnail and the text of the caption. Check out the full article in the DocWiki about the FMX.ListViewAddThumbAndCaption Sample.

AddThumbAndCaption in a ListView

You can change at design time the values of the ItemAppearance.ItemAppearance and ItemAppearance.ItemEditAppearance properties of the list view to see how, at run time, the application extends any selected appearance with a thumbnail and a caption on the right-hand side of each item.

Check out the full source code for the ListViewAddThumbAndCaption projects for Delphi and C++Builder over on GitHub.


Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder. Design. Code. Compile. Deploy. Start Free Trial   Free Delphi Community Edition   Free C++Builder Community Edition   Upgrade Today
Sign up for our daily posts newsletter!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES