FMX TButton Hintergrundfarbe

[Sir Rufo]

Also man kann mit den Styles so etwas bauen

Delphi-Quellcode:

unit Unit1;

interface

uses
  System.SysUtils, System.Types, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs,
  FMX.Controls.Presentation, FMX.StdCtrls;

type
  TForm1 = class( TForm )
    Button1: TButton;
    StyleBook1: TStyleBook;
    procedure Button1Click( Sender: TObject );
  private
    FGradient: TGradient;
  public
    procedure AfterConstruction; override;
    procedure BeforeDestruction; override;
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

uses
  System.Rtti, System.UITypes;

procedure TForm1.AfterConstruction;
begin
  inherited;
  FGradient        := TGradient.Create;
  FGradient.Color  := TAlphaColors.White;
  FGradient.Color1 := TAlphaColors.Crimson;
end;

procedure TForm1.BeforeDestruction;
begin
  FGradient.Free;
  inherited;
end;

procedure TForm1.Button1Click( Sender: TObject );
begin
  case Button1.Tag of
    1:
      begin
        Button1.StylesData[ 'background.Fill.Kind' ]    := TValue.From( TBrushKind.Solid );
        Button1.StylesData[ 'background.Fill.Color' ]   := TAlphaColors.Crimson;
        Button1.StylesData[ 'background.Stroke.Color' ] := TAlphaColors.Crimson;
        Button1.StylesData[ 'text.FocusedColor' ]       := TAlphaColors.Antiquewhite;
        Button1.StylesData[ 'text.HotColor' ]           := TAlphaColors.Antiquewhite;
        Button1.StylesData[ 'text.NormalColor' ]        := TAlphaColors.Antiquewhite;
        Button1.StylesData[ 'text.PressedColor' ]       := TAlphaColors.Antiquewhite;
        Button1.StylesData[ 'background.XRadius' ]      := 10;
        Button1.StylesData[ 'background.YRadius' ]      := 10;
        Button1.Tag                                     := 0;
      end;
    0:
      begin
        Button1.StylesData[ 'background.Fill.Kind' ]     := TValue.From( TBrushKind.Gradient );
        Button1.StylesData[ 'background.Fill.Gradient' ] := FGradient;
        Button1.StylesData[ 'background.Fill.Color' ]    := TAlphaColors.Crimson;
        Button1.StylesData[ 'background.Stroke.Color' ]  := TAlphaColors.Crimson;
        Button1.StylesData[ 'text.FocusedColor' ]        := TAlphaColors.Black;
        Button1.StylesData[ 'text.HotColor' ]            := TAlphaColors.Black;
        Button1.StylesData[ 'text.NormalColor' ]         := TAlphaColors.Black;
        Button1.StylesData[ 'text.PressedColor' ]        := TAlphaColors.Black;
        Button1.StylesData[ 'background.XRadius' ]       := 3;
        Button1.StylesData[ 'background.YRadius' ]       := 3;
        Button1.Tag                                      := 1;
      end;
  end;

end;

end.

und schaltet zwischen und um.

Dazu braucht man nur einen eigenen Style für den Button, wo man als Background ein TRectangle hinlegt.
(An den Hintergrund habe ich noch zwei Animationen geklatscht für MouseOver (Shadow) und Pressed (InnerGlow) damit es etwas lebendiger aussieht)

[luisk]

ok, Danke.
interessant, dass man die Radien bei diesen Styles setzen kann.

Ich habs mal getestet:

Formular mit Button angelegt,
Code von Dir übernommen,
Rechts-Click auf Button1 -> Benutzerdefinierten Stiel bearbeiten
Struktureditor angewählt
TRectangle in Background gezogen
background im Objektinspektor als "background" benamt

übernehmen u. schließen

getestet.

es tut sich aber leider nichts. Die cases werden aber durchlaufen.

Dann hab ich noch im beim Background Style das Click event gesetzt. Dabei tut sich auch nichts.

[Sir Rufo]

Liegt evtl. daran, dass ich den originalen Background gelöscht habe und dann ein TRectangle dort platziert habe und in background umbenannt.

Ausschlaggebend ist der StyleName!

Hier der Style:

Code:

object TStyleContainer
  object TLayout
    StyleName = 'RectangleButtonStyle'
    Position.X = 737.000000000000000000
    Position.Y = 486.000000000000000000
    Size.Width = 80.000000000000000000
    Size.Height = 22.000000000000000000
    Size.PlatformDefault = False
    Visible = False
    TabOrder = 0
    object TRectangle
      StyleName = 'background'
      Align = Contents
      Fill.Color = claCrimson
      HitTest = False
      Size.Width = 80.000000000000000000
      Size.Height = 22.000000000000000000
      Size.PlatformDefault = False
      Stroke.Color = xFFFF4343
      XRadius = 10.000000000000000000
      YRadius = 10.000000000000000000
      object TInnerGlowEffect
        StyleName = 'PressedStyle'
        Softness = 0.400000005960464400
        GlowColor = claDimgray
        Opacity = 0.899999976158142100
        Trigger = 'IsPressed=true'
        Enabled = False
      end
      object TShadowEffect
        StyleName = 'HotStyle'
        Distance = 3.000000000000000000
        Direction = 45.000000000000000000
        Softness = 0.300000011920929000
        Opacity = 0.600000023841857900
        ShadowColor = claBlack
        Trigger = 'IsMouseOver=true'
        Enabled = False
      end
    end
    object TGlyph
      StyleName = 'glyphstyle'
      Margins.Left = 3.000000000000000000
      Margins.Top = 2.000000000000000000
      Margins.Right = 1.000000000000000000
      Margins.Bottom = 2.000000000000000000
      Align = Left
      Size.Width = 16.000000000000000000
      Size.Height = 16.000000000000000000
      Size.PlatformDefault = False
    end
    object TButtonStyleTextObject
      StyleName = 'text'
      Align = Client
      Locked = True
      Margins.Left = 1.000000000000000000
      Margins.Top = 2.000000000000000000
      Margins.Right = 1.000000000000000000
      Margins.Bottom = 2.000000000000000000
      Size.Width = 78.000000000000000000
      Size.Height = 18.000000000000000000
      Size.PlatformDefault = False
      ShadowVisible = False
      HotColor = claAntiquewhite
      FocusedColor = claAntiquewhite
      NormalColor = claAntiquewhite
      PressedColor = claAntiquewhite
    end
  end
end

[luisk]

Danke für die Tipps.
habs probiert: Runtime Error
kannst Du mal dein kleines Demoprojekt reinstellen ?
( hab noch andere Dinge zu tun )

[luisk]

Zitat von Sir Rufo:

Liegt evtl. daran, dass ich den originalen Background gelöscht habe und dann ein TRectangle dort platziert habe und in background umbenannt.

Ausschlaggebend ist der StyleName!

Das Umschalten der Styles läuft bei mit jetzt, wenn ich den
Event über einen andern Button auslöse.

Der Event auf Button1 reagiert nicht.
Lege ich den Event zusätzlich auf TRectangele im Style, dann bekomme ich einen Laufzeitfehler.

[Harry Stahl]

Ich habs mal so getestet, wie von Sir Rufo beschrieben, funktioniert.

Kleiner Tipp zur Vorgehensweise: Du kannst den Style-Text hier einfach kopieren und als Style-Datei speichern und dann in ein Stylebook (über den Style-Editor) laden und damit testen.

Wenn Du den Style einem vorhandenen Stylebook hinzufügen möchtest, kannst Du das bestehende Stylebook als Textdatei speichern, dort manuell den neuen Styletext hinzufügen (natürlich ohne die Äußeren "TStyleContainer" Begerenzungen) und die so erweiterte Datei wieder ganz in Dein Stylebook laden.

Sicherungskopien Deiner Projektdateien sind bei solchen Aktionen allerdings immer zu empfehlen.

[Sir Rufo]

Wenn ein Style-Element den HitTest = True hat, dann klaut dieses Style-Element natürlich den Klick-Event und den braucht so ein Button aber um zu funktionieren.

Ergo:

Code:

object TStyleContainer
  object TLayout
    StyleName = 'RectangleButtonStyle'
    object TRectangle
      StyleName = 'background'
      HitTest = False // <- Da

[luisk]

ok, Danke.
So geht´s es lag an dem HitTest.

Allerdings hab ich keine Ahnung, wo der Style-Editor sein soll.
(Fehlt der bei der 30T-Testversion.)

[Harry Stahl]

Zitat von luisk:

ok, Danke.
So geht´s es lag an dem HitTest.

Allerdings hab ich keine Ahnung, wo der Style-Editor sein soll.
(Fehlt der bei der 30T-Testversion.)

Einfach z.B. auf ein Style-Book doppelt klicken, dann öffnet sich der Style-Editor.

Oder mit der rechten Maustaste auf eine Komponente und dann "Benutzerdefinierten Style bearbeiten" (oder Standard) auswählen.

Anliegend ein Screenshot vom Editor von Delphi 10 Seattle. In Delphi 10 hat der sich deutlich verbessert, kann man schon fast als brauchbar bezeichnen.

[luisk]

Zitat von Harry Stahl:

, kann man schon fast als brauchbar bezeichnen.

ok, die Sicht kenne ich, hab mir mehr drunter vorgestellt.
d.h. man baut das Ganze als Objektbaum(Klassenbaum) über den Struktureditor auf.
Und wie kommt man auf die Textsicht ?