Introducing Xamarin.Forms Switch Component

Introduction

We are happy to introduce the Xamarin.Forms Switch component. This component will be available from Essential Studio^® for Xamarin.Forms 2019 Vol. 2 (Beta). 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 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.

Cupertino—This visual type will render the Xamarin.Forms Switch Control based on iOS guidelines.

Fluent—This visual type will render the Xamarin.Forms Switch Control based on UWP guidelines.

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

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.

Powered with Visual State Manager

Use the 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.

<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

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.

Switch with horizontal and vertical orientations

Set gradient

The highly customizable Switch control allows you to customize its background with gradient. The Xamarin.Forms gradient view is integrated with the control. You can apply a linear gradient or radial gradient look to the control.

Xamarin.Forms Switch with gradient colors

Images for a custom look

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

Xamarin.Forms Switch with images

Seamless RTL support

Switch has been designed with Flow Direction in mind in every aspect. So you can seamlessly integrate with RTL layouts.

Xamarin.Forms Switch in RTL layout

Conclusion

In this blog post, we have walked through the  Syncfusion Xamarin.Forms Switch control. You can check out the project to get a hands-on experience on the Switch control from this GitHub location. You can always download our free evaluation to see all these controls in action. Explore our samples available on Google Play and the Microsoft Store. Learn about the controls’ advanced features in our documentation.

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, Direct-Trac, or Feedback Portal. We are happy to assist you!