⚠️	This NuGet/ repo is now in maintenance mode and support will end once xamarin.forms is no longer supported. Bug fixes only. MAUI repo - https://github.com/IeuanWalker/Maui.witch

Xamarin.Forms.CustomSwitch

Breaking changes in version 2.1.0, please see release notes for more details.

This is a switch/ toggle control that would allow you to create any style switch you'd like.
This component is built on top/ from this great libary - https://github.com/Phenek/Global.InputForms. Fixes a few issues, adds more options for styling and improved accessibility.

Take a look at the sample app included within this project -

How to use it?

Install the NuGet package into your shared project project

Install-Package IeuanWalker.CustomSwitch

For android

Permission to use the vibration feature is needed. Open the AndroidManifest.xml file under the Properties folder and add the following inside of the manifest node.

<uses-permission android:name="android.permission.VIBRATE" />

For iOS

Add CustomSwitchRenderer.Init(); to the AppDelegate.cs > FinishedLaunching()

---

The best place to learn how to create a new switch is by looking at the samples.

These are the key things to know -

• BackgroundContent is used to set the content of the switch
• KnobContent is used to set the content on the knob. The content on the knob is hidden/shown by utilising the IsClippedToBounds property. So essentially, as the knob moves from one side to the other it is just revealing a different part of the content.
• The SwitchPanUpdate is used transition from true to false, i.e. color fading etc.

What can I do with it?

Properties

Property	What it does	Extra info
IsToggled	A bool to indicate the togles status of the switch	Default value is false
KnobHeight	The height of the knob on the switch	Default value is 0
KnobWidth	The width of the knob on the switch	Default value is 0
KnobColor	The solid color of the knob	Default value is Color.Default
KnobBackground	The background for the knob, this supports XF brushes to enable gradients, lean more on MS docs	Default value is Brush.Default
KnobCornerRadius	A CornerRadius object representing each individual corner's radius for the knob. This is property is implemented using XF corner radius object	More info on how to use this in the MS docs Default value is default(CornerRadius)
HeightRequest	The Height of the switch	Default value is 0
WidthRequest	The width of the switch	Default value is 0
CornerRadius	A CornerRadius object representing each individual corner's radius for the knob. This is property is implemented using XF corner radius object	More info on how to use this in the MS docs Default value is default(CornerRadius)
BackgroundColor	The solid color of the switch	Default value is Color.Default
Background	The background for the switch, this supports XF brushes to enable gradients, lean more on MS docs	Default value is Brush.Default
BackgroundContent	Sets the content of the switch. See samples for an idea how to utilise it	Default value is null
KnobContent	Sets the content of the knob. See samples for an idea how to utilise it	Default value is null
HorizontalKnobMargin	Adds a margin to the max distance the knob can travel	Default value is 0
KnobLimit	Used to calculate the knob position. See samples for an idea how to utilise it	Default value is KnobLimitEnum.Boundary
VibrateDuration	Used to set the duration of the vibration when the switch is toggles	Default value is 20 To disble the vibrate set the value to 0
ToggleAnimationDuration	Used to set the duration of the toggle animation	Default value is 100 To disble the animation set the value to 0

Events

Event	What it does
Toggled	Triggered when the switch is toggled
SwitchPanUpdate	Triggered when the switch is toggled or dragged. Used to handle the transition of the switch from one side to the other. See samples for an idea how to utilise it

Commands

Command	What it does
ToggledCommand	Triggered when the switch is toggled

Accessibility

Both iOS and android see's this control as a native switch. So from an accessibility POV it behaves like a native switch.

Examples

iOS (xaml / code behind)

Android (xaml / code behind)

Theme 1 (xaml / code behind)

Theme 2 (xaml / code behind)

Other 1 (xaml / code behind)

Other 2 (xaml / code behind)

Other 3 (xaml / code behind)

Other 4 (xaml / code behind)

Other 5 (xaml / code behind)

License