Creating Custom Controls in Xamarin.Forms on Android.

Xamarin.Forms library contains lots of build in controls but not all the time we end up using build in controls. Some time we need to create our own custom controls. For Eg. Radio button is a common control in android but it is not available in Xamarin Forms. If the developer wants to use this control then he has to create a custom control and write a renderer to use the control in Xamarin Android.

Lets see how to create a custom control in Xamarin Forms.

The Two important steps that we need to do

• Create your own custom Xamarin.Forms control.
• Create a renderer in each platform that will be used to display the custom control.

Create your own custom Xamarin.Forms control.

Lets create a CustomRadioButton control in Xamarin Forms which inherits form a View Class. The CustomRadioButton class has two Bindable properties which provides the state of the control whether it is checked or unchecked.

public class CustomRadioButton : View
 {
 public static readonly BindableProperty CheckedProperty =
 BindableProperty.Create<CustomRadioButton, bool>(
 p => p.Checked, false);

 public static readonly BindableProperty TextProperty =
 BindableProperty.Create<CustomRadioButton, string>(
 p => p.Text, string.Empty);
 public bool Checked
 {
 get
 {
 return (bool)GetValue(CheckedProperty);
 }

set
 {
 this.SetValue(CheckedProperty, value);
 if (Command != null) { Command.Execute(this.CommandParameter); }
 }
 }

 public string Text
 {
 get
 {
 return (string)GetValue(TextProperty);
 }

set
 {
 this.SetValue(TextProperty, value);
 }
 }
 }

Create a renderer in each platform that will be used to display the custom control.

Now lets create a RadioButtonRenderer for the CusomtRadioButton control. Xamarin Android has a build in radio button control so lets use that control.

public class RadioButtonRenderer :  ViewRenderer<CustomRadioButton, RadioButton>
 {

protected override void OnElementChanged(ElementChangedEventArgs<CustomRadioButton> e)
 {
 base.OnElementChanged(e);

if (e.OldElement != null)
 {
 e.OldElement.PropertyChanged += ElementOnPropertyChanged;
 }

if (this.Control == null)
 {
 var radButton = new RadioButton(this.Context);
 this.SetNativeControl(radButton);
 }

Control.Text = e.NewElement.Text;
 Control.Checked = e.NewElement.Checked;
 Element.PropertyChanged += ElementOnPropertyChanged;
 }

void ElementOnPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
 {
 switch (e.PropertyName)
 {
 case "Checked":
 Control.Checked = Element.Checked;
 break;
 case "Text":
 Control.Text = Element.Text;
 break;
 }
 }
 }

now we have the custom renderer which will render our custom control. In OnElementChanged method we are setting the RadioButton as the native control and registering for the property changed event when the element is clicked the control triggers and changes the custom controls bindable property. OnElementChanged method provides the Element, which is our Xamarin.Forms CusomtRadioButton control and the Control which is the RadioButton set using the SetNativeControl method.

That’s it, lets use this control.

 MainPage = new ContentPage
 {
 Content = new StackLayout
 {
 VerticalOptions = LayoutOptions.Center,
 HorizontalOptions = LayoutOptions.Center,
 Children = {
 new CustomRadioButton {
 Checked = true,
 Text = "Daily DotNet Tips!"
 }
 }
 }
 };

Hope this post might have helped.