How to add Checkbox in Xamarin.Forms in Xaml file?

Question

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 this in xamarin.forms?

Xaml file

<toolkit:CheckBox Text ="Employee"
                  FontSize="20"
                  CheckedChanged ="OnClicked"/>

or

<controls:CheckBox DefaultText="Default text"
                               HorizontalOptions="FillAndExpand"
                               TextColor="Green"
                               FontSize="25"
                               FontName="AmericanTypewriter"/>

Some links or sample code will make it easier to understand.

Answer 1

You need to add the Nuget package called Xlabs.form. Try to import it in your Xaml.cs file like:

using XLabs.Forms.Controls;

In addition, you also have to add the following line in your .cs file:

CheckBox chk=new CheckBox()
            {
                checked=false;
            };

In Xaml it is different:

<CheckBox  x:Name="checked" isSelected="{Binding flag}"/>

Or you can use <controls:checkbox>.

Note: Don't forget to add the below line in the Contentpage of Xaml:

 xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"

Answer 2

I implemented the checkbox and dropdown in the .cs file of xamarin cross platform.I suggest you use cs files for creating the UI.Xamarin is providing the leverage to use any one of the feature either cs file or AXML file to create the UI

using System;
using Xamarin.Forms;
using XLabs.Forms.Controls;

namespace Facedetection
{
    public class firstPage : ContentPage
    {
        string statename;

        public firstPage ()
        {

            CheckBox checkbox = new CheckBox () {
                TextColor=Color.Blue,
                CheckedText="I am checked"

            };

            Picker statepick = new Picker ();
            statepick.WidthRequest = 300;
            statepick.Title = "Select a state";
            statepick.Items.Add ("India");
            statepick.Items.Add ("US");
            statepick.Items.Add ("Arizona");
            statepick.Items.Add ("China");

            statepick.SelectedIndexChanged += (sender, e) => {
                if (statepick.SelectedIndex == -1) {
                    DisplayAlert ("Title", "Item not selected", "ok");
                } else {
                    statename = statepick.Items [statepick.SelectedIndex];
                    Console.WriteLine ("Selected country is:" + statename);
                }
            };




            Content = new StackLayout { 
                Children = {
                    checkbox,statepick
                }
            };
        }
    }
}




worked for me 

Answer 3

I found a better way to do this which is to create your own. It was really quite simple. Create a cs file in a Resources project (or where ever you want) called CheckBox and paste this code:

namespace Resources.Controls
{

public class Checkbox : Button 
{
    public Checkbox()
    {
        base.Image = "Image_Unchecked.png";
        base.Clicked += new EventHandler(OnClicked);
        base.SizeChanged += new EventHandler(OnSizeChanged);
        base.BackgroundColor = Color.Transparent;
        base.BorderWidth = 0;
    }

    private void OnSizeChanged(object sender, EventArgs e)
    {
        //if (base.Height > 0)
        //{
        //    base.WidthRequest = base.Height;
        //}
    }

    public static BindableProperty CheckedProperty = BindableProperty.Create(
        propertyName: "Checked",
        returnType: typeof(Boolean?),
        declaringType: typeof(Checkbox),
        defaultValue: null,
        defaultBindingMode: BindingMode.TwoWay,
        propertyChanged: CheckedValueChanged);

    public Boolean? Checked
    {
        get
        {
            if (GetValue(CheckedProperty) == null)
            {
                return null;
            }
            return (Boolean)GetValue(CheckedProperty);
        }
        set
        {
            SetValue(CheckedProperty, value);
            OnPropertyChanged();
            RaiseCheckedChanged();
        }
    }

    private static void CheckedValueChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (newValue != null && (Boolean)newValue == true)
        {
            ((Checkbox)bindable).Image = "Image_Checked.png";
        }
        else
        {
            ((Checkbox)bindable).Image = "Image_Unchecked.png";
        }
    }

    public event EventHandler CheckedChanged;
    private void RaiseCheckedChanged()
    {
        if (CheckedChanged != null)
            CheckedChanged(this, EventArgs.Empty);
    }

    private Boolean _IsEnabled = true;
    public Boolean IsEnabled
    {
        get
        {
            return _IsEnabled;
        }
        set
        {
            _IsEnabled = value;
            OnPropertyChanged();
            if (value == true)
            {
                this.Opacity = 1;
            }
            else
            {
                this.Opacity = .5;
            }
            base.IsEnabled = value;
        }
    }

    public void OnEnabled_Changed()
    {

    }

    public void OnClicked(object sender, EventArgs e)
    {
        Checked = !Checked;

        // Call the base class event invocation method.
        //base.Clicked(sender, e);
    }

}
}

There is probably a better way to do this but I just added the two images to the appropriate locations in each project (base for UWP, Resources/Drawable for Android).

Then to use it in your Xaml just do something like this (I used a converter bc I was binding to a string value):

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:Resources.Controls;assembly=Resources"
             x:Class="MyNameSpace.CheckBoxExamplePage"
             Title=" Hygiene">
  <Grid Padding="1">
    <ScrollView Padding="4">
      <StackLayout>
        <StackLayout Orientation="Horizontal">
          <controls:Checkbox x:Name="cbHello" Text="Hello CheckBox" Checked="{Binding Path=My.Binding.Path, Converter={StaticResource StringToBoolean}, Mode=TwoWay}" />
        </StackLayout>
        <StackLayout Orientation="Horizontal" Padding="16,0,0,0">
          <controls:Checkbox x:Name="cbDisabled" Text="Disabled Example" IsEnabled="False" Checked="{Binding Path=My.Binding.PathTwo, Converter={StaticResource StringToBoolean}, Mode=TwoWay}" />
        </StackLayout>
      </StackLayout>
    </ScrollView>
  </Grid>
</ContentPage>

Note: You must set the BindingContext in your pages cs file for the check to work. So your Pages code behind file should look like this:

namespace MyNameSpace
{
    public partial class CheckBoxExamplePage
    {
        public CheckBoxExamplePage(object MyBindingObject)
        {
            InitializeComponent();

            this.BindingContext = MyBindingObject;
        }
    }
}

And this is the result!

Hope this helps someone!!

UPDATE:

The following is new code that removes the gray background on disabled and also allows text to wrap if it does not fit on the screen. This uses a ContentView that contains a grid that can expand based on the content.

    public class Checkbox : ContentView
{
    protected Grid ContentGrid;
    protected ContentView ContentContainer;
    public Label TextContainer;
    protected Image ImageContainer;

    public Checkbox()
    {
        var TapGesture = new TapGestureRecognizer();
        TapGesture.Tapped += TapGestureOnTapped;
        GestureRecognizers.Add(TapGesture);

        ContentGrid = new Grid
        {
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand
        };

        ContentGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(42) });
        ContentGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
        ContentGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });

        ImageContainer = new Image
        {
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
        };
        ImageContainer.HeightRequest = 42;
        ImageContainer.WidthRequest = 42;

        ContentGrid.Children.Add(ImageContainer);

        ContentContainer = new ContentView
        {
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
        };
        Grid.SetColumn(ContentContainer, 1);

        TextContainer = new Label
        {
            TextColor = Color.White,
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.FillAndExpand,
        };
        ContentContainer.Content = TextContainer;

        ContentGrid.Children.Add(ContentContainer);

        base.Content = ContentGrid;

        this.Image.Source = "Image_Unchecked.png";
        this.BackgroundColor = Color.Transparent;
    }

    public static BindableProperty CheckedProperty = BindableProperty.Create(
        propertyName: "Checked",
        returnType: typeof(Boolean?),
        declaringType: typeof(Checkbox),
        defaultValue: null,
        defaultBindingMode: BindingMode.TwoWay,
        propertyChanged: CheckedValueChanged);

    public static BindableProperty TextProperty = BindableProperty.Create(
        propertyName: "Text",
        returnType: typeof(String),
        declaringType: typeof(Checkbox),
        defaultValue: null,
        defaultBindingMode: BindingMode.TwoWay,
        propertyChanged: TextValueChanged);

    public Boolean? Checked
    {
        get
        {
            if (GetValue(CheckedProperty) == null)
                return null;
            return (Boolean)GetValue(CheckedProperty);
        }
        set
        {
            SetValue(CheckedProperty, value);
            OnPropertyChanged();
            RaiseCheckedChanged();
        }
    }

    private static void CheckedValueChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (newValue != null && (Boolean)newValue == true)
            ((Checkbox)bindable).Image.Source = "Image_Checked.png";
        else
            ((Checkbox)bindable).Image.Source = "Image_Unchecked.png";
    }

    public event EventHandler CheckedChanged;
    private void RaiseCheckedChanged()
    {
        if (CheckedChanged != null)
            CheckedChanged(this, EventArgs.Empty);
    }

    private Boolean _IsEnabled = true;
    public Boolean IsEnabled
    {
        get { return _IsEnabled; }
        set
        {
            _IsEnabled = value;
            OnPropertyChanged();
            this.Opacity = value ? 1 : .5;
            base.IsEnabled = value;
        }
    }

    public event EventHandler Clicked;
    private void TapGestureOnTapped(object sender, EventArgs eventArgs)
    {
        if (IsEnabled)
        {
            Checked = !Checked;
            if (Clicked != null)
                Clicked(this, new EventArgs());
        }
    }

    private static void TextValueChanged(BindableObject bindable, object oldValue, object newValue)
    {
        ((Checkbox)bindable).TextContainer.Text = (String)newValue;
    }

    public event EventHandler TextChanged;
    private void RaiseTextChanged()
    {
        if (TextChanged != null)
            TextChanged(this, EventArgs.Empty);
    }

    public Image Image
    {
        get { return ImageContainer; }
        set { ImageContainer = value; }
    }

    public String Text
    {
        get { return (String)GetValue(TextProperty); }
        set
        {
            SetValue(TextProperty, value);
            OnPropertyChanged();
            RaiseTextChanged();
        }
    }

}

Answer 4

Based on Kasper Answers, but using the image instead of a button so that it will not show the shadow.

public class CustomCheckbox : Image
{
    private const string CheckboxUnCheckedImage = "checkbox_unchecked";
    private const string CheckboxCheckedImage = "checkbox_checked";

    public CustomCheckbox()
    {
        Source = CheckboxUnCheckedImage;
        var imageTapGesture = new TapGestureRecognizer();
        imageTapGesture.Tapped += ImageTapGestureOnTapped;
        GestureRecognizers.Add(imageTapGesture);
        PropertyChanged += OnPropertyChanged;
    }

    private void ImageTapGestureOnTapped(object sender, EventArgs eventArgs)
    {
        if (IsEnabled)
        {
            Checked = !Checked;
        }
    }

    /// <summary>
    /// The checked changed event.
    /// </summary>
    public event EventHandler<bool> CheckedChanged;

    /// <summary>
    /// The checked state property.
    /// </summary>
    public static readonly BindableProperty CheckedProperty = BindableProperty.Create("Checked", typeof(bool), typeof(CustomCheckbox), false, BindingMode.TwoWay, propertyChanged: OnCheckedPropertyChanged);

    public bool Checked
    {
        get
        {
            return (bool)GetValue(CheckedProperty);
        }

        set
        {
            if (Checked != value)
            {
                SetValue(CheckedProperty, value);
                CheckedChanged?.Invoke(this, value);
            }
        }
    }

    private void OnPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e?.PropertyName == IsEnabledProperty.PropertyName)
        {
            Opacity = IsEnabled ? 1 : 0.5;
        }
    }

    private static void OnCheckedPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var checkBox = bindable as CustomCheckbox;
        if (checkBox != null)
        {
            var value = newValue as bool?;
            checkBox.Checked = value.GetValueOrDefault();
            checkBox.Source = value.GetValueOrDefault() ? CheckboxCheckedImage : CheckboxUnCheckedImage;
        }
    }
}

Answer 5

Since Xamarin.Forms 4.1.0 (shipped Summer 2019) there is a Checkbox built-in! Preferrably we use this in the future. https://devblogs.microsoft.com/xamarin/checkbox-xamarin-forms-4-1-0-pre-release/

Just an example:

<CheckBox IsChecked="True" IsEnabled="False" HorizontalOptions="End" Margin="0"/>

Answer 6

Now Xamarin Forms has their own CheckBox.

<CheckBox IsChecked="{Binding IsChecked}"/>