Go Up to FireMonkey Application Design
[hide]
You can customize the appearance of a FireMonkey list view by modifying the layout of the list items, including the caption, the associated image, text details, or the accessory icon.
At design time, you can change the footer, header, and the list items appearance (also for the editing mode) by modifying the values of the properties in the ItemAppearance property. The ItemAppearance property controls the footer, the header, and the item appearance size (normal and in editing mode).
The following appearance properties of a ListView are grouped in the Object Inspector and in the StructureView, and you can modify their values to customize your list view appearance.
24.Custom and ListHeader. Default value: ListHeader.24.Custom and ListHeader. Default value: ListHeader.44.ListItem.| Property | Visible objects |
|---|---|
| Custom | See Using the Custom Value |
| DynamicAppearance | See Using the DynamicAppearance Value |
| ImageListItem | An image, a caption, and an accessory graphical button |
| ImageListItemBottomDetail | An image, a caption, a detail text, and an accessory graphical button |
| ImageListItemBottomDetailRightButton | An image, a caption, a detail text, and an accessory text button |
| ImageListItemRightButton | An image, a caption, and an accessory text button |
| ListItem | A caption and an accessory graphical button |
| ListItemRightDetail | A caption, a detail text, and an accessory graphical button |
See FMX.ListViewCustomBottomDetail Sample and other Samples.
44.ListItemShowCheck.| Property | Visible objects |
|---|---|
| Custom | See Using the Custom Value |
| DynamicAppearance | See Using the DynamicAppearance Value |
| ImageListItemBottomDetailRightButtonShowCheck | An image, a caption, a detail text, a check box glyph button, and a text button |
| ImageListItemBottomDetailShowCheck | An image, a caption, a detail text, a check box glyph button, and an accessory graphical button |
| ImageListItemDelete | An image, a caption, a delete glyph button, and an accessory graphical button |
| ImageListItemRightButtonDelete | An image, a caption, a delete glyph button, and a text button |
| ImageListItemRightButtonShowCheck | An image, a caption, a check box glyph button, and a text button |
| ImageListItemShowCheck | An image, a caption, a check box glyph button, and an accessory graphical button |
| ListItemDelete | A caption, a delete glyph button, and an accessory graphical button |
| ListItemRightDetailDelete | A caption, a detail text, a delete glyph button, and an accessory graphical button |
| ListItemRightDetailShowCheck | A caption, a detail text, a check box glyph button, and an accessory graphical button |
| ListItemShowCheck | A caption, a check box glyph button, and an accessory graphical button |
See FMX.ListViewCustomBottomDetail Sample and other Samples.
Use the StructureView and the Object Inspector to find the List View component.
ItemAppearance in the hierarchy.
The DynamicAppearance and Custom values allows you to customize the appearance of the items in a ListView. You can use the Customvalue for the FooterAppearance, HeaderAppearance, ItemAppearance and ItemEditAppearance properties of the items in the ListView, while you can use the DynamicAppearance for the ItemAppearance and ItemEditAppearance properties of the items in the ListView. You can also use built-in search filtering with the DynamicAppearance mode (*added in Subscription Update 1).
The DynamicAppearance allows you to dynamically customize the item appearance of the ListView at design time. The difference between DynamicAppearance and the other item appearance properties is that the DynamicAppearance allows you to add as many objects as you want to the appearance of your item.
By default, the DynamicAppearence contains a single text object. To add more objects, select Item from IteamAppearance in theStructureView. Then, in the Object Inspector, click the + property and select any of the available objects. The available objects are:
You can customize the objects of the item appearance at design time by selecting an object in the StructureView and changing its properties in the Object Inspector. Among the things you can customize, these are some examples: the font type, text size or text alignment in text objects or the button type in button objects. Moreover, you can visually customize the objects of the item appearance enabling the Toggle DesignMode.
Selecting the Custom appearance value enables the following objects in the item appearance:
To set the visibility of the desired objects:
True) in the Object Inspector for any of the desired objects and modify the properties according to your needs.True in the source code.Delphi:
AItem.Objects.AccessoryObject.Visible := True;C++:
void __fastcall TForm1::SetEditItemProperties( TItemAppearanceObjects * AObjects) { AObjects->GlyphButton->Visible = true; }The Toggle DesignMode allows you to visually customize the item appearance of a ListView at design time. You can select this mode for any ItemAppearance property (Custom, DynamicAppearance, ListItem, ImageListItem, etc.).
To select the Toggle DesignMode, right-click the TListView object in the StructureView or in the TForm and select it. The Toggle DesignMode changes the design-time view of the ListView object from a blank box to a design preview of the ListView item. Then, you can:
You can create and install a new customized appearance class and use it in your design, by installing a new package. This package defines the classes that implement a custom appearance for list view items. You can customize the fields as necessary, to implement a rating image for instance (a control that shows a different image based on a numeric value).
http://docwiki.embarcadero.com/RADStudio/Berlin/en/Customizing_FireMonkey_ListView_Appearance
