IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Composants FMX Delphi Discussion :

FMX TListView Items angles arrondis et fond transparent ?


Sujet :

Composants FMX Delphi

  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Septembre 2008
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2008
    Messages : 35
    Points : 26
    Points
    26
    Par défaut FMX TListView Items angles arrondis et fond transparent ?
    Bonjour à tous
    Je voudrais créer une ListView qui ressemble à l'image ci-dessous
    ( Rad Studio 10.4-> Delphi->Android ListView dynamic )
    Donc que chaque Item soient séparés de quelques pixels (transparent si possible de facon à avoir la couleur de mon fond (ici en noir) et sinon pouvoir en definir la couleur pour le mettre en noir) et que les angles soient arrondis comme ci dessous
    Mais je n'y arrive pas du tout Nom : Capture d’écran 2020-09-20 101039.jpg
Affichages : 240
Taille : 53,4 Ko
    Pour faire simple disons que cette ListView comporte juste une Image et un Text

  2. #2
    Rédacteur/Modérateur

    Avatar de SergioMaster
    Homme Profil pro
    Développeur informatique retraité
    Inscrit en
    Janvier 2007
    Messages
    15 017
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur informatique retraité
    Secteur : Industrie

    Informations forums :
    Inscription : Janvier 2007
    Messages : 15 017
    Points : 40 932
    Points
    40 932
    Billets dans le blog
    62
    Par défaut
    Bonjour,

    à essayer, aujouter une Image (cette image contenant un rectangle coin arrondi comme souhaité) bien penser à la mettre en arrière plan (apparence dynamique oblige) aligné client avec marges.
    -astuce : éditer la fiche en mode texte pour le passage en arrière plan = premier objet à créer.
    MVP Embarcadero
    Delphi installés : D3,D7,D2010,XE4,XE7,D10 (Rio, Sidney), D11 (Alexandria), D12 (Athènes)
    SGBD : Firebird 2.5, 3, SQLite
    générateurs États : FastReport, Rave, QuickReport
    OS : Window Vista, Windows 10, Windows 11, Ubuntu, Androïd

  3. #3
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Septembre 2008
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2008
    Messages : 35
    Points : 26
    Points
    26
    Par défaut
    C'est ce que j'ai tenté mais je ne sais pas comment mettre en arriere plan mon image

  4. #4
    Rédacteur/Modérateur

    Avatar de SergioMaster
    Homme Profil pro
    Développeur informatique retraité
    Inscrit en
    Janvier 2007
    Messages
    15 017
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur informatique retraité
    Secteur : Industrie

    Informations forums :
    Inscription : Janvier 2007
    Messages : 15 017
    Points : 40 932
    Points
    40 932
    Billets dans le blog
    62
    Par défaut
    Bonjour,

    pour la démonstration disons que tu partes d'un existant
    Nom : Capture.PNG
Affichages : 229
Taille : 44,3 Ko
    auquel tu ajoutes un nouveau objet image
    Nom : Capture_1.PNG
Affichages : 182
Taille : 44,4 Ko
    le nouvel objet (ton futur rectangle arrondi) se trouve donc en premier plan
    tu bascules grâce au menu contextuel (voir comme texte) pour obtenir le source du .fmx (bien sûr notepad peut aussi être une option)
    cela donne ceci

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    object Form1: TForm1
      Left = 0
      Top = 0
      Caption = 'Form1'
      ClientHeight = 528
      ClientWidth = 459
      FormFactor.Width = 320
      FormFactor.Height = 480
      FormFactor.Devices = [Desktop]
      DesignerMasterStyle = 0
      object ListView1: TListView
        ItemAppearanceClassName = 'TDynamicAppearance'
        ItemEditAppearanceClassName = 'TDynamicAppearance'
        HeaderAppearanceClassName = 'TListHeaderObjects'
        FooterAppearanceClassName = 'TListHeaderObjects'
        Position.X = 32.000000000000000000
        Position.Y = 40.000000000000000000
        Size.Width = 369.000000000000000000
        Size.Height = 425.000000000000000000
        Size.PlatformDefault = False
        TabOrder = 1
        ItemAppearance.ItemHeight = 200
        ItemAppearance.ItemEditHeight = 200
        ItemAppearanceObjects.ItemObjects.ObjectsCollection = <
          item
            AppearanceObjectName = 'TextData'
            AppearanceClassName = 'TTextObjectAppearance'
            Appearance.TextVertAlign = Leading
            Appearance.Width = 340.000000000000000000
            Appearance.Height = 52.000000000000000000
            Appearance.Align = Trailing
            Appearance.VertAlign = Trailing
          end
          item
            AppearanceObjectName = 'ImageData'
            AppearanceClassName = 'TImageObjectAppearance'
            Appearance.Width = 236.000000000000000000
            Appearance.Height = 137.000000000000000000
            Appearance.Align = Center
          end
          item
            AppearanceObjectName = 'ImageFond'
            AppearanceClassName = 'TImageObjectAppearance'
          end>
        ItemAppearanceObjects.ItemEditObjects.ObjectsCollection = <
          item
            AppearanceObjectName = 'Text1'
            AppearanceClassName = 'TTextObjectAppearance'
          end>
      end
    end
    la manip consiste uniquement en un couper/coller, ce qui est en bleu dans le code du haut (pas moyen de surligner)
    doit se retrouver au début de ItemAppearanceObjects.ItemObjects.ObjectsCollection (code du bas, en vert après manip)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    object Form1: TForm1
      Left = 0
      Top = 0
      Caption = 'Form1'
      ClientHeight = 528
      ClientWidth = 459
      FormFactor.Width = 320
      FormFactor.Height = 480
      FormFactor.Devices = [Desktop]
      DesignerMasterStyle = 0
      object ListView1: TListView
        ItemAppearanceClassName = 'TDynamicAppearance'
        ItemEditAppearanceClassName = 'TDynamicAppearance'
        HeaderAppearanceClassName = 'TListHeaderObjects'
        FooterAppearanceClassName = 'TListHeaderObjects'
        Position.X = 32.000000000000000000
        Position.Y = 40.000000000000000000
        Size.Width = 369.000000000000000000
        Size.Height = 425.000000000000000000
        Size.PlatformDefault = False
        TabOrder = 1
        ItemAppearance.ItemHeight = 200
        ItemAppearance.ItemEditHeight = 200
        ItemAppearanceObjects.ItemObjects.ObjectsCollection = <
          item
            AppearanceObjectName = 'ImageFond'
            AppearanceClassName = 'TImageObjectAppearance'
          end
          item
            AppearanceObjectName = 'TextData'
            AppearanceClassName = 'TTextObjectAppearance'
            Appearance.TextVertAlign = Leading
            Appearance.Width = 340.000000000000000000
            Appearance.Height = 52.000000000000000000
            Appearance.Align = Trailing
            Appearance.VertAlign = Trailing
          end
          item
            AppearanceObjectName = 'ImageData'
            AppearanceClassName = 'TImageObjectAppearance'
            Appearance.Width = 236.000000000000000000
            Appearance.Height = 137.000000000000000000
            Appearance.Align = Center
          end>
        ItemAppearanceObjects.ItemEditObjects.ObjectsCollection = <
          item
            AppearanceObjectName = 'Text1'
            AppearanceClassName = 'TTextObjectAppearance'
          end>
      end
    end
    un retour à la fiche (voir comme fiche), une nouvelle bascule en mode conception (apparement non gardé, mais je me suis peut être trompé dans ma manip)
    et voilà

    Nom : Capture_2.PNG
Affichages : 190
Taille : 37,4 Ko

    Imagefond est bien en background.

    Bien sûr il faut ensuite jouer sur les tailles, les divers align, placeoffset et cie pour obtenir les "séparations de quelques pixels" rien d'insurmontable, je pense même que cela doit pouvoir se faire en partie directement au cours de la manip sur le source toutefois attention à bien respecter le nombre de chiffres après le point décimal.

    Le plus drôle, c'est que pour moi ce serait presque faire l'image de fond qui me poserait soucis ! Jusqu'à ce que je pense au programme qui m'a servi à créer des "images sympas" à partir de Graphics.TPath (SVG) et, méditation de dernière minute, la possiblité de créer cette image au runtime. Je me mets un pour cette idée en tout cas pour du multi-plateforme cela réglerai peut-être un problème de dpi
    MVP Embarcadero
    Delphi installés : D3,D7,D2010,XE4,XE7,D10 (Rio, Sidney), D11 (Alexandria), D12 (Athènes)
    SGBD : Firebird 2.5, 3, SQLite
    générateurs États : FastReport, Rave, QuickReport
    OS : Window Vista, Windows 10, Windows 11, Ubuntu, Androïd

  5. #5
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Septembre 2008
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2008
    Messages : 35
    Points : 26
    Points
    26
    Par défaut
    Superbe !
    Merci pour ton temps et ta patience

Discussions similaires

  1. pb png avec IE7 - cadre arrondis avec fond transparent
    Par pumaflow dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 02/06/2008, 11h50
  2. [CSS]Angle arrondi pour une balise <div>
    Par mimagyc dans le forum Mise en page CSS
    Réponses: 45
    Dernier message: 22/08/2007, 23h39
  3. TListView items impossibles à glisser
    Par OutOfRange dans le forum Delphi
    Réponses: 3
    Dernier message: 29/09/2006, 11h49
  4. Couleur dun TListView.Item.SubItem
    Par Soulama dans le forum Composants VCL
    Réponses: 20
    Dernier message: 19/03/2006, 00h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo