Switches should have their own options to Color their Thumb and Tint for state On/Off

[MAUIoxo]

Description

Systems like Android often use a different Colors for the Slider and Thumb when they are toggled on or off like these:

Also on iOS it could be interesting to create such effects easily. It could be possible to create something with OnPlatform-Properties and then use certain properties in the ViewModel or where the Switch is bound to and then change states correspondingly in the Code-Behind.

<Switch IsToggled="{Binding IsSelected, Mode=TwoWay}" ThumbColor="{OnPlatform iOS={StaticResource Gray100}, Android={StaticResource DarkOrange3}}" OnColor="{OnPlatform iOS={StaticResource DarkOrange3}, Android={StaticResource DarkOrange3_Light}}" VerticalOptions="Center" HorizontalOptions="Center" Margin="{OnPlatform Android='0, -5, 0, -5'}" />

This, obviously is not so intuitive and also not so easily possible than having separate properties for:

• ThumbOffColor
• ThumbOnColor
• SliderOffColor (or TintOffColor)
• SliderOnColor (or TintOnColor)

So, I would propose to have certain properties for them and set them in XAML separately via these properties.

Another proposal would be that the right Color is somehow calculated internally which on Android is often a bit lighter for the the Slider/Tint than the acutal ThumbOnColor:

So, when a certain Color is set (e.g. orange) the right lighter version of that orange is calculated internally so that it fits the standards on Android.

Anyway, defining Colors for values below would be nice to have:

• ThumbOffColor
• ThumbOnColor
• SliderOffColor (or TintOffColor)
• SliderOnColor (or TintOnColor)

Public API Changes

API Changes for the Switch

Intended Use-Case

Use case is that developers can set the Colors for the following properties separately:

• ThumbOffColor
• ThumbOnColor
• SliderOffColor (or TintOffColor)
• SliderOnColor (or TintOnColor)

[jfversluis]

There already area styling options available for this, were you aware of those? Are those not sufficient? Why not?

See: https://learn.microsoft.com/dotnet/maui/user-interface/controls/switch

[bruno-gerardo]

When the device is in Dark Mode and you have a switch inside a layout with BackgroundColor = "White" switch's Off track color it's also set to White, and you only can see the Thumb.

[TypicalArthur]

Simply put, no.
Why would something like this not be editable? The track colour should be editable in both the on and off states, not just in the on state.

[MAUIoxo]

Sorry, I wasn't really aware of these styling options via VisualStateGroups for that. Still would prefer properties for these options as it would make it more obvious and clearer. But, can understand when you say it is better that you close this proposal.

[AlleSchonWeg]

Hi @jfversluis
i miss the off track color.

[jfversluis]

I think TrackColor works with both on and off. Then toggle the color depending on the on/off state and you should be able to implement this functionality.

[MAUIoxo]

In general, after working with XAML for a while, you get into a mode so that you expect certain behaviors as Properties. I'm just saying that you would rather try to set something via "TrackOnColor" and "TrackOffColor" than setting big state groups:

<Switch IsToggled="True">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="On">
                <VisualState.Setters>
                    <Setter Property="ThumbColor"
                            Value="MediumSpringGreen" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Off">
                <VisualState.Setters>
                    <Setter Property="ThumbColor"
                            Value="Red" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Switch>

This is just a general thing and preference for me. It is also more intuitive to browse the IntelliSense within a Control in XAML for certain properties.

So if you come to the point where you discuss internally how something new is going to be implemented 😊

[AlleSchonWeg]

Hi @jfversluis and @MAUIoxo ,
the ThumbColor works. But the switch has only a OnColor property which colours the track. Using this VisualState:

  <Switch IsToggled="True"
          Margin="10,0,15,0"
          VerticalOptions="Center">
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="On">
          <VisualState.Setters>
            <Setter Property="ThumbColor"
                    Value="MediumSpringGreen" />
            <Setter Property="OnColor"
                    Value="MediumSpringGreen" />
          </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Off">
          <VisualState.Setters>
            <Setter Property="ThumbColor"
                    Value="Red" />
            <Setter Property="OnColor"
                    Value="Red" />
          </VisualState.Setters>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
  </Switch>

results in a grey track if off:

[MAUIoxo]

My preference is still, to have "OnThumbColor", "OffThumbColor", "OnTrackColor" and "OffTrackColor" - most obvious to me and regarding a clean API clearest