Xamarin Forms image TapGestureRecognizer command not called

Question

i'm trying to bind a TapGestureRecognizer in an image (as seen here) but the relative Icommand in the ViewModel won't get fired. I'm using lightMVVM framework.

Here's my code:

<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms" 
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
              x:Class="ZoccoloManager.Views.DetailsPage"
              ItemsSource="{Binding Cows}">
    <CarouselPage.ItemTemplate>
        <DataTemplate>
            <ContentPage x:Name="DetailsPage">
                <RelativeLayout>
                    <Image x:Name="fl_left"
                           Source="zoccolo_leftside.png"
                           RelativeLayout.WidthConstraint=
                            "{ConstraintExpression Type=RelativeToParent,
                                                   Property=Width,
                                                   Factor=0.3 }"
                           RelativeLayout.HeightConstraint=
                            "{ConstraintExpression Type=RelativeToParent,
                                                   Property=Height,
                                                   Factor=0.3 }"
                           RelativeLayout.XConstraint =
                            "{ConstraintExpression Type=RelativeToParent,
                                                   Property=Width,
                                                   Factor=0.07}"
                           RelativeLayout.YConstraint =
                           "{ConstraintExpression Type=RelativeToParent,
                                                   Property=Height,
                                                   Factor=0.07}">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding Path=BindingContext.TapImageCommand, Source={x:Reference DetailsPage}}" />
                        </Image.GestureRecognizers>
                    </Image>
                </RelativeLayout>
            </ContentPage>
        </DataTemplate>
    </CarouselPage.ItemTemplate>
</CarouselPage>

and in the ViewModel:

public class DetailsViewModel : ViewModelBase
{
    private readonly INavigationService _navigationService;
    private IRepository _repository;
    public ICommand TapImageCommand { get; private set; }
    public ObservableCollection<Cow> Cows { get; set; }

    public DetailsViewModel(INavigationService navigationService)
    {
        _repository = ServiceLocator.Current.GetInstance<IRepository>();
        Debug.WriteLine(DateTime.Now + ": Calling LoadCows");
        LoadCows();
        Debug.WriteLine(DateTime.Now + ": Called LoadCows");
        _navigationService = navigationService;

        TapImageCommand = new Command(OpenPopup);
    }

    private async Task LoadCows()
    {
        Debug.WriteLine(DateTime.Now + ": Started execution LoadCows");
        await Task.Run(() =>
        {
            Cows = new ObservableCollection<Cow>();
            foreach (var cow in _repository.GetCompany(0).Cows)
            {
                Cows.Add(cow);
            }
        });
        Debug.WriteLine(DateTime.Now + ": Finished execution LoadCows");
    }

     private void OpenPopup()
    {
        Debug.WriteLine("Opening popup ");
    }
}

Everything loads fine, but debugging it the getter of the ICommand TapImageCommand never gets called. The binding to the ObservableCollection is working fine, i have the correct number of pages as the elements in the list.

What am I missing??

Answer 1

Ok, i've figured out what the problem was. The Source={x:Reference DetailsPage} was conflicting with the class name on the xml namespace definition. Adding a proper x:Name in the main Tag CarouselPage and using the same name in the reference, made it working just fine.