Binding ICommand in Xamarin Forms Content View - xamarin

Question

I have a custom view which will be used across many pages. I have a Close Button in the Custom View where I need to bind the CloseButton Command in my MainViewModel. Any help would be appreciated.
Here is my HeaderView.xaml.cs file
public partial class HeaderView : ContentView
{
public HeaderView ()
{
InitializeComponent ();
}
public static readonly BindableProperty CloseButtonClickedProperty = BindableProperty.Create(nameof(CloseButtonClick), typeof(ICommand), typeof(HeaderView), null);
public ICommand CloseButtonClick
{
get => (ICommand)GetValue(CloseButtonClickedProperty);
set => SetValue(CloseButtonClickedProperty, value);
}
}
Here is my close button code used in HeaderView.Xaml file
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
HeightRequest="65"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NameSpace.Views.HeaderView" x:Name="headerView">
<Image x:Name="CloseButton" Source="ic_closewhite.png" WidthRequest="20" HeightRequest="20" VerticalOptions="CenterAndExpand" HorizontalOptions="EndAndExpand">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CloseButtonClick, Source={x:Reference headerView}}" />
</Image.GestureRecognizers>
</Image>
</ContentView>
Here is where I am trying to use the command in my MainView.xaml.
<c:HeaderView CloseButtonClick ="{Binding CloseButtonClickCommand}"/>
But it throws an error:

Answer 1

You are doing correct but only one small thing missing that is the x:Name of the ContentView HeaderView.
Just include this line of code in Xaml of HeaderView.
x:Name="headerView"
Here is your modified Xaml:-
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
HeightRequest="65"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Name="headerView"
x:Class="NameSpace.Views.HeaderView" x:Name="headerView">
<Image x:Name="CloseButton" Source="ic_closewhite.png" WidthRequest="20" HeightRequest="20" VerticalOptions="CenterAndExpand" HorizontalOptions="EndAndExpand">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CloseButtonClick, Source={x:Reference headerView}}" />
</Image.GestureRecognizers>
</Image>
</ContentView>

Answer 2

public static readonly BindableProperty CloseButtonClickedProperty = BindableProperty.Create(nameof(CloseButtonClick), typeof(ICommand), typeof(HeaderView), null);
the issue is on this line,as the error message said,
event found for 'CloseButtonClick', or mismatching type between value
and property
you should change CloseButtonClickedProperty to CloseButtonClickProperty .
public static readonly BindableProperty CloseButtonClickedProperty = BindableProperty.Create(nameof(CloseButtonClick), typeof(ICommand), typeof(HeaderView), null);
public ICommand CloseButtonClick
{
get => (ICommand)GetValue(CloseButtonClickedProperty);
set => SetValue(CloseButtonClickedProperty, value);
}
to
public static readonly BindableProperty CloseButtonClickProperty = BindableProperty.Create(nameof(CloseButtonClick), typeof(ICommand), typeof(HeaderView), null);
public ICommand CloseButtonClick
{
get => (ICommand)GetValue(CloseButtonClickProperty);
set => SetValue(CloseButtonClickProperty, value);
}