FMX TButton Hintergrundfarbe

[luisk]

Hallo,
wie kann ich bei einen FMX TButton die Hintergrundfarbe einstellen ?
Das sollte doch über StyleName gehen.
Gibt es dazu Beispiele ?

[luisk]

über Button RechtsClick im Formulareditor komme ich auf
"Benutzerdefinierten Stil bearbeiten" dann erscheint der Firemonkey Stil-Designer under im Objektinspektor erscheint "TButtonStyleTextObject"
mit recht vielen Eigenschaften.
Ich ändere das Attribut Color, betätige visuell binden
dann kommt der Live Binding Designer. Dort wähle ich meinen Button an
und betätige "Übernehmen und schließen", komme wieder in den Formulareditor.
Und was tut sich ? - nichts.

Wo liegen den die Geheimnisse bei dieser Technik ?

[Mavarik]

Zitat:

Zitat von luisk (Beitrag 1325424)

über Button RechtsClick im Formulareditor komme ich auf
"Benutzerdefinierten Stil bearbeiten" dann erscheint der Firemonkey Stil-Designer under im Objektinspektor erscheint "TButtonStyleTextObject"
mit recht vielen Eigenschaften.
Ich ändere das Attribut Color, betätige visuell binden
dann kommt der Live Binding Designer. Dort wähle ich meinen Button an
und betätige "Übernehmen und schließen", komme wieder in den Formulareditor.
Und was tut sich ? - nichts.

Wo liegen den die Geheimnisse bei dieser Technik ?

visuell binden?

Das hat nix mit dem Style zu tun...

Wenn Du den Styledesigner hast ist da ein Link für Hot,Focued,Normal und Pressed enthalten.

Diesen Link must Du auf den Bereich der Grafik legen, der Deine Farbe hat... (z.B.)

[luisk]

ist das irgendwo beschrieben ?
Ich finde "NormalColor", "HotColor" ...

Die Textfarbe kann ich damit umschalten.
Wie komme ich an den Hintergrund ?

[Mavarik]

OK dann hast Du kein Windows 10?

Das ist das "gleiche"...

Bei wird halt, wenn ich eine FMX App / Target Windows nehme der Win10 *.png als Style genommen...

[Sir Rufo]

Zitat:

Zitat von luisk (Beitrag 1325433)

ist das irgendwo beschrieben ?
Ich finde "NormalColor", "HotColor" ...

Die Textfarbe kann ich damit umschalten.
Wie komme ich an den Hintergrund ?

Wenn man den Hintergrund (engl. Background) ändern möchte, dann liegt es doch nahe wo zu schauen?

Code:

buttonstyle
- background
- glyphstyle
- text

[luisk]

also beim Button direkt finde nix bei den Eigenschaften mit B wie Background

wenn ich dann mit rechtsClick auf benutzerdefinierten Stil gehe,
komme ich auf einen neuen Editor mit nem Rechteck drin.
Wenn ich dieses Rechteck anklicke, kommt im Objektinspektor TButtonsstyleTextObject.
Klar, das ist der "Text"
Wo finde ich den Background ? (der fehlt mir in 2-facher Hinsicht)

[Sir Rufo]

Zitat:

Zitat von luisk (Beitrag 1325438)

kannst Du mal in ganzen Sätzen reden/schreiben ?

Gerne:

• Bau dir eine Schablone mit dem Wort background
• Öffne den Style-Editor für so einen Button
• Die eben gebaute Schablone verschiebst du nun so lange auf dem Monitor, bis du das Wort auf der Schablone gefunden hast. (Jetzt bist du schon ganz nah dran)
  Kleiner Hinweis: Schaue in das Struktur-Fenster (idR oben links)
  http://docwiki.embarcadero.com/RADSt...Style_Designer
• Klicke mit der Maus auf dieses gefundene Element unter der Schablone.
• Jetzt musst du den Blick wieder von der Schablone nehmen und in den OI schauen, dort sind ganz viele Einträge, die z.B. HotLink, NormalLink, etc. heißen

[luisk]

ich komme jetzt zunächst mal über benutzerdefinierten Style und "Struktur"
auf Background: TButtonstyleObject
Dort gibt es einen Normallink dort ist (TBitmaplinks) eingetragen
Darauf hin öffnet sich ein Bitmap-Links Editor
dort finde ich eine Schablone, wenn ich die über "Windows10 Desktopstyle.png" verschiebe und dann den Bitmap-Links-Editor
schließe, habe ich das Bitmuster auf dem Button.

und über + kann ich mir im Bitmap-Links Editor weitere Bitmaps bereitlegen.

[luisk]

und wie kann ich Beschreibungen dieser Art bearbeiten ?

Code:

object TStyleContainer
  object TLayout
    StyleName = 'RedRoundButtonStyle'
    DesignVisible = False
    Height = 52.000000000000000000
    Position.X = 424.000000000000000000
    Position.Y = 494.000000000000000000
    Width = 118.000000000000000000
    object TRoundRect
      StyleName = 'background'
      Align = alContents
      Fill.Kind = bkGradient
      Fill.Gradient.Points = <
        item
          Color = xFFD40F0F
          Offset = 0.108974359929561600
        end
        item
          Color = claWhite
          Offset = 1.000000000000000000
        end>
      Fill.Gradient.StartPosition.X = 0.500000000000000000
      Fill.Gradient.StartPosition.Y = 1.000000000000000000
      Fill.Gradient.StopPosition.X = 0.499999970197677600
      Fill.Gradient.StopPosition.Y = 0.000000000000000000
      Height = 52.000000000000000000
      Width = 118.000000000000000000
      object TInnerGlowEffect
        StyleName = 'InnerGlowEffect'
        Softness = 0.400000005960464500
        GlowColor = xFF4F4848
        Opacity = 0.899999976158142100
        Trigger = 'IsPressed=true'
      end
    end
    object TText
      StyleName = 'text'
      Align = alContents
      Color = claWhite
      Height = 52.000000000000000000
      Text = 'AAA'
      Width = 118.000000000000000000
    end
  end
object TLayout
    StyleName = 'BlueRoundButtonStyle'
    DesignVisible = False
    Height = 52.000000000000000000
    Position.X = 424.000000000000000000
    Position.Y = 494.000000000000000000
    Width = 118.000000000000000000
    object TRoundRect
      StyleName = 'background'
      Align = alContents
      Fill.Kind = bkGradient
      Fill.Gradient.Points = <
        item
          Color = xFFD40F0F
          Offset = 0.108974359929561600
        end
        item
          Color = claWhite
          Offset = 1.000000000000000000
        end>
      Fill.Gradient.StartPosition.X = 0.500000000000000000
      Fill.Gradient.StartPosition.Y = 1.000000000000000000
      Fill.Gradient.StopPosition.X = 0.499999970197677600
      Fill.Gradient.StopPosition.Y = 0.000000000000000000
      Height = 52.000000000000000000
      Width = 118.000000000000000000
      object TInnerGlowEffect
        StyleName = 'InnerGlowEffect'
        Softness = 0.400000005960464500
        GlowColor = xFF4F4848
        Opacity = 0.899999976158142100
        Trigger = 'IsPressed=true'
      end
    end
    object TText
      StyleName = 'text'
      Align = alContents
      Color = claWhite
      Height = 52.000000000000000000
      Text = 'AAA'
      Width = 118.000000000000000000
    end
  end
end

[Sir Rufo]

Das ist der Inhalt einer Style-Datei, die man mit dem Style-Editor bearbeiten kann, wenn man diese Style-Datei in den Style-Editor lädt.

http://docwiki.embarcadero.com/RADSt...reMonkey-Stils

[luisk]

Danke, muss ich mir auch mal anschauen.

[luisk]

wenn schon OOP denn schon:

Delphi-Quellcode:

  CL_Button = class ( TRectangle )
  private
      :
      :
  public
      lbl_Text:TLabel;
      constructor create();
      destructor destroy();
      :
      :
  end;

[Sir Rufo]

Und diese salbungsvollen Worte mit Code sollen uns jetzt was sagen? :gruebel:

[luisk]

ich bau mir ne eigene Klasse CL_Button aus TRectangle und TLabel als Alternative
TRectangle ist sehr flexibel. Damit kann man ja auch Bilder darstellen.

[Sir Rufo]

Sollte man so zwar nicht machen, aber wenn du damit klar kommst dann viel Erfolg

[Mavarik]

Oder Du nimmst eine Bitmap und malst den Button selber mit Setpixel.

[luisk]

das klappt schon.
So, wie das hier auch: Inverse Kinematik Delphi 6 OpenGL 2001

[luisk]

Zitat:

Zitat von Mavarik (Beitrag 1325485)

Oder Du nimmst eine Bitmap und malst den Button selber mit Setpixel.

das ist ja wohl kein Vergleich :!:
TRectangle ist hocheffizient und nach allen Richtungen hin flexibel.
und TLabel beherrscht die Fonts
Allerdings, das mit dem Styleeditor muss ich mir mal noch ansehen.

[Sir Rufo]

Das es klappt ein

Delphi-Quellcode:

TRectangle

als Schaltfläche zu verwenden habe ich auch nicht bestritten, aber wenn man schon mit OOP um sich wirft, dann sollte man sich doch fragen, ob es nicht besser ist alle Schaltflächen von einer Basis abzuleiten.

Dann wird auch ein Schuh daraus.

[luisk]

Zitat:

Zitat von Sir Rufo (Beitrag 1325490)

Das es klappt ein

Delphi-Quellcode:

TRectangle

als Schaltfläche zu verwenden habe ich auch nicht bestritten, aber wenn man schon mit OOP um sich wirft, dann sollte man sich doch fragen, ob es nicht besser ist alle Schaltflächen von einer Basis abzuleiten.

Dann wird auch ein Schuh daraus.

Das wird ja dann auch meine Standardschaltfläche.

[luisk]

CL_Button mit Farbverlauf
on_MouseEnter/Leave schaltet die Farben um. (Farben werden noch dynamisch gestaltet)

Delphi-Quellcode:

//-------------------------------------------------------------------------
constructor CL_Button.create(in_Owner:TComponent);
begin
    inherited create(in_Owner);
    
    onMouseEnter:=self.on_MouseEnter;
    onMouseLeave:=self.on_MouseLeave;


    lbl_Text := TLabel.Create(self);
    lbl_Text.Parent:=self;
    lbl_Text.Align := lbl_Text.Align.alClient;

     Fill.Kind:=  Fill.Kind.bkGradient;
     Fill.Gradient.Points[0].Color:=  $FF4FEB2E ;
     Fill.Gradient.Points[0].Offset:=  0 ;
     Fill.Gradient.Points[1].Color:=   claWhite ;
     Fill.Gradient.Points[1].Offset:=  1.0 ;
     Fill.Gradient.StartPosition.X := 0.5;
     Fill.Gradient.StartPosition.Y := 1.0;
     Fill.Gradient.StopPosition.X := 0.5;
     Fill.Gradient.StopPosition.Y := 0.0;
     GradientAnimation1:= TGradientAnimation.create(self);
     GradientAnimation1.Duration := 0.2;
     GradientAnimation1.PropertyName := 'Stroke.Gradient';
     GradientAnimation1.StartValue.Points[0].Color:=$FF90E959;
     GradientAnimation1.StartValue.Points[0]. Offset := 0.0;
     GradientAnimation1.StartValue.Points[1].Color:=  claWhite;
     GradientAnimation1.StartValue.Points[1].Offset:= 1.0;
     GradientAnimation1.StartValue.StartPosition.X := 0.5;
     GradientAnimation1.StartValue.StartPosition.Y := 1.0;
     GradientAnimation1.StartValue.StopPosition.X := 0.5;
     GradientAnimation1.StartValue.StopPosition.Y := 0.0;
     GradientAnimation1.StopValue.Points[0].Color := claBlack;
     GradientAnimation1.StopValue.Points[0].Offset := 0.0;
     GradientAnimation1.StopValue.Points[1].Color := claWhite ;
     GradientAnimation1.StopValue.Points[1].Offset:=   1.0;
end;
//-------------------------------------------------------------------------

Vorlage:

Code:

 object Rectangle2: TRectangle
          Align = Client
          Fill.Kind = Gradient
          Fill.Gradient.Points = <
            item
              Color = xFF4FEB2E
              Offset = 0.000000000000000000
            end
            item
              Color = claWhite
              Offset = 1.000000000000000000
            end>
          Fill.Gradient.StartPosition.X = 0.500000000000000000
          Fill.Gradient.StartPosition.Y = 1.000000000000000000
          Fill.Gradient.StopPosition.X = 0.499999970197677600
          Fill.Gradient.StopPosition.Y = 0.000000000000000000
          Size.Width = 136.000000000000000000
          Size.Height = 49.000000000000000000
          Size.PlatformDefault = False
          OnClick = Rectangle2Click
          OnMouseEnter = Rectangle2MouseEnter
          object GradientAnimation1: TGradientAnimation
            Duration = 0.200000002980232200
            PropertyName = 'Stroke.Gradient'
            StartValue.Points = <
              item
                Color = xFF90E959
                Offset = 0.000000000000000000
              end
              item
                Color = claWhite
                Offset = 1.000000000000000000
              end>
            StartValue.StartPosition.X = 0.500000000000000000
            StartValue.StartPosition.Y = 1.000000000000000000
            StartValue.StopPosition.X = 0.499999970197677600
            StartValue.StopPosition.Y = 0.000000000000000000
            StopValue.Points = <
              item
                Color = claBlack
                Offset = 0.000000000000000000
              end
              item
                Color = claWhite
                Offset = 1.000000000000000000
              end>
          end
        end

[luisk]

kann man bei TRoundRect eigentlich die Radien ändern
und den Rahmen wegnehmen wie bei TRectangle ?
------------------------------------------------

mit dem PaintEvent ins Canvas (.Fill.Gradient) zeichnen,
sollte wohl die beste Flexibilität bringen.

[Sir Rufo]

Ein

Delphi-Quellcode:

TRoundRect

beschreibt ein Rechteck, wo die Hälfte der kürzesten Seite den Radius der Ecken bestimmt => Sind Breite und Höhe gleich erhalte ich einen Kreis.

[luisk]

Zitat:

Zitat von Sir Rufo (Beitrag 1325533)

Ein

Delphi-Quellcode:

TRoundRect

beschreibt ein Rechteck, wo die Hälfte der kürzesten Seite den Radius der Ecken bestimmt => Sind Breite und Höhe gleich erhalte ich einen Kreis.

Diese Einschränkung ist mir auch aufgefallen.

sowas bräuchte man:
https://css-tricks.com/examples/ButtonMaker/

Gibt's das such in Pascal?
man brächte eine Klasse, die CSS nachbildet.

[Sir Rufo]

Zitat:

Zitat von luisk (Beitrag 1325540)

sowas bräuchte man:
https://css-tricks.com/examples/ButtonMaker/

Gibt's das such in Pascal?

Ja, kann man mit den Styles machen :roll:

[luisk]

gibt's dazu ne Demo oder ein Editor ?

bei dem Bsp. in Css stellt man ja einfach die Radien ein: border-top-left-radius:9px;

Code:

   a.cssButton_X {
              width: auto;
              color: #000000;
              background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b8e356), color-stop(1, #a5cc52));
         background:#66CD00;
         font-family:Arial;
         font-size:10px;
         font-weight:bold;
         -moz-border-radius-topleft:9px;
                   -webkit-border-top-left-radius:9px;
                   border-top-left-radius:9px;   
         padding: 1px 4px 1px 4px;
         margin: 1px 1px 1px 1px;
         font-weight: bold;
         font-size: 12px;
         text-decoration: none;
         text-align: center;
         border:0px outset ;
         border-color:#ffffff;
         }

[luisk]

gibt es sowas für Firemonkey ?

http://www.bestcssbuttongenerator.com/

[Mavarik]

Ich finde meine Button ganz nett...

Vielleicht ein bischen Oldschool!

[luisk]

ok, und mit welchem Delphi-Editor macht man sowas ?
Das hat doch nichts mit der ursprünglichen Schablone über dem .png zu tun oder ?

[Mavarik]

Zitat:

Zitat von luisk (Beitrag 1325618)

Das hat doch nichts mit der ursprünglichen Schablone über dem .png zu tun oder ?

Doch klar!

[luisk]

ok, kannst Du mit noch erklären in welcher Art und Weise ?
Dein Button besteht aus einem 3D-Zylinder und 2 Halbkugeln mit entsprechender Beleuchtung
und Normalenvektoren. Sowas macht man mit OpenGL oder DirectX

Wie hast Du diese erstellt ?

[Mavarik]

Zitat:

Zitat von luisk (Beitrag 1325621)

Wie hast Du diese erstellt ?

Styleeditor -> Grafik -> Link

Wie geschrieben und erklärt in:
#3 (von mir)
#6 (Sir Rufo)
#8 (Sir Rufo)
#11 (Sir Rufo)
#26 (Sir Rufo)

[luisk]

jetzt mal Klartext ?
Wie wird das Bitmap erstellt ?
Extern und dann importiert, oder wird das ganze in einem Delphi-Editor erstellt ?
(Sowas absurdes, wie diese Verschiebeschablone hätte ich nicht erwartet)

Hier bei CSS werden die Buttons realtime erstellt
http://www.bestcssbuttongenerator.com/

Wie sieht das in bei Delphi FMX aus ?
hier:
https://www.youtube.com/watch?v=Vp2UwlStRyE
https://www.youtube.com/watch?v=4mQGNjIf3_Q
unglaublich :cyclops:

[luisk]

Zitat:

Zitat von Mavarik (Beitrag 1325622)

Zitat:

Zitat von luisk (Beitrag 1325621)

Wie hast Du diese erstellt ?

Styleeditor -> Grafik -> Link

Wie geschrieben und erklärt in:
#3 (von mir)
#6 (Sir Rufo)
#8 (Sir Rufo)
#11 (Sir Rufo)
#26 (Sir Rufo)

alles Bla Bla Bla nach Rumpelstilzchen Art.

Wie bekomme ich nun Farbe in den Hintergrund eines Buttons ?
1. Button in Formular
2. REchtsClick: Benutzerdefinierten Stil bearbeiten -> Editor ohne Überschift geht auf
3. Struktureditor aufmachen-> button1style1->Background anwählen
4. und jetzt wird's lustig: Von der Toolpalette TRectangle, oder TEllipse rüberziehen in Background:TButtonstyleobject
Von der Toolpalette in den Zusatzeditor geht nicht.

ich brech ab.
Und sowas im Jahre 2015, ich hatte immer gedacht, dass sich Delphi auch ergonomisch weiterentwickeln wird - unglaublich.

[Mavarik]

Zitat:

Zitat von luisk (Beitrag 1325634)

alles Bla Bla Bla nach Rumpelstilzchen Art.

Eigentlich sollte Dir hier keiner mehr antworten, nach diesem Kommentar...

Zitat:

Zitat von luisk (Beitrag 1325634)

ich brech ab.
Und sowas im Jahre 2015, ich hatte immer gedacht, dass sich Delphi auch ergonomisch weiterentwickeln wird - unglaublich.

Tja, Kaum macht man richtig - schon funktioniert es...

Für alle anderen : Ein Beispiel.

[luisk]

Zitat:

Zitat von Mavarik (Beitrag 1325638)

Zitat:

Zitat von luisk (Beitrag 1325634)

alles Bla Bla Bla nach Rumpelstilzchen Art.

Eigentlich sollte Dir hier keiner mehr antworten, nach diesem Kommentar...

Zitat:

Zitat von luisk (Beitrag 1325634)

ich brech ab.
Und sowas im Jahre 2015, ich hatte immer gedacht, dass sich Delphi auch ergonomisch weiterentwickeln wird - unglaublich.

Tja, Kaum macht man richtig - schon funktioniert es...

Für alle anderen : Ein Beispiel.

irreführende Wortfetzen sind nun mal keine Antwort !
Deine Demo gibt ja nun die Antwort: Da werden nur Bitmaps hin und hergeschoben, die extern erstellt wurden.

Das ist doch technisch weit unter dem Niveau, wie es bei CSS realisiert wurde !
Es ist traurig, wo die objektorientierte Programmierung nach 25 Jahren gelandet ist.
Wozu muss ein Informatiker denn höhere Mathematik bis zum Exzess pauken ?
Dieses ganze Grafik-Gedöns müssten heutzutage doch Grafikkarten in einer einheitlichen API basierend
auf OpenGL und Direct 3D anbieten.
Ein Niveau wie bei der Sprite-Programmierung beim C-64 in den 80er Jahren.
https://www.google.de/?gws_rd=ssl#q=sprites+c64
https://www.youtube.com/watch?v=dSwf8wGOSr4

[Mavarik]

Zitat:

Zitat von luisk (Beitrag 1325640)

Deine Demo gibt ja nun die Antwort: Da werden nur Bitmaps hin und hergeschoben, die extern erstellt wurden.

Die Antwort hast Du schon in #3 von mir bekommen!

Zitat:

Zitat von Mavarik (Beitrag 1325428)

Diesen Link must Du auf den Bereich der Grafik legen, der Deine Farbe hat... (z.B.)

Zitat:

Zitat von luisk (Beitrag 1325640)

Das ist doch technisch weit unter dem Niveau, wie es bei CSS realisiert wurde !
Es ist traurig, wo die objektorientierte Programmierung nach 25 Jahren gelandet ist.

Ich habe die FMX-RTL nicht programmiert. Ich gebe "nur" Anleitungen wie man damit umgehen muss. Natürlich kann man auch die Daten als Vectoren für die GPU zusammen stellen. Auch das kann Firemonkey.

Du kannst auch eigene Shader bauen... Aber das ist eigentlich nicht nötig...

[luisk]

und womit hast Du dann Deine Bitmaps mit den Lichteffekten erstellt ?

übrigens: der Roboter auf den Bildern ist aus einer Simulation, die vor 15 Jahren von Grund auf mit Delphi 6
und OpenGL programmiert wurde. ( 6 Rotationsachsen - inverse Kinematik ).

[luisk]

Zitat:

Zitat von Mavarik (Beitrag 1325622)

Zitat:

Zitat von luisk (Beitrag 1325621)

Wie hast Du diese erstellt ?

Styleeditor -> Grafik -> Link

Wie geschrieben und erklärt in:
#3 (von mir)
#6 (Sir Rufo)
#8 (Sir Rufo)
#11 (Sir Rufo)
#26 (Sir Rufo)

Maverik, Du hast Deine Buttons also auch mit solch einem Buttongenerator erstellt,
und dann eingelesen:
http://www.bestcssbuttongenerator.com/