Firemonkey ListView dynamicappearance

Go up to Firemonkey application Design

Contents[Hide]

• 1 customizing the List View appearance Properties
  • 1.1  footer properties
  • 1.2 header properties
  • 1.3 list Item properties
  • 1.4  Edited list item properties
  • 1.5  how to Modify List View appearance Properties
• 2 customizable Item appearances
  • 2.1 Using the dynamicappearance Value
  • 2.2 Using the Custom Value
• 3 The Toggle Design Mode
• 4 Create A customized appearance Class
  • 4.1 How to use the customized appearance Class
• 5 See Also
  • 5.1 Samples

You can customize the appearance of a firemonkey list view by modifying the layout of the list items, including t He caption, the associated image, text details, or the accessory icon.

Customizing the List View appearance Properties

At design time, your 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 a size (normal and in editing mode).

The following appearance properties of a ListView is grouped in the Object Inspector and in the Structurevie W, and you can modify their values to customize your list view appearance.

Footer Properties

• Footerheight. The designates the list footer height (in pixels). Default value: 24 .
• Footerappearance. This property designates the footer graphical appearance. Possible values are: Custom and ListHeader . Default value: ListHeader .

Header Properties

• Headerheight. The designates the list header height (in pixels). Default value: 24 .
• Headerappearance. This property designates the header graphical appearance. Possible values are: Custom and ListHeader . Default value: ListHeader .

List Item Properties

• ItemHeight. The designates the item height (in pixels). Default value: 44 .
• Itemappearance. This property designates the item graphical appearance (image, caption, accessory button, etc.). Default value: ListItem .

Choose between the following values:

Property	Visible objects
Custom	see using the Custo M 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 a accessory t Ext button
Imagelistitemrightbutton	An image, a caption, and an accessory text button
ListItem	A caption and an accessory graphical button
Listitemrig Htdetail	A caption, a detail text, and an accessory graphical button

See FMX. Listviewcustombottomdetail Sample and other Samples.

edited list Item properties

• Itemeditheight. The designates the item height (in pixels) while in edit mode. Default value: 44 .
• Itemeditappearance. This property designates the item graphical appearance if in edit mode. Default value: ListItemShowCheck .

Choose between the following values:

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.

How to Modify List View appearance Properties

Use the Structureview and the Object Inspector to find the List View component.

• In the Structure View, locate the ListView component and then click in the ItemAppearance hierarchy.
• In the Object Inspector, modify (Footerappearance, Headerappearance, Itemappearance, itemeditappearance) to the desired value.

 

Customizable Item Appearances

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 Pro  Perties 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).

Using the dynamicappearance Value

The dynamicappearance allows you-dynamically customize the item appearance of the ListView at Design Time. The difference between dynamicappearance and the other item appearance properties are that the Dynamicappearan Ce allows 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 from in the Item IteamAppearance structureview. Then, under the Object Inspector, click the property and select any of the + available objects. The available objects is:

• Ttextobjectappearance. Describes the graphical appearance of the text object of the list view item.
• Timageobjectappearance. Describes the graphical appearance of the icon object of the list view item.
• Taccessoryobjectappearance. Describes the graphical appearance of the accessory object of the list view item.
• Ttextbuttonobjectappearance. Describes the graphical appearance of the Text button object of the list view item.
• Tglyphbuttonobjectappearance. Describes the graphical appearance of a glyph button (graphical image) of the list view item.

You can customize the objects of the item appearance at design time by selecting an object in the Structureview A nd changing its properties in the Object Inspector. Among the things you can customize, these is 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.

Tip: As can add as many objects as you want, it's highly recommended to use the dynamicappearance with the Toggle DesignMode enabled.

Using the Custom Value

Selecting the Custom appearance value enables the following objects in the item appearance:

• accessory. It is an instance of taccessoryobjectappearance. Not visible by default.
• Detail. It is an instance of ttextobjectappearance. Not visible by default.
• Glyphbutton. It is an instance of tglyphbuttonobjectappearance. Not visible by default.
• Image. It is an instance of timageobjectappearance. Not visible by default.
• Text. It is an instance of ttextobjectappearance. Visible by default.
• Textbutton. It is an instance of ttextbuttonobjectappearance. Not visible by default.

  Note: You can customize the objects of the item appearance at design time by changing their properties us ing the Object Inspector or enabling the Toggle DesignMode.

To set the visibility of the desired objects:

• Enable the Visible property (by setting it value to True ) in the Object Inspector for any of the Desir Ed objects and modify the properties according to your needs.
• Enable the Visible property for any of the objects, by setting it to the True source code.

Delphi:

AItem.  Objects.  Accessoryobject.:True;       

C++:

void __fastcall TForm1:: Setedititemproperties* aobjects){aobjects->glyphbutton->visible = true;}   

The Toggle Design Mode

The Toggle DesignMode allows you to visually customize the item appearance of a ListView at design time. You can select the This mode for all Itemappearance property (,,, Custom DynamicAppearance ListItem ImageListItem , etc.).

Tip: The Toggle DesignMode is highly recommended when using the dynamicappearance because the dynamicappearance allows you to freely customize the itemappearance.

To select the Toggle DesignMode, right-click the TListView object with the Structureview or in the TFo RM and select it. The Toggle DesignMode changes the Design-time view of the ListView object from a blank box to a design p Review of the ListView item. Then, can:

• Visually customize the item appearance in the form.
• Visualize the changes that the the item appearance properties using the Object Inspector.

Create A customized appearance Class

You can create an and install a new customized appearance class and use it in the your design, by installing a new package. This package defines the classes, implement a custom appearance for list view items. You can customize the fields as necessary, to implement a rating image for instance (a control, shows a different imag E based on a numeric value).

How to use the customized appearance Class

1. Implement a new TListView appearance package. The following samples contain different examples that customize the list view appearance to show:
   • A thumbnail with a caption
   • A rating as an image
   • A detail text at the bottom of the items
   • Three detail text items
2. Install the customized appearance package in the IDE.
3. Once installed, the new appearance can be used and a tlistview component in the Object instpector.

Note: the multidetailitem value is a customized appearance package, previously installed in the I DE.

See Also

• Mobile tutorial:using livebindings to Populate a ListView (IOS and Android)
• Firemonkey Native IOS Controls
• FMX. ListView.TAppearanceListView.ItemAppearance
• FMX. ListView.Appearances.TPublishedAppearance.FooterHeight
• FMX. ListView.Appearances.TPublishedAppearance.FooterAppearance
• FMX. ListView.Appearances.TPublishedAppearance.HeaderHeight
• FMX. ListView.Appearances.TPublishedAppearance.HeaderAppearance
• FMX. ListView.Appearances.TPublishedAppearance.ItemHeight
• FMX. ListView.Appearances.TPublishedAppearance.ItemAppearance
• FMX. ListView.Appearances.TPublishedAppearance.ItemEditHeight
• FMX. ListView.Appearances.TPublishedAppearance.ItemEditAppearance

Samples

• FMX. Listviewaddthumbandcaption Sample
• FMX. Listviewratingsappearance Sample
• FMX. Listviewcustombottomdetail Sample
• FMX. Listviewmultidetailappearance Sample

Categories:

• FMX
• XE7

Http://docwiki.embarcadero.com/RADStudio/Berlin/en/Customizing_FireMonkey_ListView_Appearance

Firemonkey ListView dynamicappearance