none
Farben des ToggleSwitch RRS feed

  • Frage

  • Hi,

    eigentlich könnte die XAML (und auch WPF)-Welt so schön sein, wenn nicht manche Properties recht merkwürdig ihre Werte erhalten würden.

    In einer App wollte ich den Hintergrund für das Einstellungspanel zum Kontrast auf weiß setzen (normal hat die App schwarz als Hintergrund). Wie in der App setze ich auch hier ToggleSwitch-Objekte ein. In den Standardeinstellungen ist entweder nur der Toggleswitch auf scharzem oder auf weißem Hintergrund zu sehen, je nachdem, welches Thema verwendet wird ("dark" oder "light").

    Ein ToggleSwitch hat zahlreiche Farbproperties:

    <SolidColorBrush x:Key="ToggleSwitchCurtainBackgroundThemeBrush" Color="#FF5729C1" />
    
    <SolidColorBrush x:Key="ToggleSwitchCurtainDisabledBackgroundThemeBrush" Color="Transparent" />
    
    <SolidColorBrush x:Key="ToggleSwitchCurtainPointerOverBackgroundThemeBrush" Color="#FF6E46CA" />
    
    <SolidColorBrush x:Key="ToggleSwitchCurtainPressedBackgroundThemeBrush" Color="#FF7E4FEC" />
    
    <SolidColorBrush x:Key="ToggleSwitchDisabledForegroundThemeBrush" Color="#66FFFFFF" />
    
    <SolidColorBrush x:Key="ToggleSwitchForegroundThemeBrush" Color="#FFFFFFFF" />
    
    <SolidColorBrush x:Key="ToggleSwitchHeaderDisabledForegroundThemeBrush" Color="#66FFFFFF" />
    
    <SolidColorBrush x:Key="ToggleSwitchHeaderForegroundThemeBrush" Color="#FFFFFFFF" />
    
    <SolidColorBrush x:Key="ToggleSwitchOuterBorderBorderThemeBrush" Color="#59FFFFFF" />
    
    <SolidColorBrush x:Key="ToggleSwitchOuterBorderDisabledBorderThemeBrush" Color="#33FFFFFF" />
    
    <SolidColorBrush x:Key="ToggleSwitchThumbBackgroundThemeBrush" Color="#FFFFFFFF" />
    
    <SolidColorBrush x:Key="ToggleSwitchThumbBorderThemeBrush" Color="#FFFFFFFF" />
    
    <SolidColorBrush x:Key="ToggleSwitchThumbDisabledBackgroundThemeBrush" Color="#FF7E7E7E" />
    
    <SolidColorBrush x:Key="ToggleSwitchThumbDisabledBorderThemeBrush" Color="#FF7E7E7E" />
    
    <SolidColorBrush x:Key="ToggleSwitchThumbPointerOverBackgroundThemeBrush" Color="#FFFFFFFF" />
    
    <SolidColorBrush x:Key="ToggleSwitchThumbPointerOverBorderThemeBrush" Color="#FFFFFFFF" />
    
    <SolidColorBrush x:Key="ToggleSwitchThumbPressedBackgroundThemeBrush" Color="#FFFFFFFF" />
    
    <SolidColorBrush x:Key="ToggleSwitchThumbPressedForegroundThemeBrush" Color="#FFFFFFFF" />
    
    <SolidColorBrush x:Key="ToggleSwitchTrackBackgroundThemeBrush" Color="#42FFFFFF" />
    
    <SolidColorBrush x:Key="ToggleSwitchTrackBorderThemeBrush" Color="Transparent" />
    
    <SolidColorBrush x:Key="ToggleSwitchTrackDisabledBackgroundThemeBrush" Color="#1FFFFFFF" />
    
    <SolidColorBrush x:Key="ToggleSwitchTrackPointerOverBackgroundThemeBrush" Color="#4AFFFFFF" />
    
    <SolidColorBrush x:Key="ToggleSwitchTrackPressedBackgroundThemeBrush" Color="#59FFFFFF" />
    
    

    Leider können diese Farbproperties nicht in XAML oder im Code gesetzt werden, sondern nur im ResoureDictionary der Applikation:

    <ResourceDictionary.ThemeDictionaries>
    
    ...
    
    <ResourceDictionary x:Key="Dark">
    
        <SolidColorBrush x:Key="ToggleSwitchCurtainBackgroundThemeBrush" Color="#FF5729C1" />
    
        ...
    
    </ResourceDictionary>
    
    <ResourceDictionary x:Key="Light">
    
        <SolidColorBrush x:Key="ToggleSwitchCurtainBackgroundThemeBrush" Color="#FF5729C1" />
    
        ...
    
    </ResourceDictionary>

    Das hat jedoch den Nachteil, dass man letztendlich nur eine Variante zur "Verfügung" hat, da die oben aufgeführten Farbproperties nun für alle ToggleSwitches der Applikation gelten.

    Eine Beispiel-App habe ich hier hochgeladen. In der App.xaml mal den Wert von RequestedTheme zwischen "Light" und "Dark" wechseln.

    Manchmal frage ich mit, was sich ein Entwickler bei so einem Design denkt?

    Fällt eventuell noch jemanden ein anderer Weg ein, die Properties zu setzen?


    Gruß

    Ralf


    • Bearbeitet Ralf_Ellersiek Donnerstag, 25. Oktober 2012 09:11
    • Typ geändert Robert Breitenhofer Freitag, 9. November 2012 11:02 Keine Rückmeldung des Fragenstellender
    • Typ geändert Robert Breitenhofer Montag, 12. November 2012 07:36 Rückmeldung des Fragenstellender
    Donnerstag, 25. Oktober 2012 09:10

Antworten

Alle Antworten

  • Hallo Ralf

    Du kannst der Hintergrund für ein ToggleSwitch  verwenden:

    <ToggleSwitch Header="ToggleSwitch" Foreground="Orange" HorizontalAlignment="Left" Height="143" Margin="336,466,0,0" VerticalAlignment="Top" Width="316" Background="#FF0A0101"/>

    Viele Grüße,
    Ionut
    Freitag, 26. Oktober 2012 10:30
    Moderator
  • Hi lonut,

    ja und so wäre der switch auch wieder sichtbar. Nur leider ändert das den Hintergrund für den gesamten ToggleSwitch (also auch für den Header und den OnContent sowie den OffContent) und das würde dann natürlich nicht zum Layout passen:

    Die Einstellungsseite soll ja einen weißen Hintergrund bekommen (statt schwarz wie in der App) und schwarzem Text. Dann ist der Switch und sein On/off-Content allerdings nicht sichtbar). Würde ich jetzt den Background des Switches auf schwarz setzen, dann wäre zwar der Schwitch sichtbar, würde aber nicht zum Rest passen.

    Gruß

    Ralf

    PS.: Ich reiche mal ein, zwei Sceenshots nach, wenn ich meinen Rechner wieder mit Win8 gestartet habe (z.Zt. läuft er mit meinem seit heute latem Win7 :))

    Freitag, 26. Oktober 2012 10:44
  • So, jetzt ist Win8 wieder aktiv.

    Mit ausgewähltem Dark-Scheme sieht es so aus:

    Und mit ausgewähltem Light-Scheme so:

    Wie man sieht, kann man den ToggleSwitch beim Dark-Scheme auf weißem Hintergrund und bei Light-Scheme auf schwarzem Hintergrund nicht erkennen.

    Die rechten ToggleSwitches haben einen grauen Hintergrund und sind zwar sichtbar, passen aber nicht zum Layout.

    Gruß

    Ralf

    Freitag, 26. Oktober 2012 12:03
  • Hallo Ralf,

    Du kannst den ToggleSwitch in Blend öffnen und das Style wechseln.

    Gruß,

    Ionut

    Mittwoch, 31. Oktober 2012 13:27
    Moderator
  • ****************************************************************************************************************
    Dieser Thread wurde mangels weiterer Beteiligung des Fragestellenden ohne bestätigte Lösung abgeschlossen.
    Neue Rückfragen oder Ergänzungen zu diesem Thread bleiben weiterhin möglich.
    ****************************************************************************************************************

    Robert Breitenhofer, MICROSOFT   Bitte haben Sie Verständnis dafür, dass im Rahmen dieses Forums, welches auf dem Community-Prinzip Entwickler helfen Entwickler“ beruht, kein technischer Support geleistet werden kann oder sonst welche garantierten Maßnahmen seitens Microsoft zugesichert werden können.

    Freitag, 9. November 2012 11:03
  • Sorry, das ich mich jetzt erst melde.

    Den Style zu wechseln ist an sich nicht das Problem. Das Problem ist, das die im ersten Post aufgeführten (Farb)Eigenschaften des ToggleSwitch nicht im Style auftauchen sondern nur für die gesamte App festgelegt werden können.

    Oder habe ich dich falsch verstanden?

    Gruß

    Ralf

    Sonntag, 11. November 2012 15:26
  • Hallo Ralf,

    Dass ist was ich meinte toggleswitch button color. Dieses Beispiel ist für WP7 aber Du kannst es auch für Windows 8 benutzen.

    Gruß,

    Ionut

    Montag, 12. November 2012 15:01
    Moderator
  • Danke, das ist des Brezels Lösung:

    You need to edit the default template of the ToggleSwitch. Here are the steps to how you'd achieve this:

    1. Open the project in blend
    2. Right Click on the ToggleSwitch in the design view and click on Edit Template > Edit a copy
    3. Now the template of your selected toggle switch would be generated
    4. Search for the SwitchForeground property and set it to your desired color

    You're now set

    Es wird zwar ein Style-Monstrum für den Toggle-Switch erstellt, aber dadurch lassen sich jetzt alle Eigenschaften anpassen.

    Gruß und nochmals Danke

    Ralf

    Montag, 12. November 2012 16:23