Xamarin.Forms: How to create a Labeled Switch as custom control for Android and iOS

Introduction

In this blog post I want to show you how I’m creating a custom control using the default controls for Xamarin.Forms which work on Android and iOS.

Labeled Switch

The final result of the Labeled Switch

Implementation

First we need to create a new ContentView, for example LabeledSwitch.

Create a new ContentView with the name LabeledSwitch

We will start with a basic layout of the control. So we will open the LabeledSwitch.xaml file and replace the default content by a grid containing two columns with two labels in the first column and a switch in the second column. We also bind the Text and the IsToggled properties to upcoming BindableProperties of our control.

We also set the x:Name property of the class to LabeledSwitchRoot.

Let’s create the currently missing BindableProperties in the code-behind file of our LabeledSwitch. We need two strings to store the title and the detail and a boolean value to make the switch toggle state accessible.

Now we can already take a look at the current implementation, for example on Android. We can see that the title, the detail and the switch are present. But currently we are unable to toggle the switch.

Still missing some styling

So let’s fix that issue. We add a GestureRecognizer to the ContentView which fires an event if the user taps on our control.

The next step is to implement the OnTapped in the code-behind file. We simply need to toggle the IsChecked property.

Now we are good to go from a functional point of view, but we need to think about the styling of the new control. Currently both labels are shown exactly in the same way, but they should indicate title and detail. So let’s add some styles for the labels and apply them.

Here is the final result. With only some line of codes we created our custom control which we can use for example as a settings section within our app.

We can now think how to improve this control.

It is for example possible to pass in two different style properties so the developer is able to change the layout of the labels easily. Another improvement can be to switch the positions, so that the switch is on the left and the labels are on the right.

Conclusion

You can find the whole source-code in my GitHub repository.

Feel free to describe your own custom controls in the comments.

This article is my contribution to #XamarinUIJuly, which is basically a series of blog posts where every day of July a Xamarin community member posts a blog about Xamarin and UI. You can also find some more blog posts on my personal blog tsjdev-apps.de.

Software Developer @ medialesson GmbH