FMX TButton Hintergrundfarbe

[luisk]

Zitat von Sir Rufo:

Das es klappt ein 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 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 von Sir Rufo:

Ein 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 von luisk:

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

Gibt's das such in Pascal?

Ja, kann man mit den Styles machen

[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;
         }