BindableProperty Command and it parameter are always null in the customer control.

Question

I wanted to create a customer checkbox using image control.
This is a custom control xaml

<?xml version="1.0" encoding="UTF-8"?>
<Image xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="DayInPocket.Controls.CheckBoxControl"
       Source="{Binding UnCheckedIcon}">
    <Image.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding CheckCommand}"/>
    </Image.GestureRecognizers>
    <Image.Triggers>
        <DataTrigger TargetType="Image" Binding="{Binding IsChecked}" Value="true">
            <Setter Property="Source" Value="{Binding CheckedIcon}"/>
        </DataTrigger>
    </Image.Triggers>
</Image>

here is the code behind of the customer control

public partial class CheckBoxControl : Image
    {
        public static readonly BindableProperty IsCheckedProperty =
            BindableProperty.Create(nameof(IsChecked), typeof(bool), typeof(CheckBoxControl), default(bool), BindingMode.TwoWay);

        public static readonly BindableProperty CommandProperty =
           BindableProperty.Create(nameof(Command), typeof(ICommand), typeof(CheckBoxControl), null);

        public static readonly BindableProperty CommandParameterProperty =
           BindableProperty.Create(nameof(CommandParameter), typeof(object), typeof(CheckBoxControl), null);


        public event EventHandler<CheckBoxControlEvent> CheckedChanged;

        public bool IsChecked
        {
            get { return (bool)GetValue(IsCheckedProperty); }
            set { SetValue(IsCheckedProperty, value); }
        }

        public ICommand Command
        {
            get { return (ICommand)GetValue(CommandProperty); }
            set { SetValue(CommandProperty, value); }
        }
        public object CommandParameter
        {
            get { return GetValue(CommandParameterProperty); }
            set { SetValue(CommandParameterProperty, value); }
        }

        public CheckBoxControl()
        {
            InitializeComponent();
            BindingContext = this;
        }
        public ICommand CheckCommand
        {
            get
            {
                return new Command(() =>
                {
                    IsChecked = !IsChecked;
                    CheckedChanged?.Invoke(this, new CheckBoxControlEvent(IsChecked));
                    if (IsChecked)
                    {
                        if (Command == null)
                            return;
                        if (Command.CanExecute(CommandParameter))
                            Command.Execute(CommandParameter);
                    }
                });
            }
        }
    }

Now I can call the customer control like this in my view but the bind command is always null.

<controls:CheckBoxControl 
                                  Command="{Binding CommandTest}"
                                  CommandParameter="{Binding Text}"/>

Answer 1

I found the solution for the problem of the binding command that is null in the customer control. The solution is on this comment in xamarin form forum 428034

Answer 2

Hello,

Welcome to Microsoft Q&A!

I made a minimal test it works fine .

CheckBoxControl

//xaml

   <Image xmlns="http://xamarin.com/schemas/2014/forms"  
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
          x:Class="FormsApp.CheckBoxControl"  
          Source="settings.png">  
         
       <Image.GestureRecognizers>  
           <TapGestureRecognizer Command="{Binding CheckCommand}"/>  
       </Image.GestureRecognizers>  
       <Image.Triggers>  
           <DataTrigger TargetType="Image" Binding="{Binding IsChecked}" Value="true">  
               <Setter Property="Source" Value="dog2.png"/>  
           </DataTrigger>  
       </Image.Triggers>  
   </Image>  

//code behind

   [XamlCompilation(XamlCompilationOptions.Compile)]  
       public partial class CheckBoxControl : Image   
       {  
     
     
           private bool isChecked;  
           public bool IsChecked  
           {  
               get { return isChecked; }  
               set {   
                   isChecked = value;  
                   OnPropertyChanged();  
               }  
           }  
     
           public ICommand CheckCommand { get; set; }  
     
           public CheckBoxControl()  
           {  
               InitializeComponent();  
     
               isChecked = false;  
               CheckCommand = new Command(() => {  
                   IsChecked = !IsChecked;  
               });  
     
               BindingContext = this;                
           }  
       }  

Usage in Page

   xmlns:local="clr-namespace:FormsApp"  
   <local:CheckBoxControl  />  

BTW ,could you provide a basic , minimal project to test ? Your code is not complete .

Thank you.

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.