How to Make Checkboxes 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.

Screen: CheckBox Screen

Description:
1 . Create a three folders name like Models, Views, ViewModels.

2 . Create a folders name Converter in this create VisibleConverter class.

3. Use two image one for select.png and another for unselect.png .

4 . Write a code in View folder xaml part.

<StackLayout VerticalOptions=”CenterAndExpand” HorizontalOptions=”CenterAndExpand”>

<Image Source=”unselect.png” IsVisible=”{Binding AgeSelectIcon}” VerticalOptions=”CenterAndExpand” HorizontalOptions=”FillAndExpand”/>

<Image Source=”select.png” IsVisible =”{Binding AgeSelectIcon, Converter={StaticResource inverseBool}}” VerticalOptions=”CenterAndExpand” HorizontalOptions=”FillAndExpand”/>

<StackLayout.GestureRecognizers>

<TapGestureRecognizer Command=”{Binding AgeSelectCommand}”/>

</StackLayout.GestureRecognizers>

<local:CustomLabelBold Text=”I am age 18 or older” TextColor=”Black” FontSize=”18″ HorizontalOptions=”StartAndExpand” VerticalOptions=”CenterAndExpand”/>

</StackLayout>

5 . Write a code in ViewModel folder part.

#region Property

private bool ageSelectIcon;
public bool AgeSelectIcon
{
get { return ageSelectIcon; }
set
{
ageSelectIcon = value;
RaisePropertyChanged(() => AgeSelectIcon);
}
}

#endregion

#region Commands

public RelayCommand AgeSelectCommand
{
get
{
return new RelayCommand(() =>
{
AgeSelectIcon = !AgeSelectIcon;
});
}
}

#endregion

6 . Write a code in Converter folder in this create VisibleConverter class.

public class VisibleConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is bool)
{
return !(bool)value;
}
return value;
}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return !((bool)value);
}
}

7 . Add code in App.xaml .

<!– Region (Check / UnCheck) –>

<converters:VisibleConverter x:Key=”inverseBool”></converters:VisibleConverter>

<!– EndRegion –>

8 . You wil get the following screen.

This screen for Unselect image.

This screen for Select image.

Hopefully this will help you to understand and we have successfully created a CheckBox in Xamarin.Forms .