locked
Switch button tint color RRS feed

  • Question

  • User396465 posted

    Hi If Switch is inside StackLayout with black background, then the background of switch (tint) is not visible. Can someone show how to change or control that color. Have a look at attached for clarification. Thank you.


    Wednesday, August 26, 2020 2:34 PM

Answers

  • User396471 posted

    Hi! I Think you should use Effects. Here's an example for IOS:

    IOS project

    ` [assembly: ResolutionGroupName("Switch")] [assembly: ExportEffect(typeof(.iOS.Effects.SwitchEffects), nameof(.iOS.Effects.SwitchEffects))] namespace .iOS.Effects { public class SwitchEffects : PlatformEffect { UIColor color; UISwitch _switch;

        public SwitchEffects()
        {
    
        }
    
        protected override void OnAttached()
        {
            _switch = (UISwitch)Control;
    
    
            SetSwitchOffColor();
    
        }
    
        void SetSwitchOffColor()
        {
            _switch.TintColor = UIColor.Blue;
            _switch.Layer.CornerRadius = 16;
            _switch.BackgroundColor = UIColor.Blue;
        }
    
        protected override void OnDetached()
        {
    
        }
    
        protected override void OnElementPropertyChanged(PropertyChangedEventArgs args)
        {
            base.OnElementPropertyChanged(args);
    
            try
            {
                if (args.PropertyName == "IsToggled")
                {
                    if (_switch.On)
                        _switch.OnTintColor = UIColor.Red;
                    else
                    {
                        SetSwitchOffColor();
                    }
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine("Cannot set property on attached control. Error: ", ex.Message);
            }
        }
    }
    

    } `

    .NET Standard library

    public class SwitchEffects : RoutingEffect { public SwitchEffects() : base("Switch.SwitchEffects") { } }

    XAML

    <Switch ThumbColor="White" OnColor="AliceBlue" <Switch.Effects> <effects:SwitchEffects/> </Switch.Effects> </Switch>

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, August 26, 2020 11:17 PM
  • User396465 posted

    @Farizel Thank you for the hint.

    I found the closest solution for both android and ios in below link. May be it will help someone else.

    blog.wislon.io/posts/2017/05/15/xamforms-change-switch-colour

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, September 1, 2020 6:31 PM

All replies

  • User396471 posted

    Hi! I Think you should use Effects. Here's an example for IOS:

    IOS project

    ` [assembly: ResolutionGroupName("Switch")] [assembly: ExportEffect(typeof(.iOS.Effects.SwitchEffects), nameof(.iOS.Effects.SwitchEffects))] namespace .iOS.Effects { public class SwitchEffects : PlatformEffect { UIColor color; UISwitch _switch;

        public SwitchEffects()
        {
    
        }
    
        protected override void OnAttached()
        {
            _switch = (UISwitch)Control;
    
    
            SetSwitchOffColor();
    
        }
    
        void SetSwitchOffColor()
        {
            _switch.TintColor = UIColor.Blue;
            _switch.Layer.CornerRadius = 16;
            _switch.BackgroundColor = UIColor.Blue;
        }
    
        protected override void OnDetached()
        {
    
        }
    
        protected override void OnElementPropertyChanged(PropertyChangedEventArgs args)
        {
            base.OnElementPropertyChanged(args);
    
            try
            {
                if (args.PropertyName == "IsToggled")
                {
                    if (_switch.On)
                        _switch.OnTintColor = UIColor.Red;
                    else
                    {
                        SetSwitchOffColor();
                    }
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine("Cannot set property on attached control. Error: ", ex.Message);
            }
        }
    }
    

    } `

    .NET Standard library

    public class SwitchEffects : RoutingEffect { public SwitchEffects() : base("Switch.SwitchEffects") { } }

    XAML

    <Switch ThumbColor="White" OnColor="AliceBlue" <Switch.Effects> <effects:SwitchEffects/> </Switch.Effects> </Switch>

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, August 26, 2020 11:17 PM
  • User396465 posted

    @Farizel Thank you for the hint.

    I found the closest solution for both android and ios in below link. May be it will help someone else.

    blog.wislon.io/posts/2017/05/15/xamforms-change-switch-colour

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, September 1, 2020 6:31 PM
  • User371688 posted

    Thank you very much for sharing your reply.

    Since you have resolved your question ,could you please mark it as an answer so that it will help others who have similar question? Thanks in advance.

    Wednesday, September 2, 2020 1:10 AM