How to create CheckBox in Xamarin.Forms ?

Introduction:
In Xamarin.Forms, there is no default CheckBox control available and we need to create our own custom CheckBox control. This article can explain you about to create CheckBox control and it's properties.  

Requirements:

• This article source code is prepared by using Visual Studio Community for Mac (7.3.2). And it is better to install latest visual studio updates from here.
• This sample project is Xamarin.Forms project and tested in Android emulator and iOS simulator.

Description:

This article can explain you below topics:

1. How to create Xamarin.Forms PCL project with Visual studio for Mac?

2. How to create CheckBox in Xamarin.Forms app?

3. How to use custom CheckBox in Xamarin.Forms?

1. How to create Xamarin.Forms PCL project with Visual studio for Mac?

Before to create CheckBox control, first we need to create the new Xamarin.Forms project. 

• Launch Visual Studio for Mac.
• On the File menu, select New Solution.
• The New Project dialog appears. The left pane of the dialog lets you select the type of templates to display. In the left pane Multiplatform > App > Xamarin.Forms > Forms App and click on Next.
  
• Enter your App Name (Ex: CheckBoxSample). Select Target Platforms to Android & iOS and Shared Code to Portable Class Library  after that click on Next button.
  
• You can choose your project location like below and Create new project.
  

After that your new Xamarin.Forms will be load with default MVVM pattern which will have three folders name like Models, Views, ViewModels. So remove all files inside that folders and later we will add our own files in this article.

2. How to create CheckBox in Xamarin.Forms app?

If you search for CheckBox in Xamarin.Forms in internet you will find more resources to create CheckBox and you may find mostly two answers like below
1. We can create our own CheckBox by inheriting ContentView.
2. We can use Nuget package library like XLabs.form. But this is having more bugs and is no longer maintained, and even says so on the github repo.

In this article, we are choosing first option to create CheckBox by inheriting ContentView. And please follow below few steps for the same

Step 1: Create ContentView

We are following default MVVM design pattern. And here we will place custom controls in Controls folder. So right click on your project name CheckBoxSample => Add => New Folder name is "Controls". After that right click on your newly created the folder => Add => New File => Forms => Forms ContentView Xaml and name it CheckBox.

Step 2: Add UI to CheckBox

In general, CheckBox control required major four elements.

• Title: Here we will take Label control to display title of CheckBox.
• Border: Here we will take one Image control that will hold BorderImageSource.
• Checkmark: Here we will take one Image control that will hold CheckMarkSource. And this check mark visibility should be based on user tap interaction which should deal by the some other property like IsChecked. I mean if IsChecked is True, check mark should be visible or else not visible.
• Background: Here we will take one Image control that will hold BackGroundImageSource

So in your content view we need three Image controls and one label.
Now open CheckBox.xaml and add below code.

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <ContentView xmlns="http://xamarin.com/schemas/2014/forms"   
3.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"   
4.     x:Class="CheckBoxSample.Controls.CheckBox">  
5.     <ContentView.Content>  
6.         <StackLayout Orientation="Horizontal"  
7.                      x:Name="mainContainer"  
8.                      HorizontalOptions="FillAndExpand"  
9.                      VerticalOptions="FillAndExpand"  
10.                      Padding="0"  
11.                      Spacing="5">  
12.             <AbsoluteLayout HorizontalOptions="Center"  
13.                             VerticalOptions="Center"  
14.                             WidthRequest="20"  
15.                             HeightRequest="20"  
16.                             x:Name="imageContainer">  
17.                 <Image Source="{Binding CheckedBackgroundImageSource}"  
18.                        x:Name="checkedBackground"  
19.                        Aspect="AspectFit"  
20.                        AbsoluteLayout.LayoutBounds="0.5, 0.5, 1, 1"  
21.                        AbsoluteLayout.LayoutFlags="All"  
22.                        Opacity="0"  
23.                        InputTransparent="True"/>  
24.                 <Image Source="{Binding BorderImageSource}"  
25.                        x:Name="borderImage"  
26.                        Aspect="AspectFit"  
27.                        AbsoluteLayout.LayoutBounds="0.5, 0.5, 1, 1"  
28.                        AbsoluteLayout.LayoutFlags="All"  
29.                        InputTransparent="True"/>  
30.                 <Image Source="{Binding CheckmarkImageSource}"  
31.                        x:Name="checkedImage"  
32.                        Aspect="AspectFit"  
33.                        AbsoluteLayout.LayoutBounds="0.5, 0.5, 1, 1"  
34.                        AbsoluteLayout.LayoutFlags="All"  
35.                        Opacity="0"  
36.                        InputTransparent="True"/>  
37.             </AbsoluteLayout>  
38.             <Label x:Name="controlLabel"  
39.                    HorizontalOptions="FillAndExpand"  
40.                    VerticalOptions="FillAndExpand"  
41.                    HorizontalTextAlignment="Start"  
42.                    VerticalTextAlignment="Center"  
43.                    Text="{Binding Title}"  
44.                    Style="{Binding LabelStyle}"  
45.                    InputTransparent="True"/>  
46.         </StackLayout>  
47.     </ContentView.Content>  
48. </ContentView>  

Step 3: Add properties to CheckBox
We are going to add below Bindable properties for our CheckBox control.

• TitleProperty: To bind tile of check box.
• LabelStyleProperty: To to set style to Title label.
• IsCheckedProperty: To maintain CheckBox states for check or uncheck.
• BorderImageSourceProperty: To set Border image for CheckBox.
• CheckedBackgroundImageSourceProperty:To set Background image for CheckBox.
• CheckMarkImageSourceProperty: To set CheckMark image for CheckBox.
• CheckedChangedCommandProperty:  To make interaction with checkbox when user tap on it's main container.

Also we are applying animation while check box taking up check mark and hiding it.

Now open CheckBox.Xaml.cs and add below code.

1. using System;  
2. using System.Collections.Generic;  
3. using Xamarin.Forms;  
4. using Xamarin.Forms.Xaml;  
5.   
6. namespace CheckBoxSample.Controls  
7. { /// <summary>  
8.   /// Custom checkbox control  
9.   /// </summary>  
10.     [XamlCompilation(XamlCompilationOptions.Compile)]  
11.   
12.     public partial class CheckBox : ContentView  
13.     {  
14.         public CheckBox()  
15.         {  
16.             InitializeComponent();  
17.             controlLabel.BindingContext = this;  
18.             checkedBackground.BindingContext = this;  
19.             checkedImage.BindingContext = this;  
20.             borderImage.BindingContext = this;  
21.             mainContainer.GestureRecognizers.Add(new TapGestureRecognizer()  
22.             {  
23.                 Command = new Command(tapped)  
24.             });  
25.         }  
26.   
27.         public static readonly BindableProperty BorderImageSourceProperty = BindableProperty.Create(nameof(BorderImageSource), typeof(string), typeof(CheckBox), "", BindingMode.OneWay);  
28.         public static readonly BindableProperty CheckedBackgroundImageSourceProperty = BindableProperty.Create(nameof(CheckedBackgroundImageSource), typeof(string), typeof(CheckBox), "", BindingMode.OneWay);  
29.         public static readonly BindableProperty CheckmarkImageSourceProperty = BindableProperty.Create(nameof(CheckmarkImageSource), typeof(string), typeof(CheckBox), "", BindingMode.OneWay);  
30.         public static readonly BindableProperty IsCheckedProperty = BindableProperty.Create(nameof(IsChecked), typeof(bool), typeof(CheckBox), false, BindingMode.TwoWay, propertyChanged: checkedPropertyChanged);  
31.         public static readonly BindableProperty TitleProperty = BindableProperty.Create(nameof(Title), typeof(string), typeof(CheckBox), "", BindingMode.OneWay);  
32.         public static readonly BindableProperty CheckedChangedCommandProperty = BindableProperty.Create(nameof(CheckedChangedCommand), typeof(Command), typeof(CheckBox), null, BindingMode.OneWay);  
33.         public static readonly BindableProperty LabelStyleProperty = BindableProperty.Create(nameof(LabelStyle), typeof(Style), typeof(CheckBox), null, BindingMode.OneWay);  
34.   
35.         public string BorderImageSource  
36.         {  
37.             get { return (string)GetValue(BorderImageSourceProperty); }  
38.             set { SetValue(BorderImageSourceProperty, value); }  
39.         }  
40.   
41.         public string CheckedBackgroundImageSource  
42.         {  
43.             get { return (string)GetValue(CheckedBackgroundImageSourceProperty); }  
44.             set { SetValue(CheckedBackgroundImageSourceProperty, value); }  
45.         }  
46.   
47.         public string CheckmarkImageSource  
48.         {  
49.             get { return (string)GetValue(CheckmarkImageSourceProperty); }  
50.             set { SetValue(CheckmarkImageSourceProperty, value); }  
51.         }  
52.   
53.         public bool IsChecked  
54.         {  
55.             get { return (bool)GetValue(IsCheckedProperty); }  
56.             set { SetValue(IsCheckedProperty, value); }  
57.         }  
58.   
59.         public string Title  
60.         {  
61.             get { return (string)GetValue(TitleProperty); }  
62.             set { SetValue(TitleProperty, value); }  
63.         }  
64.   
65.         public Command CheckedChangedCommand  
66.         {  
67.             get { return (Command)GetValue(CheckedChangedCommandProperty); }  
68.             set { SetValue(CheckedChangedCommandProperty, value); }  
69.         }  
70.   
71.         public Style LabelStyle  
72.         {  
73.             get { return (Style)GetValue(LabelStyleProperty); }  
74.             set { SetValue(LabelStyleProperty, value); }  
75.         }  
76.   
77.         public Label ControlLabel  
78.         {  
79.             get { return controlLabel; }  
80.         }  
81.   
82.         static void checkedPropertyChanged(BindableObject bindable, object oldValue, object newValue)  
83.         {  
84.             ((CheckBox)bindable).ApplyCheckedState();  
85.   
86.         }  
87.   
88.         /// <summary>  
89.         /// Handle chackox tapped action  
90.         /// </summary>  
91.         void tapped()  
92.         {  
93.             IsChecked = !IsChecked;  
94.             ApplyCheckedState();  
95.         }  
96.   
97.         /// <summary>  
98.         /// Reflect the checked event change on the UI  
99.         /// with a small animation  
100.         /// </summary>  
101.         /// <param name="isChecked"></param>  
102.         ///   
103.         void ApplyCheckedState()  
104.         {  
105.             Animation storyboard = new Animation();  
106.             Animation fadeAnim = null;  
107.             Animation checkBounceAnim = null;  
108.             Animation checkFadeAnim = null;  
109.             double fadeStartVal = 0;  
110.             double fadeEndVal = 1;  
111.             double scaleStartVal = 0;  
112.             double scaleEndVal = 1;  
113.             Easing checkEasing = Easing.CubicIn;  
114.   
115.             if (IsChecked)  
116.             {  
117.                 checkedImage.Scale = 0;  
118.                 fadeStartVal = 0;  
119.                 fadeEndVal = 1;  
120.                 scaleStartVal = 0;  
121.                 scaleEndVal = 1;  
122.                 checkEasing = Easing.CubicIn;  
123.             }  
124.             else  
125.             {  
126.                 fadeStartVal = 1;  
127.                 fadeEndVal = 0;  
128.                 scaleStartVal = 1;  
129.                 scaleEndVal = 0;  
130.                 checkEasing = Easing.CubicOut;  
131.             }  
132.             fadeAnim = new Animation(  
133.                     callback: d => checkedBackground.Opacity = d,  
134.                     start: fadeStartVal,  
135.                     end: fadeEndVal,  
136.                     easing: Easing.CubicOut  
137.                     );  
138.             checkFadeAnim = new Animation(  
139.                 callback: d => checkedImage.Opacity = d,  
140.                 start: fadeStartVal,  
141.                 end: fadeEndVal,  
142.                 easing: checkEasing  
143.                 );  
144.             checkBounceAnim = new Animation(  
145.                 callback: d => checkedImage.Scale = d,  
146.                 start: scaleStartVal,  
147.                 end: scaleEndVal,  
148.                 easing: checkEasing  
149.                 );  
150.   
151.             storyboard.Add(0, 0.6, fadeAnim);  
152.             storyboard.Add(0, 0.6, checkFadeAnim);  
153.             storyboard.Add(0.4, 1, checkBounceAnim);  
154.             storyboard.Commit(this, "checkAnimation", length: 600);  
155.   
156.             if (CheckedChangedCommand != null && CheckedChangedCommand.CanExecute(this))  
157.                 CheckedChangedCommand.Execute(this);  
158.         }  
159.     }  
160. }  

We complete creation of CheckBox and it will also support data binding. So we can dynamically supply all properties of checkbox.

4. How to use custom CheckBox in Xamarin.Forms?

Now we are ready to our own CheckBox control. Before to use it, let's create one ContentPage in Views folder.

To create page, right click on Views folder => Add =>New File => Forms => Forms ContentPage Xaml and name it HomePage like below.

To use CheckBox in our xaml page. First we need declare namespace of CheckBox.

1. xmlns:ctrls="clr-namespace:CheckBoxSample.Controls"  

And then we can use CheckBox like below

1. <ctrls:CheckBox x:Name="cbIndia" Title="India" IsChecked="True" BorderImageSource="checkborder" CheckedBackgroundImageSource="checkcheckedbg" CheckmarkImageSource="checkcheckmark" />  

Here we set the values for the CheckBox properties are 

Title: India

IsChecked: True

BorderImageSource: checkborder.png

CheckBackgroundImageSource: checkcheckedbg.png

CheckmarkImageSource: checkcheckmark.png

We should add all above images to Android drawable folder and for iOS Resources folder

We can also use our CheckBox inside ListView like below as our control can support databinding:

1. <ListView x:Name="CountryListView"  
2.                 HorizontalOptions="FillAndExpand"  
3.                 VerticalOptions="FillAndExpand"  
4.                 HasUnevenRows="True"  
5.                 BackgroundColor="White"  
6.                 ItemsSource="{Binding CountryList}" Margin="5" HeightRequest="200">  
7.                 <ListView.ItemTemplate>  
8.                     <DataTemplate>  
9.                         <ViewCell>  
10.                              <StackLayout Padding="5">  
11.                                 <ctrls:CheckBox x:Name="cbUS" Title="{Binding Name}" IsVisible="{Binding IsVisible}" IsChecked="{Binding IsSelected}" BorderImageSource="checkborder" CheckedBackgroundImageSource="checkcheckedbg" CheckmarkImageSource="checkcheckmark" />  
12.                             </StackLayout>  
13.                         </ViewCell>  
14.                     </DataTemplate>  
15.                 </ListView.ItemTemplate>  
16.             </ListView>  

Now open HomePage.xaml file, add below total source code.

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"   
3.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
4.     x:Class="CheckBoxSample.Views.HomePage"  
5.     xmlns:ctrls="clr-namespace:CheckBoxSample.Controls" >  
6.     <StackLayout>  
7.         <StackLayout x:Name="stackPanel" Margin="20,20,0,0">  
8.            <Label Text="CheckBox inside ListBox" FontSize="25" FontAttributes="Bold" />  
9.             <ListView x:Name="CountryListView"  
10.                 HorizontalOptions="FillAndExpand"  
11.                 VerticalOptions="FillAndExpand"  
12.                 HasUnevenRows="True"  
13.                 BackgroundColor="White"  
14.                 ItemsSource="{Binding CountryList}" Margin="5" HeightRequest="200">  
15.                 <ListView.ItemTemplate>  
16.                     <DataTemplate>  
17.                         <ViewCell>  
18.                              <StackLayout Padding="5">  
19.                                 <ctrls:CheckBox x:Name="cbUS" Title="{Binding Name}" IsVisible="{Binding IsVisible}" IsChecked="{Binding IsSelected}" BorderImageSource="checkborder" CheckedBackgroundImageSource="checkcheckedbg" CheckmarkImageSource="checkcheckmark" />  
20.                             </StackLayout>  
21.                         </ViewCell>  
22.                     </DataTemplate>  
23.                 </ListView.ItemTemplate>  
24.             </ListView>   
25.   
26.             <Label Text="Countries CheckBox Individual:" FontSize="25" FontAttributes="Bold" />  
27.             <ctrls:CheckBox x:Name="cbIndia" Title="India" IsChecked="True" BorderImageSource="checkborder" CheckedBackgroundImageSource="checkcheckedbg" CheckmarkImageSource="checkcheckmark" />  
28.             <ctrls:CheckBox x:Name="cbUK" Title="UK" BorderImageSource="checkborder" CheckedBackgroundImageSource="checkcheckedbg" CheckmarkImageSource="checkcheckmark" />  
29.             <ctrls:CheckBox x:Name="cbUS" Title="US" BorderImageSource="checkborder" CheckedBackgroundImageSource="checkcheckedbg" CheckmarkImageSource="checkcheckmark" />  
30.                    
31.         </StackLayout>  
32.      </StackLayout>  
33. </ContentPage>  

For example, if you want to use CheckBox from code behind.

1. void CreateCheckBox()  
2.        {  
3.            CheckBox checkbox = new CheckBox();  
4.            checkbox.IsChecked = true;  
5.            checkbox.IsVisible = true;  
6.            checkbox.Title = "Japan";  
7.            checkbox.BorderImageSource = "checkborder";  
8.            checkbox.CheckedBackgroundImageSource = "checkcheckedbg";  
9.            checkbox.CheckmarkImageSource = "checkcheckmark";  
10.            stackPanel.Children.Add(checkbox);  
11.        }  

 For example, if you want to bind CheckBox from code behind.

1. void CheckBoxBinding(){  
2.             Country country = new Country();  
3.             country.Name = "Singapore";  
4.             country.IsSelected = false;  
5.             country.IsVisible = true;  
6.   
7.             CheckBox checkbox = new CheckBox();  
8.             checkbox.BindingContext = country;  
9.             checkbox.SetBinding(CheckBox.IsCheckedProperty, "IsSelected", BindingMode.TwoWay);  
10.             checkbox.SetBinding(CheckBox.IsVisibleProperty, "IsVisible");  
11.             checkbox.SetBinding(CheckBox.TitleProperty, "Name");  
12.             checkbox.BorderImageSource = "checkborder";  
13.             checkbox.CheckedBackgroundImageSource = "checkcheckedbg";  
14.             checkbox.CheckmarkImageSource = "checkcheckmark";  
15.             stackPanel.Children.Add(checkbox);  
16.         }  

In above code, we bind the CheckBox with Country class object properties (Name, IsSelected, IsVisibile). So let's create Country Class in Model folder. To create class, right click on Models folder => Add =>New File => General => Empty Class and name it Country like below.

Now open Country class and add below properties.

1. using System;  
2. using System.Collections.Generic;  
3. using System.ComponentModel;  
4. using System.Runtime.CompilerServices;  
5.   
6. namespace CheckBoxSample  
7. {  
8.     public class Country: INotifyPropertyChanged  
9.     {  
10.         public string Name { get; set; }  
11.   
12.         bool isVisible;  
13.         public bool IsVisible  
14.         {  
15.             get { return isVisible; }  
16.             set { SetProperty(ref isVisible, value); }  
17.         }  
18.   
19.         bool isSelected;  
20.         public bool IsSelected  
21.         {  
22.             get { return isSelected; }  
23.             set { SetProperty(ref isSelected, value); }  
24.         }  
25.         protected bool SetProperty<T>(ref T backingStore, T value,  
26.             [CallerMemberName]string propertyName = "",  
27.             Action onChanged = null)  
28.         {  
29.             if (EqualityComparer<T>.Default.Equals(backingStore, value))  
30.                 return false;  
31.   
32.             backingStore = value;  
33.             onChanged?.Invoke();  
34.             OnPropertyChanged(propertyName);  
35.             return true;  
36.         }  
37.  
38.         #region INotifyPropertyChanged  
39.         public event PropertyChangedEventHandler PropertyChanged;  
40.         protected void OnPropertyChanged([CallerMemberName] string propertyName = "")  
41.         {  
42.             var changed = PropertyChanged;  
43.             if (changed == null)  
44.                 return;  
45.   
46.             changed.Invoke(this, new PropertyChangedEventArgs(propertyName));  
47.         }  
48.         #endregion  
49.     }  
50. }  

For example, in our xaml page we used ListView and want to bind list of country CheckBox Items from code behind. 

Then create one ViewModel class that will create list of country object and then set the ListView ItemsSource property to list object. So to create class right click on ViewModels folder and create it with name of HomeViewModel.cs.  Open HomeViewModel class and create list of country objects like below:

1. using System;  
2. using System.Collections.Generic;  
3. using System.ComponentModel;  
4. using System.Runtime.CompilerServices;  
5.   
6. using Xamarin.Forms;  
7.   
8. namespace CheckBoxSample.ViewModels  
9. {  
10.     public class HomeViewModel  
11.     {  
12.         public HomeViewModel()  
13.         {  
14.             CountryList = new List<Country>();  
15.             CountryList.Add(new Country(){Name="Country1", IsSelected=true, IsVisible=true});  
16.             CountryList.Add(new Country() { Name = "Country2", IsSelected = true, IsVisible = true });  
17.             CountryList.Add(new Country() { Name = "Country3", IsSelected = false, IsVisible = true });  
18.             CountryList.Add(new Country() { Name = "Country4", IsSelected = true, IsVisible = true });  
19.             CountryList.Add(new Country() { Name = "Country5", IsSelected = false, IsVisible = true });  
20.             CountryList.Add(new Country() { Name = "Country6", IsSelected = true, IsVisible = true });  
21.         }  
22.   
23.         public List<Country> CountryList { get; set; }  
24.     }  
25. }  

Then assign view model object to home page BindingContext. Let's see overview of total source code of HopePage.xaml.cs file.

1. using System;  
2. using System.Collections.Generic;  
3. using CheckBoxSample.Controls;  
4. using CheckBoxSample.ViewModels;  
5. using Xamarin.Forms;  
6.   
7. namespace CheckBoxSample.Views  
8. {  
9.     public partial class HomePage : ContentPage  
10.     {  
11.         HomeViewModel _homeViewModel;  
12.         public HomePage()  
13.         {  
14.             InitializeComponent();  
15.             BindingContext= _homeViewModel = new HomeViewModel();  
16.             CreateCheckBox();  
17.             CheckBoxBinding();  
18.         }  
19.   
20.         /// <summary>  
21.         /// Creating checkbox with assigned values (Bg, border, title, selection)  
22.         /// </summary>  
23.         void CreateCheckBox()  
24.         {  
25.             CheckBox checkbox = new CheckBox();  
26.             checkbox.IsChecked = true;  
27.             checkbox.IsVisible = true;  
28.             checkbox.Title = "Japan";  
29.             checkbox.BorderImageSource = "checkborder";  
30.             checkbox.CheckedBackgroundImageSource = "checkcheckedbg";  
31.             checkbox.CheckmarkImageSource = "checkcheckmark";  
32.             stackPanel.Children.Add(checkbox);  
33.         }  
34.   
35.         /// <summary>  
36.         /// Checkbox binding with homeViewModel  
37.         /// </summary>  
38.         void CheckBoxBinding(){  
39.             Country country = new Country();  
40.             country.Name = "Singapore";  
41.             country.IsSelected = false;  
42.             country.IsVisible = true;  
43.   
44.             CheckBox checkbox = new CheckBox();  
45.             checkbox.BindingContext = country;  
46.             checkbox.SetBinding(CheckBox.IsCheckedProperty, "IsSelected", BindingMode.TwoWay);  
47.             checkbox.SetBinding(CheckBox.IsVisibleProperty, "IsVisible");  
48.             checkbox.SetBinding(CheckBox.TitleProperty, "Name");  
49.             checkbox.BorderImageSource = "checkborder";  
50.             checkbox.CheckedBackgroundImageSource = "checkcheckedbg";  
51.             checkbox.CheckmarkImageSource = "checkcheckmark";  
52.             stackPanel.Children.Add(checkbox);  
53.         }  
54.     }  
55. }  

Demo Screens from Android:

Demo Screens from iOS:

You can directly work on below sample source code to understand the this article. 

FeedBack Note: Please share your thoughts, what you think about this post, Is this post really helpful for you? Otherwise, it would be very happy, if you have any thoughts for to implement this requirement in any other way? I always welcome if you drop comments on this post and it would be impressive.

Follow me always at @Subramanyam_B
Have a nice day by Subramanyam Raju :)