Xamarin.Forms: How to create a Labeled Switch as custom control for Android and iOS
Introduction
If you are working with Xamarin.Forms to create a mobile application for Android and/or iOS you have lots of predefined controls which you can easily integrate into your app. But sometimes these controls don’t fit your actual needs and so you need to think about creating your own controls.
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
Xamarin.Forms has an control included which is called Switch. We want to extend this control by adding a title and a detail label to it and if you press on the labels also the switch gets toggled.
Implementation
At the beginning we need to think at a possible implementation. Due to the fact that we want to show a title and a detail label together with a switch, we will use two labels with different styling and a switch control.
First we need to create a new ContentView, for example 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.
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
As you have seen sometimes it isn’t that complicated to create a custom control for Xamarin.Forms which can be used on Android and iOS.
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.
