I want to Display Square Checkbox on IOS ,IPad in xamarin form

Question

This Below is my IOS Page .I want to show this type of check box on iOS in xamarin form. I have use Xamarin 5.0 version. When I am try to use check element in iOS show rounded check box but I want square check box.

 <CheckBox  x:Name="chkRememberMe"  BackgroundColor="#7E7E7E" SizeChanged="20" IsChecked="False" CheckedChanged="ChkRememberMe_OnCheckedChanged" ></CheckBox>

This is my check box code what can I do that in iOS for a square checkbox.I'm completely new to xamarin.forms, I need to add a checkbox, radio buttons and drop down list. I tried some samples from net but I'm not able to get the checkbox. Can anyone help me to achieve.Controls.Checkbox to create checkbox for ios and andorid in Xamarin Forms.Now i am getting the checkbox but i cant read the value either it is checked or not.Here is my code

Answer 1

You could use the plugin Xamarin.Forms.InputKit from nuget .

xmlns:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"

 <input:CheckBox Text="xxx" Type="Check"/>

If you want to customize the style of the checkbox , you could check https://github.com/enisn/Xamarin.Forms.InputKit/wiki/CheckBox .

Answer 2

If you don't want to change the check boxes on other platforms, you can use a custom renderer to only change how it looks on iOS.

Subclass the CheckBox in your shared project: public class CustomCheckBox : CheckBox {}

And add the custom renderer to the iOS project:

using CoreGraphics;
using UIKit;
using Xamarin.Forms.Platform.iOS;
using Xamarin.Forms;
using YourApp.iOS;
using YourApp.Controls; // namespace of your CustomCheckBox
using System.ComponentModel;

[assembly: ExportRenderer(typeof(CustomCheckBox), typeof(CustomCheckBoxRenderer))]
namespace YourApp.iOS
{
    public class CustomCheckBoxRenderer : ViewRenderer<CustomCheckBox, UIView>
    {
        private const float SideLength = 18f;
        private bool firstTime = true;

        protected override void OnElementChanged(ElementChangedEventArgs<CustomCheckBox> e)
        {
            base.OnElementChanged(e);
            if (Control == null)
            {
                var checkBox = new UIView();
                SetNativeControl(checkBox);
            }
        }
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == CustomCheckBox.IsCheckedProperty.PropertyName || firstTime)
            {
                SetNeedsDisplay();
            }
        }

        public override void Draw(CGRect rect)
        {
            Element.Color.ToUIColor().SetStroke();
            if (Element.IsChecked)
            {
                var checkPath = new UIBezierPath();
                checkPath.MoveTo(new CGPoint(1 + .2 * SideLength, 1 + .475 * SideLength));
                checkPath.AddLineTo(new CGPoint(1 + .45 * SideLength, 1 + .675 * SideLength));
                checkPath.AddLineTo(new CGPoint(1 + .8 * SideLength, 1 + .275 * SideLength));
                checkPath.LineWidth = 3f;
                checkPath.Stroke();
            }

            var boxPath = UIBezierPath.FromRoundedRect(
                new CGRect(1f, 1f, SideLength, SideLength), UIRectCorner.AllCorners, new CGSize(2,2));
            boxPath.LineWidth = 2f;
            boxPath.Stroke();
            firstTime = false;
        }

        public override CGSize SizeThatFits(CGSize size)
        {
            return new CGSize(SideLength + 2, SideLength + 2);
        }
    }
}