Introducing Xamarin.Forms Switch Component
Tags: csharp, android, ios, productivity
Published: 2019-07-03 11:02:57

---
title: Introducing Xamarin.Forms Switch Component
published: true
tags: csharp, android, ios, productivity
canonical_url: https://blog.syncfusion.com/post/xamarin-forms-switch-component.aspx
---

## Introduction

We are happy to introduce the [Xamarin.Forms](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/) Switch component. This component will be available from Essential Studio for Xamarin.Forms [2019 Vol. 2 (Beta)](https://www.syncfusion.com/account/downloads). Nowadays, almost all mobile apps contain a user interface that allows the user to turn on or off items. We at Syncfusion understand the requirement for this simple but essential function and now deliver the feature-rich Xamarin.Forms Switch control.

The [Xamarin.Forms](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/) Switch control allows you to turn an item on and off and provides an optional indeterminate state. In this blog post, we will summarize the key features of the Xamarin.Forms Switch.

## Visual types

Wherever we look, the visual compatibility of an app is ultimate. So with the Xamarin.Forms Switch, we provided three built-in visual types. These visual types will save you time, customizing the Switch control based on devices or maintaining the same appearance on all three kinds of devices (Android, iOS, and UWP).

**Material** —This visual type will render the Xamarin.Forms Switch Control based on [Material guidelines](https://material.io/design/).

**Cupertino** —This visual type will render the Xamarin.Forms Switch Control based on [iOS guidelines](https://developer.apple.com/design/human-interface-guidelines/).

**Fluent** —This visual type will render the Xamarin.Forms Switch Control based on [UWP guidelines](https://www.microsoft.com/design/fluent/).

**Default** —The default visual type loads Material, Cupertino, and Fluent UI on Android, iOS, and UWP devices, respectively.

![Xamarin.Forms Switch with three visual types](https://blog.syncfusion.com/blogs/wp-content/uploads/2019/06/SwitchWithVisualType.jpg)<figcaption>Xamarin.Forms Switch with three visual types</figcaption>

## Indeterminate State

Our Xamarin.Forms Switch is a little different from common switches. Apart from the usual on and off states, we offer an additional state called indeterminate. For instance, in the following image of an app notification module, users can turn on or off the notifications of apps installed. A global switch can turn on or off all notifications at one time. Here, though, an indeterminate state will help when some of the app notifications are on and some remain turned off.

![Xamarin.Forms Switch with indeterminate state](https://blog.syncfusion.com/blogs/wp-content/uploads/2019/06/tristate.gif)<figcaption>Xamarin.Forms Switch with indeterminate state</figcaption>

## Powered with Visual State Manager

Use the [Visual State Manager](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual-state-manager) to customize Xamarin.Forms Switch’s thumb and track based on switch states. Its supported visual states are: on, off, indeterminate, and disabled.

```xml
<syncfusion:SfSwitch VisualType="Custom">
  <VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="States">
      <VisualState x:Name="On">
        <VisualState.Setters>
          <Setter Property="SwitchSettings">
           <Setter.Value>
             <syncfusion:MaterialSwitchSettings x:TypeArguments="syncfusion:OnState"
                                            ThumbColor="Green"/>
           </Setter.Value>
         </Setter>
        </VisualState.Setters>
      </VisualState>
      <VisualState x:Name="Indeterminate">
        <VisualState.Setters>
          <Setter Property="SwitchSettings">
            <Setter.Value>
              <syncfusion:CupertinoSwitchSettings x:TypeArguments="syncfusion:IndeterminateState"
                                              ThumbColor="Orange"/>
            </Setter.Value>
          </Setter>
        </VisualState.Setters>
      </VisualState>
      <VisualState x:Name="Off">
        <VisualState.Setters>
          <Setter Property="SwitchSettings">
            <Setter.Value>
              <syncfusion:CupertinoSwitchSettings x:TypeArguments="syncfusion:OffState"
                                              ThumbColor="Red"/>
            </Setter.Value>
          </Setter>
        </VisualState.Setters>
      </VisualState>
      <VisualState x:Name="Diabled">
        <VisualState.Setters>
          <Setter Property="SwitchSettings">
            <Setter.Value>
              <syncfusion:CupertinoSwitchSettings x:TypeArguments="syncfusion:DisabledState"
                                              ThumbColor="Gray"/>
            </Setter.Value>
          </Setter>
        </VisualState.Setters>
      </VisualState>
    </VisualStateGroup>
  </VisualStateManager.VisualStateGroups>
</syncfusion:SfSwitch>
```

## Validate with busy indicator

Switches support with busy indicator is the most common scenario in service-based apps. Our Switch can turn items on or off based on validation. Here validation can be handled asynchronously with a busy indicator.

![Xamarin.Forms Switch with busy indicator](https://blog.syncfusion.com/blogs/wp-content/uploads/2019/06/busy-indicator.gif)<figcaption>Xamarin.Forms Switch with busy indicator</figcaption>

## Vertical orientation

Xamarin.Forms Switch supports vertical orientation. You can integrate a vertical switch when your app has a requirement to set high, low, and medium values.

![Xamarin.Forms Switch with horizontal and vertical orientations](https://blog.syncfusion.com/blogs/wp-content/uploads/2019/06/SwitchWithOrientation-300x165.jpg)<figcaption>Switch with horizontal and vertical orientations</figcaption>

## Set gradient

The highly customizable Switch control allows you to customize its background with gradient. The [Xamarin.Forms gradient view](https://help.syncfusion.com/xamarin/sfgradientview/overview) is integrated with the control. You can apply a linear gradient or radial gradient look to the control.

![Xamarin.Forms Switch with gradient colors](https://blog.syncfusion.com/blogs/wp-content/uploads/2019/06/SwitchWithGradientColor-300x150.png)<figcaption>Xamarin.Forms Switch with gradient colors</figcaption>

## Images for a custom look

Customize Switch with images to illustrate the use case of the switch action.

![Xamarin.Forms Switch with images](https://blog.syncfusion.com/blogs/wp-content/uploads/2019/06/image.gif)<figcaption>Xamarin.Forms Switch with images</figcaption>

## Seamless RTL support

Switch has been designed with [Flow D](https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.flowdirection?view=xamarin-forms)[irection](https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.flowdirection?view=xamarin-forms) in mind in every aspect. So you can seamlessly integrate with RTL layouts.

![Xamarin.Forms Switch in RTL layout](https://blog.syncfusion.com/blogs/wp-content/uploads/2019/06/SwitchWithRTL-1024x503.jpg)<figcaption>Xamarin.Forms Switch in RTL layout</figcaption>

## Conclusion

In this blog post, we have walked through the  [Syncfusion Xamarin.Forms](https://www.syncfusion.com/xamarin-ui-controls/) Switch control. You can check out the project to get a hands-on experience on the Switch control from this [GitHub location](https://github.com/SyncfusionExamples/xamarin-forms-switch-control). You can always [download our free evaluation](https://www.syncfusion.com/account/downloads) to see all these controls in action. Explore our samples available on [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.samplebrowser) and the [Microsoft Store](https://www.microsoft.com/en-us/p/syncfusion-essential-studio-for-xamarin/9nn069tldzf4). Learn about the controls’ advanced features in [our documentation](https://help.syncfusion.com/xamarin/).

If you have any questions or require clarification about these controls, please let us know in the comments below. You can also contact us through our [support forum](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/), or [Feedback Portal](https://www.syncfusion.com/feedback/xamarin-forms). We are happy to assist you!

The post [Introducing Xamarin.Forms Switch Component](https://blog.syncfusion.com/post/xamarin-forms-switch-component.aspx) appeared first on [Syncfusion Blogs](https://blog.syncfusion.com).