Xamarin.Forms Custom Switch Button

 Hello Xamarians,

I am here with a new blog on Switch button. As you all know what is switch button and how it works. For example in general terms we have switch button for fan and it is used to mak fan tun on and off. Similary, in Xamarin form we have switch button to trun on and off the feature.

In Android, Ios and WPF  switch button is a UI widget to enable and disable some operations.
Switch button is also knows as flip flop.

In xamarin form we can customize the behavior of  switch button. Along with this we can also rendered the Android and IOS Properties of switch button.

Let's start with the implementation:

we will first create a class whose name is "CustomSwitch" and then we will write a code in "C #"

	public class CustomSwitch : Switch
	{
	public static readonly BindableProperty SwitchOffColorProperty =
	BindableProperty.Create(nameof(SwitchOffColor),
	typeof(Color), typeof(CustomSwitch),
	Color.Default);
	public Color SwitchOffColor
	{
	get { return (Color)GetValue(SwitchOffColorProperty); }
	set { SetValue(SwitchOffColorProperty, value); }
	}
	public static readonly BindableProperty SwitchOnColorProperty =
	BindableProperty.Create(nameof(SwitchOnColor),
	typeof(Color), typeof(CustomSwitch),
	Color.Default);
	public Color SwitchOnColor
	{
	get { return (Color)GetValue(SwitchOnColorProperty); }
	set { SetValue(SwitchOnColorProperty, value); }
	}
	public static readonly BindableProperty SwitchThumbColorProperty =
	BindableProperty.Create(nameof(SwitchThumbColor),
	typeof(Color), typeof(CustomSwitch),
	Color.Default);
	public Color SwitchThumbColor
	{
	get { return (Color)GetValue(SwitchThumbColorProperty); }
	set { SetValue(SwitchThumbColorProperty, value); }
	}
	public static readonly BindableProperty SwitchThumbImageProperty =
	BindableProperty.Create(nameof(SwitchThumbImage),
	typeof(string),
	typeof(CustomSwitch),
	string.Empty);
	public string SwitchThumbImage
	{
	get { return (string)GetValue(SwitchThumbImageProperty); }
	set { SetValue(SwitchThumbImageProperty, value); }
	}
	}

view raw CustomSwitch.cs hosted with ❤ by GitHub

Now we can set properties in android project which is generated from PCL Project, also set properties in Ios Project.

	using System;
	using UIKit;
	using Xamarin.Forms;
	using CustomSliderDemo;
	using CustomSliderDemo.iOS;
	using Xamarin.Forms.Platform.iOS;
	[assembly: ExportRenderer(typeof(CustomSwitch), typeof(MySwitchRendererd))]
	namespace CustomSliderDemo.iOS
	{
	public class MySwitchRendererd : 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))
	{ //n iOS 6 and earlier, the image displayed when the switch is in the on position.
	Control.OnImage = UIImage.FromFile(view.SwitchThumbImage.ToString());
	//n iOS 6 and earlier, the image displayed when the switch is in the off position.
	Control.OffImage = UIImage.FromFile(view.SwitchThumbImage.ToString());
	}
	else
	{
	Control.ThumbTintColor = view.SwitchThumbColor.ToUIColor();
	}
	}
	//The color used to tint the appearance of the thumb.
	Control.ThumbTintColor = view.SwitchThumbColor.ToUIColor();
	//Control.BackgroundColor = view.SwitchBGColor.ToUIColor();
	//The color used to tint the appearance of the switch when it is turned on.
	Control.OnTintColor = view.SwitchOnColor.ToUIColor();
	//The color used to tint the outline of the switch when it is turned off.
	Control.TintColor = view.SwitchOffColor.ToUIColor();
	}
	}
	}

view raw MySwitchRendererd hosted with ❤ by GitHub

Please make sure and add view reference.. 
xmlns:local="clr-namespace:CustomSwitchApp"then write xaml code in main page.

Now we are using custom switch control in PCL Project..

	<ContentPage.Content>
	<StackLayout Padding="20" BackgroundColor="Gray" >
	<Label Text="Custom Switch" FontSize="Large"/>
	<cs:CustomSwitch x:Name="customSwitch"
	SwitchOffColor="Yellow"
	SwitchOnColor="Black"
	SwitchThumbImage="icon"
	HorizontalOptions="CenterAndExpand"
	VerticalOptions="CenterAndExpand"/>
	<cs:CustomSwitch SwitchOffColor="Navy"
	SwitchOnColor="Green"
	SwitchThumbColor="Violet"
	HorizontalOptions="CenterAndExpand"
	VerticalOptions="CenterAndExpand"/>
	</StackLayout>
	</ContentPage.Content>

view raw MainPage.xaml hosted with ❤ by GitHub

TADDAAAA!

You should have your CustomSwitch working!!
If You want to watch related video click Here Custom Rendered Switch



Publi Property of Switch Button controls

1. IsToggeled Boolean=(IsToggeled="True")

Features of CustomSwitch controls

1. Custom Switch On Color Property=(SwitchOnColor="Red")
2. Custom Switch Off Color Property=(SwitchOffColor="Yellow")
3. Custom Switch Thumb Color Property=(SwitchThumbColor="Yellow")
4. Custom Thumb Image Property=(SwitchThumbImage="Black")