Google How to create CheckBox in Xamarin.Forms ? | SubramanyamRaju Xamarin & Windows App Dev Tutorials

Saturday, 10 March 2018

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, ViewsViewModels. 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 { getset; }  
  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(thisnew 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 { getset; }  
  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. 
CheckBoxSample

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  :)

No comments:

Post a Comment

Search Engine Submission - AddMe