Personnalisation de l'apparence de la vue liste FireMonkey

De RAD Studio
Aller à : navigation, rechercher

Remonter à Conception d'applications FireMonkey

Vous pouvez personnaliser l'apparence d'une vue liste FireMonkey en modifiant la disposition des éléments de la liste, notamment le libellé, l'image associée, les détails du texte ou l'icône accessoire.

AndroidScreen.png LBListView Android.png

Personnalisation des propriétés d'apparence de la vue liste

A la conception, vous pouvez changer l'apparence du pied de page, de l'en-tête et de la liste des éléments (pour le mode Edition également) en modifiant les valeurs des propriétés dans la propriété ItemAppearance. La propriété ItemAppearance contrôle la taille du pied de page, de l'en-tête et des éléments (en mode normal et en mode Edition).

Les propriétés d'apparence suivantes d'une vue liste sont regroupées dans l'inspecteur d'objets et dans la vue Structure ; vous pouvez modifier leurs valeurs pour personnaliser l'apparence de votre vue liste.

Propriétés du pied de page

  • FooterHeight. Cette propriété désigne la hauteur du pied de page de la liste (en pixels). Valeur par défaut : 24.
  • FooterAppearance. Cette propriété désigne l'apparence graphique du pied de page. Valeur par défaut : ListHeader.

Propriétés de l'en-tête

  • HeaderHeight. Cette propriété désigne la hauteur de l'en-tête de la liste (en pixels). Valeur par défaut : 24.
  • HeaderAppearance. Cette propriété désigne l'apparence graphique de l'en-tête. Valeur par défaut : ListHeader.

Propriétés des éléments de la liste

  • ItemHeight. Cette propriété désigne la hauteur des éléments (en pixels). Valeur par défaut : 44.
  • ItemAppearance. Cette propriété désigne l'apparence graphique des éléments (image, libellé, bouton accessoire, etc.). Valeur par défaut : ListItem.
Choisissez l'une des valeurs suivantes :
Propriété Objets visibles
Custom Voir Utilisation de la valeur Custom
ImageListItem Une image, un libellé et un bouton graphique accessoire
ImageListItemBottomDetail Une image, un libellé, un texte de détails et un bouton graphique accessoire
ImageListItemBottomDetailRightButton Une image, un libellé, un texte de détails et un bouton texte accessoire
ImageListItemRightButton Une image, un libellé et un bouton texte accessoire
ListItem Un libellé et un bouton graphique accessoire
ListItemRightDetail Un libellé, un texte de détails et un bouton graphique accessoire

Propriétés des éléments de la liste en mode Edition

  • ItemEditHeight. Cette propriété désigne la hauteur des éléments (en pixels) en mode Edition. Valeur par défaut : 44.
  • ItemEditAppearance. Cette propriété désigne l'apparence graphique des éléments en mode Edition. Valeur par défaut : ListItemShowCheck.
Choisissez l'une des valeurs suivantes :
Propriété Objets visibles
Custom Voir Utilisation de la valeur Custom
ImageListItemBottomDetailRightButtonShowCheck Une image, un libellé, un texte de détails et un bouton glyphe case à cocher et un bouton texte
ImageListItemBottomDetailShowCheck Une image, un libellé, un texte de détails, un bouton glyphe case à cocher et un bouton graphique accessoire
ImageListItemDelete Une image, un libellé, un bouton glyphe supprimer et un bouton graphique accessoire
ImageListItemRightButtonDelete Une image, un libellé, un bouton glyphe supprimer et un bouton texte
ImageListItemRightButtonShowCheck Une image, un libellé, un bouton glyphe case à cocher et un bouton texte
ImageListItemShowCheck Une image, un libellé, un bouton glyphe case à cocher et un bouton graphique accessoire
ListItemDelete Un libellé, un bouton glyphe supprimer et un bouton graphique accessoire
ListItemRightDetailDelete Un libellé, un texte de détails, un bouton glyphe supprimer et un bouton graphique accessoire
ListItemRightDetailShowCheck Un libellé, un texte de détails, un bouton glyphe case à cocher et un bouton graphique accessoire
ListItemShowCheck Un libellé, un bouton glyphe case à cocher et un bouton graphique accessoire

Comment modifier les propriétés d'apparence de la vue liste

Utilisez la vue Structure et l'inspecteur d'objets pour rechercher le composant Vue liste.

  • Dans la vue Structure, localisez le composant Vue liste (ListView), puis cliquez sur ItemAppearance dans la hiérarchie.
  • Dans l'inspecteur d'objets, localisez la propriété ItemAppearance et personnalisez les valeurs souhaitées.

ListViewProperties.png

Utilisation de la valeur Custom

La valeur Custom active tous les objets de la vue liste et vous pouvez sélectionner la visibilité des éléments dans la liste. Vous pouvez utiliser une valeur Custom pour les propriétés FooterApearance, HeaderAppearance, ItemAppearance et ItemEditAppearance des éléments dans la vue liste.

Vous pouvez personnaliser ces propriétés et définir la visibilité des éléments graphiques suivants pour chacune d'entre elles :

  • Objet accessoire (Accessory). Décrit l'apparence graphique de l'objet accessoire de l'élément de la vue liste. Vous pouvez changer :
    • Le type d'accessoire : Encoche, Détail ou icône accessoire Plus.
    • La position et la taille.
Remarque : L'objet type d'accessoire ne s'affiche pas en mode Edition.
  • Détail (Detail). Décrit l'apparence graphique du texte des détails d'un élément de la vue liste. Vous pouvez changer :
    • Le type de fonte, la couleur du texte et l'alignement du texte.
  • Bouton glyphe (GlyphButton). Décrit l'apparence graphique du bouton glyphe (image graphique) de l'élément de la vue liste. Vous pouvez changer :
    • Le type de bouton : bouton Ajouter, bouton Case à cocher et bouton Supprimer.
    • La position et la taille.
    • L'activation du bouton glyphe.
Remarque : Le bouton glyphe s'affiche uniquement en mode Edition.
  • Image. Décrit l'apparence graphique de l'objet icône de l'élément de la vue liste. Vous pouvez changer :
    • La position et la taille.
  • Texte (Text). Décrit l'apparence graphique de l'objet texte de l'élément de la vue liste. Vous pouvez changer :
    • La position et la taille du texte.
    • Le type de fonte, l'alignement du texte et le retour à la ligne.
  • Bouton texte (TextButton). Décrit l'apparence graphique de l'objet bouton texte de l'élément de la vue liste. Vous pouvez changer :
    • Le type de bouton.
    • Le type de fonte, la taille du texte, l'alignement du texte et le retour à la ligne.
    • L'activation du bouton texte.

Comment utiliser la valeur Custom

Pour utiliser la valeur Custom pour un élément de la liste :

  1. Dans l'inspecteur d'objets, localisez la propriété ItemAppearance et définissez sa valeur sur Custom.
    CustomValueListView.png CustomValueStructure.png
  2. Définissez la visibilité des objets souhaités :
    • Dans l'inspecteur d'objets, activez la propriété Visible (en définissant sa valeur sur True) pour tous les objets souhaités et modifiez les propriétés en fonction de vos besoins.
    • Dans le code source, activez la propriété Visible des objets en la définissant sur True.
Delphi : 
AItem.Objects.AccessoryObject.Visible := True;
C++ : 
void __fastcall TForm1::SetEditItemProperties( TItemAppearanceObjects * AObjects)
{
	AObjects->GlyphButton->Visible = true;
}

Création d'une classe d'apparence personnalisée

Vous pouvez créer et installer une nouvelle classe d'apparence personnalisée et l'utiliser dans votre conception, en installant un nouveau package. Ce package définit les classes qui implémentent une apparence personnalisée pour les éléments de la vue liste. Vous pouvez personnaliser les champs selon vos besoins, pour implémenter un contrôle image rating par exemple (contrôle qui affiche une image différente en fonction d'une valeur numérique).

Comment utiliser la classe d'apparence personnalisée

  1. Implémentez un nouveau package d'apparence TListView.
  2. Installez le package d'apparence personnalisée dans l'EDI.
  3. Après l'installation, vous pouvez utiliser la nouvelle apparence dans un composant TListView au sein de l'inspecteur d'objets.

CustomizedAppearancePackage.png

Remarque : La valeur MultiDetailItem est un package d'apparence personnalisée, précédemment installé dans l'EDI.

Voir aussi

Récupérée de « http://docwiki.embarcadero.com/RADStudio/Seattle/f/index.php?title=Personnalisation_de_l%27apparence_de_la_vue_liste_FireMonkey&oldid=184385 »