Home

Awesome

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

Xamarin.Forms.CustomSwitch Nuget Nuget

License: MIT FOSSA Status

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. <br> 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 -

Sample App

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 -

What can I do with it?

Properties

PropertyWhat it doesExtra info
IsToggledA bool to indicate the togles status of the switchDefault value is false
KnobHeightThe height of the knob on the switchDefault value is 0
KnobWidthThe width of the knob on the switchDefault value is 0
KnobColorThe solid color of the knobDefault value is Color.Default
KnobBackgroundThe background for the knob, this supports XF brushes to enable gradients, lean more on MS docsDefault value is Brush.Default
KnobCornerRadiusA CornerRadius object representing each individual corner's radius for the knob. <br> This is property is implemented using XF corner radius objectMore info on how to use this in the MS docs <br> Default value is default(CornerRadius)
HeightRequestThe Height of the switchDefault value is 0
WidthRequestThe width of the switchDefault value is 0
CornerRadiusA CornerRadius object representing each individual corner's radius for the knob. <br> This is property is implemented using XF corner radius objectMore info on how to use this in the MS docs <br> Default value is default(CornerRadius)
BackgroundColorThe solid color of the switchDefault value is Color.Default
BackgroundThe background for the switch, this supports XF brushes to enable gradients, lean more on MS docsDefault value is Brush.Default
BackgroundContentSets the content of the switch. <br> See samples for an idea how to utilise itDefault value is null
KnobContentSets the content of the knob. <br> See samples for an idea how to utilise itDefault value is null
HorizontalKnobMarginAdds a margin to the max distance the knob can travelDefault value is 0
KnobLimitUsed to calculate the knob position. <br> See samples for an idea how to utilise itDefault value is KnobLimitEnum.Boundary
VibrateDurationUsed to set the duration of the vibration when the switch is togglesDefault value is 20 <br> To disble the vibrate set the value to 0
ToggleAnimationDurationUsed to set the duration of the toggle animationDefault value is 100 <br> To disble the animation set the value to 0

Events

EventWhat it does
ToggledTriggered when the switch is toggled
SwitchPanUpdateTriggered when the switch is toggled or dragged. Used to handle the transition of the switch from one side to the other. <br> See samples for an idea how to utilise it

Commands

CommandWhat it does
ToggledCommandTriggered 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)

iOS example

Android (xaml / code behind)

iOS example

Theme 1 (xaml / code behind)

Theme 1 example

Theme 2 (xaml / code behind)

Theme 2 example

Other 1 (xaml / code behind)

Other 1 example

Other 2 (xaml / code behind)

Other 2 example

Other 3 (xaml / code behind)

Other 3 example

Other 4 (xaml / code behind)

Other 4 example

Other 5 (xaml / code behind)

Other 5 example

License

FOSSA Status