Learn How To Easily Customize The Appearance Of A ListView In This Delphi Sample App

Some of the use case needs to view the Multi Details Appearance for a List item in a ListView .e.g Selecting Multiple items Add or Delete from a List with Multi Detail information. Delphi/C++ Builder offers robust components to do the job at design time or runtime with less code and made developer life easy.

ListViewMultiDetailAppearance Sample  show three detail text items. It does this by using list view item appearances previously defined in a custom package.

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 ListViewMultiDetailAppearance App:

TListViewFireMonkey component that you can use to hold and present various types of items. The ItemAppearance property value set to MultiDetailItem.

TBindingsListBuilt 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.

TPrototypeBindSourceIt 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 three different detail fields under their main label. 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.

Before Running this Sample ListViewMultiDetailAppearance need to install the package SampleListViewMultiDetailAppearancePackage.bpl. The package defines three subclasses of Appearances.TPresetItemObjects that implement a custom appearance for list view items. It actually defines a base subclass that is later inherited and extended by the other two subclasses.

These subclasses use instances of Appearances.TTextObjectAppearance to implement the three detail fields that each list item shows. The rest of the fields are inherited from Appearances.TPresetItemObjects and customized as necessary.

The ListViewMultiDetailAppearance application uses these subclasses in the ItemAppearance.ItemAppearance and ItemAppearance.ItemEditAppearance properties of the list view to use the appearance defined in the installed package. You can tap ToggleEditMode to see how the application keeps the appearance in edit mode.  Check out the full article in the DocWiki about the FMX.ListViewMultiDetailAppearance

ListViewMultiDetailAppearance Sample App

The LiveBindings button uses TLinkFillControlToField to fill the list view using LiveBindings. The Fill in Code button uses a for loop to fill the list view with items created at run time.

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