FMX.ListViewRatingsAppearance Sample

This is a project that shows how to customize the appearance of a TListView to show a rating as an image. That is, it shows a different image based on a numeric value of each list view item. It does this by using list view item appearances previously defined in a custom package.

Location

You can find the ListViewRatingsAppearance Sample sample project at:

• Start | Programs | Embarcadero RAD Studio Berlin | Samples and navigate to:
  • Object Pascal\Multi-Device Samples\User Interface\ListView\ListViewRatingsAppearance
• Subversion Repository:
  • http://sourceforge.net/p/radstudiodemos/code/HEAD/tree/branches/RADStudio_Berlin/Object%20Pascal/Multi-Device%20Samples/User%20Interface/ListView/ListViewRatingsAppearance

Description

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.

How to Use the Sample

1. Navigate to the location given above and open the package file SampleListViewRatingsAppearancePackage.dpk.
2. In the Project Manager, right-click the SampleListViewRatingsAppearancePackage.bpl file and select Install from the context menu.
3. Return to the location given above and open the project file ListViewMRatingsAppearanceProject.dproj.
4. Double-click the project entry on the Project Manager, and press F9 or choose Run > Run.

Implementation

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 a custom class, TRatingsImageObjectAppearance. Its subclasses use Appearances.TImageObjectAppearance to implement a rating image, a control that shows a different image based on a numeric value. The rest of the fields are inherited from Appearances.TPresetItemObjects and customized as necessary.

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

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. You must use Fill in Code to actually see a different rating on each list view item; the LiveBindings items do not provide a rating and the default value is used instead.

Uses

• FMX.ListView.TListView
• FMX.ListView.Appearances.TPresetItemObjects
• FMX.ListView.Appearances.TImageObjectAppearance
• FMX.ListView.Appearances.TPublishedAppearance
• FMX.ListView.Appearances.TPublishedAppearance.ItemAppearance
• FMX.ListView.Appearances.TPublishedAppearance.ItemEditAppearance
• Data.Bind.Components.TLinkFillControlToField

See Also

• FMX.ListViewMultiDetailAppearance Sample
• FMX.ListViewAddThumbAndCaption Sample
• FMX.ListViewCustomBottomDetail Sample

• Tutorial: Using LiveBindings to Create an Application Without Code
• All the LiveBindings Tutorials
• LiveBindings in RAD Studio