IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Voir le flux RSS

Blog de Serge Girard (aka SergioMaster)

[FMX] Boutons et glyphe : Astuces

Noter ce billet
par , 07/09/2022 à 17h40 (566 Affichages)
En avançant sur le sujet des composants prenant en compte le format SVG, je suis en train d'établir les différences entre le TPath et les composants tiers Skia4Delpi et SVGIconImageList.

Au cours de mes essais, je me suis aperçu que le composant SVGIconImageList pouvait être utilisé comme liste d'images à associer à un TSpeedButton ou TButton. Intéressant, mais l'icône est vraiment petite et donc, visuellement inefficace.

La première idée qui m'est venue à l'esprit : créer un style personnalisé.

Nom : Capture.PNG
Affichages : 30
Taille : 16,6 Ko

Nom : Capture.PNG
Affichages : 4775
Taille : 29,9 Ko

Avantage : la visibilité au niveau du design. Plus inattendu, car j'avais créé le style à partir d'un stylelookup prédéfini, le glyphe s'il existe dans la liste écrase l'icône prédéfinie. Toutefois, si l'index de l'image est hors limites, l'icône prédéfinie reste visible.

Nom : Capture_1.PNG
Affichages : 46
Taille : 1,6 Ko

Inconvénient : la création nécessaire du TStyleBook sur la forme. Une parade à cet inconvénient quand on a plusieurs formes dans l'application : mettre ce style personnalisé dans un module de données (TDataModule) mais l'on y perd souvent la visualisation au moment du design (en particulier si le DataModule n'est pas ouvert dans l'IDE).

Du coup, d'autres solutions ont commencé à germer.

J'ai d'abord tenté l'approche de l'évènement OnStyleLookup du composant

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
procedure TForm31.SpeedButton2ApplyStyleLookup(Sender: TObject);
var Align : TValue;   // méthode styledata
    aGlyph : TGlyph;
    aText : TText;
begin
// méthode styledata. utiliser StyleData a été classée comme obsolète dans certaines versions
//TValue.Make(Ord(TAlignLayout.Client),TypeInfo(TAlignLayout),Align);
//TSpeedButton(Sender).StylesData['glyphstyle.align']:=Align;
//TSpeedButton(Sender).StylesData['text.visible']:=False;

// méthode findStyleResource
(Sender as TSpeedButton).FindStyleResource<TGlyph>('glyphstyle',aGlyph);
if assigned(aglyph) then aGlyph.Align:=TalignLayout.Contents;
(Sender as TSpeedButton).FindStyleResource<TText>('text',aText);
if assigned(aText) then aText.Visible:=False;
end;
Puis j'ai osé modifier directement le style en cours au sein d'un module de données (une première pour moi).
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
{$R *.dfm}
uses FMX.Styles, FMX.StdCtrls, FMX.Objects, FMX.ImgList;

procedure TDataModule.DataModuleCreate(Sender: TObject);
var  sb,obj: TFmxObject;
     aGlyph : TGlyph;
     aText : TText;
begin
  sb:=TStyleManager.ActiveStyle(nil);
  if assigned(sb) then begin
    obj:=sb.FindStyleResource('icondpeedbutton');
    if not assigned(obj) then
      begin
        obj:=sb.FindStyleResource('toolbutton',true); // duplication d'un style prédéfini. Utilisez un style avec glyphe pour obtenir une icône par défaut  
        if Assigned(obj) then
           begin
            aGlyph:= obj.FindStyleResource('glyphstyle') as TGlyph;
            aGlyph.Align:=TalignLayout.Client;
            aText:= obj.FindStyleResource('text') as TText;
            aText.Visible:=false;
            obj.StyleName:='icondpeedbutton';
            sb.AddObject(obj);
           end;
      end;
  end;
end;
Voici en image le résultat, comparant les différentes approches et le rendu au moment du design
Nom : Capture_2.PNG
Affichages : 48
Taille : 53,8 Ko

Pour l'instant mes tests n'ont été réalisés que sur Windows et quelques styles fournis.
Dans un prochain billet, j'espère bien pousser plus loin.
Dans ma liste des choses à tenter :
  • Mixer glyphe et texte à la manière de boutons Office;
  • Jouer avec deux styles.

N'hésitez pas à me proposer d'autres essais.

Envoyer le billet « [FMX] Boutons et glyphe : Astuces » dans le blog Viadeo Envoyer le billet « [FMX] Boutons et glyphe : Astuces » dans le blog Twitter Envoyer le billet « [FMX] Boutons et glyphe : Astuces » dans le blog Google Envoyer le billet « [FMX] Boutons et glyphe : Astuces » dans le blog Facebook Envoyer le billet « [FMX] Boutons et glyphe : Astuces » dans le blog Digg Envoyer le billet « [FMX] Boutons et glyphe : Astuces » dans le blog Delicious Envoyer le billet « [FMX] Boutons et glyphe : Astuces » dans le blog MySpace Envoyer le billet « [FMX] Boutons et glyphe : Astuces » dans le blog Yahoo

Mis à jour 16/09/2022 à 09h43 par SergioMaster

Catégories
Programmation , Delphi , FMX

Commentaires