Anwenden mehrerer FMX Styles

[UliBru]

Ich möchte/muss mich mal mit FMX befassen. Habe dazu eine Oberfläche mit einem gewählten Style erstellt.
Nun gefällt mir aber nicht die Darstellung einer ProgressBar. Es gibt keine Möglichkeit die Farbe zu ändern. Eine Gauge gibt es bei FMX nicht.

Also kommt mir der Gedanke, dass man ja vielleicht für die Progressbar einen anderen Style verwenden könnte.
Doch wie macht man das?

Muss man dazu ein zweites Stylebook verwenden? Wie weist man dem dann einen anderen Style zu und wie sagt man der Progressbar schon zur Entwurfszeit, dass sie diesen Style verwenden soll? Wie kann man erkennen, welches Stylebook welchen Style beinhaltet?

Geht das überhaupt?

- Uli

[Union]

Bei XE6 gibt es Tintcolor falls es nur um die Basisfarbe geht. Ansonsten legst Du ein Stylebook an, in dem nur der geänderte und evtl. umbenannte Style des Progressbar enthalten ist. Mehrere Stylebooks zur selben Zeit im selben Formular geht allerdings nicht. Nachschauen wo sich was befindet kannst Du indem Du das Stylebook bearbeitest.

[UliBru]

Zitat von Union:

Bei XE6 gibt es Tintcolor falls es nur um die Basisfarbe geht. Ansonsten legst Du ein Stylebook an, in dem nur der geänderte und evtl. umbenannte Style des Progressbar enthalten ist. Mehrere Stylebooks zur selben Zeit im selben Formular geht allerdings nicht. Nachschauen wo sich was befindet kannst Du indem Du das Stylebook bearbeitest.

Die Antwort verstehe ich nicht wirklich.
- Tintcolor gibt es nur für wenige Controls, nicht für Progressbar.
- Man kann ja im Formular mehrere Stylebooks ablegen. Wie ich jedoch einem Stylebook so definiere, dass es nur die geänderte Progressbar enthält, ist mir nicht klar. Ebenfalls nicht, wie man dann einer Progressbar eben dieses Stylebook zuweist.

Was seltsamerweise klappt, aber auch ein seltsames Verhalten aufweist: ich lade einen Style, welcher dem ganzen Formular zugewiesen wird. Dann selektiere ich ein Control, hier Progressbar und wende Edit Custom Style an. Dann im Style-Editor einen neuen Style addieren und anwenden. Damit hat das Formular den neuen Style, die Progressbar hat aber den vorherigen Style beibehalten. Wenn das umgekehrt wäre, also die Progressbar den neuen Style hätte und das Formular den alten Style beibehalten würde, dann wäre alles machbar. Dann könnte man das auch bei einer weiteren Control anwenden. Auf jeden Fall zeigt das auf, dass ein Mischen von Styles machbar sein sollte. Aber wo Delphi sich das nun merkt, habe ich auch nicht rausgefunden. Im Quelltext des Formulars ist nicht nichts zu finden, auch nicht im Styleeditor.

- Uli

[Sunec]

Du kannst in deinem Stylebook einen 2te StyleContainer (Progressbar) anlegen.

Um die Farbe zu ändern kann man beispielsweise ein Rectangle (color) hinter den jeweiligen Indicator legen. (Bild 1)


Das Resultat ist in Bild 2 zu sehen.

[UliBru]

Zitat von Sunec:

Du kannst in deinem Stylebook einen 2te StyleContainer (Progressbar) anlegen.

Um die Farbe zu ändern kann man beispielsweise ein Rectangle (color) hinter den jeweiligen Indicator legen. http://s18.postimg.org/k1014d4h3/farbepbar.jpg

Das Resultat: http://s7.postimg.org/gsx5thrux/2pbar.jpg

Danke, ja sowas geht. Wobei es mir nicht nur um die Progressbar alleine geht. Klar, die könnte man denn wohl auch selbst definieren.
Was aber, wenn man eben eine Checkbox mit anderem Style besser findet, als die des augenblicklichen Styles. Muss man dann wieder alles selbst neu entwerfen?

- Uli

[Union]

Du kannst auch im Event OnApplyStyle in den Style eingreifen.

@sunec: Bitte die Bilder hier hochladen und nicht auf einen externen Provider. Man sieht sie sonst nicht als Vorschau und falls die weg sind haben "spätere Generationen" keinen Zugriff mehr darauf.

[Sunec]

Zitat von Union:

Du kannst auch im Event OnApplyStyle in den Style eingreifen.

@sunec: Bitte die Bilder hier hochladen und nicht auf einen externen Provider. Man sieht sie sonst nicht als Vorschau und falls die weg sind haben "spätere Generationen" keinen Zugriff mehr darauf.

Habe die Bilder mal neu hochgeladen. Wurde mir in einem anderen Thread auch schon ans Herz gelegt


Als weitere Alternative kannst man sich auch eine eigenes Stylebook aus den bereits vorhandenen Styles "zusammenkopieren".

Die Stylebooks sind ähnlich einer XML Datei aufgebaut und so lassen sich die verschiedenen Komponenten-Styles miteinander vereinen.

Im Beispiel sind die Styles: Light, Air und der normale Windows Style.


EDIT:

Hier mal das passende Stylebook dazu:

Delphi-Quellcode:

object TLayout
  Align = Client
  Height = 1003.000000000000000000
  Width = 1165.000000000000000000
  TabOrder = 1
  object TLayout
    StyleName = 'checkboxstyle2'
    DesignVisible = False
    Height = 21.000000000000000000
    Position.X = 522.000000000000000000
    Position.Y = 491.000000000000000000
    Width = 121.000000000000000000
    object TLayout
      Align = Left
      Height = 21.000000000000000000
      Width = 20.000000000000000000
      object TRectangle
        StyleName = 'background'
        Align = Center
        Fill.Color = xFF585858
        Locked = True
        Height = 13.000000000000000000
        HitTest = False
        Stroke.Color = xFF1C1C1C
        Width = 13.000000000000000000
        object TGlowEffect
          Softness = 0.300000011920929000
          GlowColor = xFF65C8E0
          Opacity = 1.000000000000000000
          Trigger = 'IsFocused=true'
          Enabled = False
        end
        object TRectangle
          Align = Client
          Fill.Kind = None
          Height = 11.000000000000000000
          HitTest = False
          Margins.Left = 1.000000000000000000
          Margins.Top = 1.000000000000000000
          Margins.Right = 1.000000000000000000
          Margins.Bottom = 1.000000000000000000
          Stroke.Color = xFF595959
          Width = 11.000000000000000000
        end
        object TColorAnimation
          Duration = 0.100000001490116100
          PropertyName = 'Fill.Color'
          StartValue = xFF585858
          StopValue = xFF686868
          Trigger = 'IsMouseOver=true'
        end
        object TColorAnimation
          Duration = 0.100000001490116100
          PropertyName = 'Fill.Color'
          StartValue = xFF686868
          StopValue = xFF585858
          Trigger = 'IsMouseOver=false'
        end
        object TPath
          StyleName = 'checkmark'
          Align = Center
          Data.Path = {
            1200000000000000000000000000000001000000CDCC4C3E0000000001000000
            0000003F9A99993E01000000CDCC4C3F00000000010000000000803F00000000
            010000000000803FCDCC4C3E010000003333333F0000003F010000000000803F
            CDCC4C3F010000000000803F0000803F01000000CDCC4C3F0000803F01000000
            0000003F3333333F01000000CDCC4C3E0000803F01000000000000000000803F
            0100000000000000CDCC4C3F010000009A99993E0000003F0100000000000000
            CDCC4C3E010000000000000000000000030000000000000000000000}
          Fill.Color = claNull
          Locked = True
          Height = 9.000000000000000000
          HitTest = False
          Stroke.Kind = None
          Width = 9.000000000000000000
          object TColorAnimation
            Duration = 0.100000001490116100
            PropertyName = 'Fill.Color'
            StartValue = claNull
            StopValue = claBlack
            Trigger = 'IsChecked=true'
          end
          object TColorAnimation
            Duration = 0.000100000004749745
            PropertyName = 'Fill.Color'
            StartValue = claBlack
            StopValue = claNull
            Trigger = 'IsChecked=false'
          end
        end
      end
    end
    object TText
      StyleName = 'text'
      Align = Client
      Locked = True
      Height = 19.000000000000000000
      HitTest = False
      Margins.Left = 1.000000000000000000
      Margins.Top = 2.000000000000000000
      Margins.Right = 1.000000000000000000
      Text = 'CheckBox'
      TextSettings.FontColor = xFFF3F3F3
      Width = 99.000000000000000000
    end
  end
  object TLayout
    StyleName = 'checkboxstyle1'
    DesignVisible = False
    Height = 15.000000000000000000
    Position.X = 575.000000000000000000
    Position.Y = 494.000000000000000000
    Width = 15.000000000000000000
    object TLayout
      Align = Left
      Height = 15.000000000000000000
      Width = 15.000000000000000000
      object TRectangle
        Align = Center
        Fill.Color = claWhite
        Locked = True
        Height = 13.000000000000000000
        HitTest = False
        Stroke.Kind = None
        Width = 13.000000000000000000
        object TRectangle
          StyleName = 'background'
          Align = Client
          Fill.Color = claWhite
          Locked = True
          Height = 11.000000000000000000
          HitTest = False
          Margins.Left = 1.000000000000000000
          Margins.Top = 1.000000000000000000
          Margins.Right = 1.000000000000000000
          Margins.Bottom = 1.000000000000000000
          Stroke.Color = xFFD6D6D6
          Width = 11.000000000000000000
          object TGlowEffect
            Softness = 0.200000002980232200
            GlowColor = xFF3DC9ED
            Opacity = 1.000000000000000000
            Trigger = 'IsFocused=true'
            Enabled = False
          end
        end
        object TPath
          StyleName = 'checkmark'
          Align = Center
          Data.Path = {
            2200000000000000000C6444002CD74301000000006261440098DC4301000000
            00B85E440030D74301000000008E5E440084D74301000000008C5E440080D743
            0100000000685E4400CCD7430100000000645E4400D4D7430100000000605E44
            00DCD74301000000003A5E440024D8430100000000E660440090DD4301000000
            00365E440004E3430100000000645E44005CE3430100000000665E440058E343
            0100000000865E440098E3430100000000865E44009CE3430100000000905E44
            00ACE3430100000000B45E4400F8E34301000000006261440088DE4301000000
            0010644400FCE343010000000034644400B0E34301000000003E644400A0E343
            01000000003E6444009CE34301000000005E6444005CE3430100000000606444
            0060E34301000000008E64440008E3430100000000DC61440090DD4301000000
            008A64440020D843010000000064644400D8D743010000000060644400D0D743
            01000000005C644400C8D7430100000000386444007CD7430100000000366444
            0080D74301000000000C6444002CD74303000000000C6444002CD743}
          Fill.Color = xFF3DC9ED
          Locked = True
          Height = 7.000000000000000000
          HitTest = False
          Margins.Left = 1.000000000000000000
          Margins.Top = 1.000000000000000000
          Stroke.Kind = None
          Width = 7.000000000000000000
          object TColorAnimation
            Duration = 0.100000001490116100
            PropertyName = 'Fill.Color'
            StartValue = x00FFFFFF
            StopValue = xFF3DC9ED
            Trigger = 'IsChecked=true'
            TriggerInverse = 'IsChecked=false'
          end
        end
      end
    end
    object TText
      StyleName = 'text'
      Align = Client
      Locked = True
      Height = 13.000000000000000000
      HitTest = False
      Margins.Left = 1.000000000000000000
      Margins.Top = 2.000000000000000000
      Margins.Right = 1.000000000000000000
      Text = 'CheckBox'
      TextSettings.FontColor = xFF828282
      Width = 0.000000000000000000
    end
  end
end

[UliBru]

@Sunec:

das sieht gut aus, ich teste es mal.

- Uli

[Harry Stahl]

Eine weitere Möglichkeit, einen Style für verschiedene Elemente grundlegend zu verändern, wäre der Weg, die Style-Bitmap entsprechend zu bearbeiten. Man könnte dann z.B. mehrere entsprechend angepasste Style-Dateien anlegen und dann bei Änderung eines Anwendungsweiten Styles die jeweilige Style-Datei laden (z.B. beim Wechsel vom Standard-Windows-Style zum Luna-Style).

Hierzu hatte ich hier (http://www.devpage.de/blog/firemonkey-Teil6.htm) schon mal ein paar Ausführungen gemacht.
Dazu hatte ich auch noch ein kleines Video gedreht, dass sich aber noch auf XE3 bezog. Ab XE4 hat sich der Zugriffsweg auf die Style-Bitmap etwas geändert, so dass ich das jetzt auch mal aktuell für XE6 in einem 2. Video festgehalten habe.

Aus gegebenen Anlass habe ich dort die Änderung der Progressbar-Farbe gezeigt. Hier ist der Link: http://youtu.be/gcMPZQiVR-w