Custom switch does not show On/Off Image in Xamarin Forms

Question

https://www.c-sharpcorner.com/article/how-to-create-and-use-a-custom-switch-control-in-xamarin-forms/

"OnImage" and "OffImage" does not work when i make a custom renderer following the guide above. I see no image when i click on or off.

In my class, I send in a HTTP url and then convert that URL to a UIImage. It works successfully as i've added breakpoints all the way. I even tried with a image in my library to see if that would change the outcome but it didnt.

public class Switch_iOS : SwitchRenderer
{
    Version version = new Version(ObjCRuntime.Constants.Version);
    protected override void OnElementChanged(ElementChangedEventArgs<Switch> e)
    {
        base.OnElementChanged(e);
        if (e.OldElement != null || e.NewElement == null)
            return;
        var view = (CustomSwitch)Element;
        if (!string.IsNullOrEmpty(view.SwitchThumbImage))
        {
            if (version > new Version(6, 0))
            {   
                Control.OnImage = FromUrl(view.SwitchThumbImage);

                Control.OffImage = FromUrl(view.SwitchThumbImage);
            }
            else
            {
                Control.ThumbTintColor = view.SwitchThumbColor.ToUIColor();
            }
        }
    }

    public UIImage FromUrl(string uri)
    {
        using (var url = new NSUrl(uri))
        using (var data = NSData.FromUrl(url))
            return UIImage.LoadFromData(data);
    }
}

Is "Control.OnImage" and "Control.OffImage" not working with the latest Xamarin Forms? I also intend to make a background image to the switch.

"seems to not work" is not a helpful description of the problem. Are you saying that neither image displays? Or that only one does? Or something else? — Jason

Junior Jiang Junior Jiang · Accepted Answer · 2020-06-16T07:14:52

Unfortunately , about OnImage and OffImage of UISwitch , from iOS 7 has no effect.

Have a look at the apple document :

In iOS 7 and later, this property has no effect.

In iOS 6, this image represents the interior contents of the switch. The image you specify is composited with the switch’s rounded bezel and thumb to create the final appearance.

Instead you can use

onTintColor to set the tint color of the switch when it is turned on.
tintColor to set the tint color of the switch when it is turned off.
thumbTintColor to set the tint color of the thumb.

Custom switch does not show On/Off Image in Xamarin Forms

1 Answers