Discussion :

[Invité]

Bonjour,

j'ai besoin d'un cours accéléré pour modifier le style des ListBoxItem et les RadioButtons lors de leur survol par la souris. Le style par défaut les laisse "statiques" quand la souris passe dessus. Je voudrais que la "ligne" soit mise en évidence quand la souris passe dessus et si possible de la manière dont le fait nativement l'OS.

On fait cela comment SVP. Merci. Gilles

[SergioMaster]

Bonjour,

il faudrait que je fasse des tests mais AMHA il te faut simplement rajouter un effet.
En théorie

en pratique il y a un souci mais qui a dit que les styles c'était simple
a- je n'arrive pas atteindre le ListBoxItemStyle autrement qu'en chargeant un fichier style (donc pas de modification de style personnalisé ou modification du style par défaut)
b- je ne suis pas sur que cela fonctionne mais j'ai pas trop l'habitude des effets je ne comprend pas bien l'histoire du trigger

[SergioMaster]

En fait j'ai avancé un peu
pour ce qui est du RadioGroup pas trop de souci, une simple modification de style personnalisé et cela fonctionne a peu près, à peu près car je butte sur deux problèmes :
- l'effet est actif au démarrage de l'application, après il se fait bien si la souris passe dessus [Edit] pour une raison indéterminée mon radiogroup de test était focalisé donc effet actif
- je peux "cocher" le bouton mais pas le décocher (ça c'est moins bon) [Edit] comportement normal
pour ce qui est de l'item de liste je n'avais pas vu (jamais fait attention) la propriété DefaultItemStyle.ItemStyle ce qui me permet d'utiliser un style personnalisé pour l'item

ce qui donne le style personnalisé suivant


Toutefois, le trigger ismouseover ne semble pas fonctionner pour l'item de liste même ainsi mais peut-être s'agit-il su même phénomène que ta question tlistboxitem-ne-declenche-evenements-onmouseenter-onmouseleave/

[Invité]

Merci pour ton aide. Cette difficulté me désole.

Je veux obtenir ceci ici sous macOS :

et sous Windows


En Qt cela me prend une ligne au début de ma "Form" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setStyleSheet("QRadioButton::hover { background-color:"+ QVariant(palette().color(QPalette::Highlight)).toString() +"; }");

C'est du CSS. Tu peux faire pour un RadioButton particulier, tous les RadioButtons de la Form ou tous les RadioButtons de l'application.

[SergioMaster]

Pour ce que tu veux, ce n'est évidement pas un effet Glow qu'il faut
A mon avis, il faut ajouter un TRectangle et un effet sur la couleur peut être un ColorAnimation,
pour ce qui est de la couleur différente entre macos et windows ce ne serait qu'une question ensuite d'initialisation il faut aussi penser que pour une feuille de style on a une collection par os


tu excuseras le tremblé du surligneur mes mains sont encore insensibilisées d'une utilisation de karcher

[Invité]

Résolu partiellement à partir de ce lien mais suffisamment pour ce que j'en ai à faire pour l'instant. (à l'ancienne i.e. par code). J'essaie d'en faire autant avec les TRadioButtons.

[Invité]

Voici une solution simple de contournement avec TRectangle... Mais il faut jouer avec son opacité.
cf. le rar testé sous Windows et macOS. Cela reste une solution de contournement... et il reste à gérer le onClick...

Voilà, c'était histire de ne pas rester sur un échec total (une infaisabilité).
A bientôt. Gilles

[SergioMaster]

Bonjour

et voici ma réponse "stylée" et donc zéro code
Bon, bien sûr je n'ai pas testé sous Mac (par manque de poires) ni sous Android (par flemme) mais le principe y est

Si mes loisirs me le permette je me pencherai sur cette histoire de onItemClick
Mais pour l'instant je me pose plutôt la question suivante :
Quels sont les équivalents de clbtnShadow, clbtnFace, clHighLight etc... soit les valeurs par défaut quand on utilise les styles ?
en effet, je préférerais plutôt à Rouge la même valeur que le style utilisé (dans ce cas le style par défaut donne du Bleu)

[Invité]

Bonjour Serge,

je n'arrive pas à faire fonctionner ton exemple. Tu n'as pas oublié un fichier dans ton zip : j'ai 3 fichiers:

• ProjectStyle.dpr
• UnitStyle.fmx
• UnitStyle.pas

Je suis en Delphi 10.2.3 sur un Windows 7 64.

Si tu mets la propriété HiTest à True, alors effectivement les évènements onMouseEnter et onMouseLeave sont activés... et pour sélectionner les ListBoxItems, on peut contourner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
procedure TForm1.ListBoxItemClick(Sender: TObject);
begin
   TListBoxItem(Sender).IsSelected := not(TListBoxItem(Sender).IsSelected);
end;

Cordialement. Gilles

PS :

1. si tu veux faire un test, j'ai un mac mini de secours (une doublure de mon appareil de développement), un peu moins puissant (8 G0 au lieu de 16 Go) et un SSD de 500 Go au lieu de 1000 Go. Toute la connectique (dual screen,...) est disponible. VirtualBox est installé, un Windows 7, 10 et Ubuntu avec Qt d'installé sur tous les OS et peut-être Lazarus. . Il voyage très bien par Colissimo : le mac mini n'est pas encombrant . J'espère qu'un nouveau modèle va sortir pour pouvoir bénéficier du nouveau système graphique disponible dans la prochaine version de mac OS et d'ores est déjà exploitable sous Qt. Pas d'annonce en vue pour l'instant.
2. j'enlève le résolu puisqu'on est encore dessus. Pugnaces les Delphistes...
3. j'ai réussi à faire fonctionner le GlowEffect mais par défaut, au démarrage, il était effectif alors que la souris n'était pas dessus. Le onMouseLeave, le désactiver correctement. j'ai tellement modifier les combinaisons que plus rien ne fonctionne

[Invité]

Je te propose un compromis après avoir lu qu'il y avait parfois des problèmes avec le composant d'animation et qu'il était parfois préférable d'utiliser un tout petit peu de code. Je trouve la présentation "classe". Le code est simple.

Seul regret : ne pas pouvoir affecter un seul TGlowEffect pour tous les ListBoxItems. Réglé avec la version b.

Bref, la sélection et même la multisélection sont opérationnelles. Testé sous Mac et Windows : OK

Ci-joint le rar.

Personne ne dispose de la partie Linux Desktop de Firemonkey pour tester ?

Gilles

[SergioMaster]

Bonjour,

je n'arrive pas à faire fonctionner ton exemple. Tu n'as pas oublié un fichier dans ton zip : j'ai 3 fichiers:

c'est possible, je maitrise toujours pas ce quil faut mettre comme sources dans un zip, j'ai calqué mon zip sur ton rar

Je suis en Delphi 10.2.3 sur un Windows 7 64.

seul la version de Windows est différente

Si tu mets la propriété HiTest à True, alors effectivement les évènements onMouseEnter et onMouseLeave sont activés... et pour sélectionner les ListBoxItems, on peut contourner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
procedure TForm1.ListBoxItemClick(Sender: TObject);
begin
   TListBoxItem(Sender).IsSelected := not(TListBoxItem(Sender).IsSelected);
end;

MouseEnter et MouseLeave, je l'avais déjà tester avec succès (le fameux HitTest qui fait toute la différence , le piège !)
pour ce qui est du OnClick par contre j'ai quelques doutes

[*]si tu veux faire un test, j'ai un mac mini de secours (une doublure de mon appareil de développement), un peu moins puissant (8 G0 au lieu de 16 Go) et un SSD de 500 Go au lieu de 1000 Go. Toute la connectique (dual screen,...) est disponible. VirtualBox est installé, un Windows 7, 10 et Ubuntu avec Qt d'installé sur tous les OS et peut-être Lazarus. . Il voyage très bien par Colissimo : le mac mini n'est pas encombrant . J'espère qu'un nouveau modèle va sortir pour pouvoir bénéficier du nouveau système graphique disponible dans la prochaine version de mac OS et d'ores est déjà exploitable sous Qt. Pas d'annonce en vue pour l'instant.

Je te remercie mais je ne suis plus dans mon bureau (déjà très encombré) mais sur mon lieu de vacances. Je garde ta proposition sous le coude

[*]j'ai réussi à faire fonctionner le GlowEffect mais par défaut, au démarrage, il était effectif alors que la souris n'était pas dessus. Le onMouseLeave, le désactiver correctement.

ce n'est plus/pas un GlowEffect que j'utilise mais une TColorAnimation

Je vais télécharger tes nouveaux essais et voir ce qu'il pourrait bien manquer dans mon zip, mais cela attendra demain, le temps que je prenne mes quartiers dans mon lieu de villégiature

Serge

[SergioMaster]

Bonjour,

voici donc un nouveau zip (je suis parti du zip envoyé que j'ai ouvert dans problème, mais par précaution j'ai rajouté le .dproj etc...)

j'en ai profité pour gérer le OnClick de l'item et ajouté un style pour les boutons radios
la plus grosse difficulté au niveau de ces styles est de savoir à quels éléments il faut mettre la propriété HitTest à true ! il m'a fallu plusieurs tentatives pour trouver la bonne combinaison !

Ce qui me bloquait c'est l'utilisation d'éléments de styles (TStyle.....) par exemple TStyleTextObject plutôt que TLabel qui du coup font appel à des ressources (un fichier png) avec des zones et non un fichier .style

ce qui me reste un os à ronger :

Quels sont les équivalents de clbtnShadow, clbtnFace, clHighLight etc... soit les valeurs par défaut quand on utilise les styles ?

c'est à dire travailler sur ce fameux png AMHA pas avec FindStyleResource mais autre chose ...

[Invité]

Bonjour Serge,

+ = je n'arrive pas à le faire fonctionner ! Je trouve cela inquiétant. Je vais essayer sur un poste en Windows 10 avec l'édition Community...
Cependant en examinant le UnitStyle.fmx, dans les objets LisBoxItemx, je vois que StyleLookup = 'MonItem'. Mais où MonItem est-il décrit ? Dans le fmx, il n'y a que les 3 occurrences StyleLookUp. Donc où est stocké la description de 'MonItem' ?

Pour le click, OK mais est-ce que ton code affiche la barre de sélection dur l'Item choisi ? Peut-etre par MonItem mais...

A plus. Gilles

[SergioMaster]

Bonjour,

je n'arrive pas à le faire fonctionner

Je ne comprends pas pourquoi

Dans le fmx, il n'y a que les 3 occurrences StyleLookUp. Donc où est stocké la description de 'MonItem' ?

Dans le StyleBook, caché dans la séquence hexa très certainement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 object StyleBook1: TStyleBook
    Styles = <
      item
      end
      item
        Platform = 'Windows 10 Desktop'
        ResourcesBin = {
          464D585F5354594C4520322E350106074D6F6E4974656D03001206204C697374
          426F784974656D315374796C6531436....

MonItem (comme mon RadioGroup) est un style personnalisé, mais effectivement comme je développe sur un poste W10 (le seul que j'ai sous la main actuellement)
le "style" par défaut est donc bâti avec Windows 10 Desktopstyle.png . Mon style personnalisé, est inclus dans le FMX, c'est ce stylebook qu'il faut que tu comprenne, donc double-clic dessus pour voir ce qu'il en est

Mes opérations pour obtenir "MonItem" :
un clic droit un Item de la liste, modifier un style personnalisé
cela ouvre l'éditeur de style (et créé un stylebook sur ta forme)
sur la gauche tu obtiens dans l'arbre deux éléments (en admettant que tu ais cliquer sur le premier item : ListBox1Item1Style1 et Listbox1Item1CheckBoxStyle1
concentrons nous ensuite sur ListBox1Item1Style1
première chose, je le renomme (propriété StyleName) en MonItem
ensuite je rajoute un TRectangle et fait en sorte que celui-ci contienne tous les éléments (GlyphStyle, Text, Check, AccessoryMore,AccessoryCheckMark, AcessoryDetail) qui était dans le TLayout.
Je modifie les propriétés du TRectangle pour 1- cacher les bordures (sides=[]) 2- faire en sorte que le remplissage (Fill.color) soit transparent
J'ajoute ensuite un TColorAnimation et renseigne
PropertyName = Fill.Color
StartValue = couleur transparent
StopValue = couleur rouge
et les triggers
Trigger = ismouseover=true
TriggerInverse = ismouseover=false

je ferme alors la fenêtre de modification de style (ce qui sauvegarde dans le fmx les modifications)
je renseigne alors la propriété StyleLookup des 3 items (en saisissant le nom au clavier, l'IDE ne pouvant bien entendu pas me le fournir dans la boite de choix)
Et voilà, c'est tout ce qu'il y a à faire. Comme je l'ai déjà écrit il reste à tâtonner un peu sur le hittest (il doit certainement y avoir une hiérarchie mais je n'ai pas trouvé de documentation à ce sujet entre le style et la forme c'est plus que flou !)

N.B. la procédure est la même (et même plus simple) pour un radiobutton

Autre chose qui reste floue pour moi, jusqu'à présent je n'y faisait pas attention et utilisait au besoin les fichiers .style or, si l'on ne définit pas de style il semble que Delphi s'appuie sur ce fameux fichier .png et des zones définies. J'ai vu quelque part un truc à écrire dans le onCreate pour ce qui s'agit des autres OS sur lequel il faudra que je me penche.

Pour le click, OK mais est-ce que ton code affiche la barre de sélection dur l'Item choisi ?

Bien sûr puisque c'était ta demande initiale (j'ai mis du rouge pour les items survolés, et une sorte de vert pour les boutons radio)

j'ai inséré l'exe dans celui-ci
J'espére que ce lien, sur mon domaine dvp fonctionnera correctement

[Invité]

Bon alors résultat des tests de ton programme:

• sous windows 7 rien ne se passe
• sous windows 10 cela fonctionne normalement.

Et c'est bien ce que j'ai vu dans les Styles. J'ai vu dans un document que l'on pouvait affecter un Style à Windows (au sens générique et écrit tel quel) mais à chaque manipulation d'un élément de style, il me remplace ce "Windows" par "Windows 7" (parce que je travaille sous Windows 7). C'est galère au final s'il faut évoquer tous les cas des Windows existants.

J'ai essayé d'utiliser le style par défaut mais à chaque fois, il me crée un style Windows 7 comme toi, il te crée un style Windows 10... Bon je reverrai cela demain.

Cordialement. Gilles

[SergioMaster]

Bonjour,

J'ai enfin accès à mon 2°PC sous Windows Vista et donc, je pense que tu commences à me connaitre, je n'ai pas lâché le morceau comme un pitbull pugnace

J'ai donc récupéré le source sur ce PC et testé avec la version starter 10.2 installée sur ce dernier et, effectivement, cela ne fonctionne pas
jusqu'à ce que je fasse attention à un tout petit détail

jusqu'à présent, je modifiai, bien évidement, le style "Windows 10 Desktop" or en vérifiant, le style par défaut lui n'était pas modifié

première étape, j'ai fait un copier/coller à partir de la structure de style (entre nous soit dit c'est un peu compliqué avec la version starter puisque l'on passe par trois menu à partir du clic droit mais bon passons) et là (après application du style, ne pas oublier ça !) ça fonctionne

reste alors une seconde étape à franchir, sur mon poste W10 faire la même manipulation pour remplir le style personnalisé "default" puis supprimer ce qu'il y a dans le style personnalisé "Windows 10 Desktop" et voir ce qui se passe ... déception il faut que ce dernier reste ou alors, il faut carrément supprimer cette ressource (auquel cas cela fonctionne) ... il va falloir que je ronge cet os maintenant car je ne vois pas comment ce choix fonctionne ! si quelqu'un à une indication je suis preneur

[edit] j'ai voulu vérifié pour Androïd et là, déception, cela fait longtemps que je n'avais traficoté avec et :
- soit j'ai modifié la configuration de mon smartphone
- soit la mise à jour de Delphi à fait des siennes.
Toujours est-il que je n'ai plus la possibilité de compliler pour Androïd


Serge