Creating Custom Controls in Xamarin.Forms on IOS.

In our previous post we have seen how to create a custom control like RadioButton in Xamarin forms on Android. In this post we will see how to create the Radio button for iOS. By default iOS don’t support RadioButton, so what can we do is to create a simple UIButton and set an image to it on Selected and Normal state. Lets see how to do this in detail.

Related Post: Creating Custom Controls in Xamarin.Forms on Android.

The Three important steps that we need to do

Create your own radio button Xamarin.Forms control.
Create your own iOS View to support Radio Button
Create a renderer in iOS platform that will be used to display the custom control.

Create your own radio button 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&amp;lt;CustomRadioButton, bool&amp;gt;(
 p =&amp;gt; p.Checked, false);
 
 public static readonly BindableProperty TextProperty =
 BindableProperty.Create&amp;lt;CustomRadioButton, string&amp;gt;(
 p =&amp;gt; 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 your own iOS View to support Radio Button

lets create a RadioView which inherits from the UIButton control in iOS. Create two properties which is similar to the properties defined in the radio button control in Xamarin Forms. Initialize the control with the images which displays the checked state of the radio button when the button is in selected state then set the image which displays the unchecked state of the radio button when the button is in normal state. By doing this we can display the UIButton as a RadioButton in iOS.

 public class RadioView : UIButton
 {
 public RadioButtonView()
 {
 Initialize();
 }
 
 public bool Checked
 {
 set { this.Selected = value; }
 get { return this.Selected; }
 }

 public string Text
 {
 set { this.SetTitle(value, UIControlState.Normal); } 
 }

 void Initialize()
 {
 this.HorizontalAlignment = UIControlContentHorizontalAlignment.Left;
 this.ImageEdgeInsets = new UIEdgeInsets(0f, 8f, 0f, 0f);
 this.TitleEdgeInsets = new UIEdgeInsets(0f, 16f, 0f, 0f);
 this.SetImage(UIImage.FromBundle("checked.png"), UIControlState.Selected);
 this.SetImage(UIImage.FromBundle("unchecked.png"), UIControlState.Normal);
 this.TouchUpInside += (sender, args) =&amp;gt;; this.Selected = !this.Selected;
 } 
 }

Now that’s it, Your Xamarin forms controls is ready and your iOS Radio button control is also ready the only this that is missing is the Renderer for the Radio button in iOS, lets create it.

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

Lets see how to create the renderer for the iOS RadioButton control.

 public class RadioButtonRenderer : ViewRenderer&amp;lt;CustomRadioButton, RadioButtonView&amp;gt;
 {

 protected override void OnElementChanged(ElementChangedEventArgs&amp;lt;CustomRadioButton&amp;gt; e)
 {
 base.OnElementChanged(e);

 if (Control == null)
 {
 var radio= new RadioView();
radio.TouchUpInside += (s, args) =&amp;gt; Element.Checked = Control.Checked;
 SetNativeControl(radio);
 }

 if (this.Element == null) return;

 BackgroundColor = this.Element.BackgroundColor.ToUIColor();
 Control.Text = this.Element.Text;
 Control.Checked = this.Element.Checked;
 Control.SetTitleColor(UIColor.Black, UIControlState.Normal);
 }

 protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
 {
 base.OnElementPropertyChanged(sender, e);

 switch (e.PropertyName)
 {
 case "Checked":
 Control.Checked = Element.Checked;
 break;
 case "Text":
 Control.Text = Element.Text;
 break;
 default:
 return;
 }
 }
 }

now we have the custom renderer for iOS which will render our custom RadioView control. In OnElementChanged method we are setting the RadioView as the native control and registering for the TouchUpInside 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 RadioView 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!"
}
}
}
}