Learn About XF Checkbox

Hello guys,

I know that creating a beautiful app requires attractive widgets or controls. If we want to make a beautiful app, we'll need enough widgets or controls. And you also know very well that Xamarin does not have enough widgets, such as checkboxes, radio button groups etc.

So, guys, I have come here to make the checkbox control for you.

A checkbox is a selection box or a tick box which is required to a form or window and page, which we can answer by selecting an option for an answer to the question. Or you can use this to select the setting.

So, let's start.

Implementation

• Go to PCL project and right-click on the project.
• And then, select Add and click on New items.
• Here a dialog box appears. Here, I am choosing content view and then giving the name "Checkbox.xaml", click OK.
• Creating ”Checkbox.xaml” content View, we design a View for a custom Checkbox.

XAML CODE=> Checkbox.xaml

<Grid ColumnSpacing="5" HeightRequest="24">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions>
    <Image x:Name="MainImage" Grid.Column="0" Source="chk" HeightRequest="16" WidthRequest="16" Aspect="AspectFit" />
    <Label x:Name="MainLabel" Grid.Column="1" Text="{Binding Text,Mode=TwoWay}" FontSize="Small" TextColor="{Binding TextColor,Mode=TwoWay}" />
</Grid>

Okay, now, I am satisfied with this design so we are setting the properties of text - TextColor, and IsChecked Properties.

Here, we will write some code like below.

C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace XamBuddyApp.CustomControls.CustomView {
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class CheckBox: ContentView {
        public CheckBox() {
            InitializeComponent();
            MainLabel.BindingContext = this;
            IsChecked = false;
            var tgr = new TapGestureRecognizer {
                NumberOfTapsRequired = 1
            };
            tgr.Tapped += ViewOn_Clicked;
            this.GestureRecognizers.Add(tgr);
        }
        private void ViewOn_Clicked(object sender, EventArgs e) {
            Device.BeginInvokeOnMainThread(async () => {
                if (check == true) {
                    await Task.WhenAll(MainImage.FadeTo(0, 100), MainImage.ScaleTo(0, 100), MainImage.TranslateTo(0, 0, 100, Easing.BounceIn));
                    MainImage.Source = "uncheck";
                    check = false;
                    await Task.WhenAll(MainImage.FadeTo(1, 100), MainImage.ScaleTo(1, 100), MainImage.TranslateTo(0, 0, 100, Easing.BounceIn));
                } else {
                    await Task.WhenAll(MainImage.FadeTo(0, 100), MainImage.ScaleTo(0, 100), MainImage.TranslateTo(0, 0, 100, Easing.BounceIn));
                    MainImage.Source = "check";
                    check = true;
                    await Task.WhenAll(MainImage.FadeTo(1, 100), MainImage.ScaleTo(1, 100), MainImage.TranslateTo(0, 0, 100, Easing.BounceIn));
                }
            });
        }
        public static BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), typeof(CheckBox), defaultBindingMode: BindingMode.TwoWay);
        public static BindableProperty TextColorProperty = BindableProperty.Create(nameof(TextColor), typeof(Color), typeof(CheckBox), defaultBindingMode: BindingMode.TwoWay, defaultValue: Color.Black);
        public static BindableProperty IsCheckedProperty = BindableProperty.Create(nameof(IsChecked), typeof(bool), typeof(CheckBox), defaultValue: false, propertyChanged: (bindable, oldVal, newVal) => {
            var matChk = (CheckBox) bindable;
            matChk.check = (bool) newVal;
            if (matChk.IsChecked == true) matChk.MainImage.Source = "check";
            else matChk.MainImage.Source = "uncheck";
        });
        private bool check = false;
        public bool IsChecked {
            get {
                return check;
            }
            set {
                if (IsChecked == true) {
                    MainImage.Source = "check";
                } else {
                    MainImage.Source = "uncheck";
                }
            }
        }
        public string Text {
            get => (string) GetValue(TextProperty);
            set => SetValue(TextProperty, value);
        }
        public Color TextColor {
            get => (Color) GetValue(TextColorProperty);
            set => SetValue(TextColorProperty, value);
        }
    }
}

After XAML and C# Code, finally, we use CheckBox in Xamarin.Forms.

Here is the demo code for testing the CheckBox.

<StackLayout BackgroundColor="#384E70" Padding="30" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
    <chk:CheckBox x:Name="chk" IsChecked="False" Text="This is checkbox" TextColor="Red" />
    <Button x:Name="btntestchk" Text="Test Check Box" Style="{StaticResource buttonStyle}" Clicked="btntestchk_Clicked" />
</StackLayout>

And ButtonClick Code

private void btntestchk_Clicked(object sender, EventArgs e) {
    if (chk.IsChecked == true) DisplayAlert("Info", "Check ", "OK");
    else if (chk.IsChecked == false) DisplayAlert("Info", " Uncheck ", "OK");
}

If you want to see this on my blog, click here and watch my video.