Blog de Serge Girard (aka SergioMaster)

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é.





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.



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


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.