| 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 |
|---|
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 -
Install the NuGet package into your shared project project
Install-Package IeuanWalker.CustomSwitch
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" />
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 -
BackgroundContentis used to set the content of the switchKnobContentis used to set the content on the knob. The content on the knob is hidden/shown by utilising theIsClippedToBoundsproperty. So essentially, as the knob moves from one side to the other it is just revealing a different part of the content.- The
SwitchPanUpdateis used transition from true to false, i.e. color fading etc.
| 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 |
| 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 |
| Command | What it does |
|---|---|
| ToggledCommand | Triggered when the switch is toggled |
Both iOS and android see's this control as a native switch. So from an accessibility POV it behaves like a native switch.
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)
