Image TapGestureRecognizer not working inside CollectionView .NET MAUI

Question

i'm using MVVM pattern, i want to handle when user click on X icon, i'm using TapGestureRecognizer, but it isn't fired

Does anyone has a solution for this?

many thanks

[RelayCommand]
public void CloseBreadcrumbTapped(BreadCrumbViewModel selectedItem)
{
            
            UpdateCommodityTaxonomyWhenBreadCrumbChange(selectedItem);
}

<CollectionView ItemsSource="{Binding Breadcrumb}" HeightRequest="40" ItemsUpdatingScrollMode="KeepLastItemInView">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout Orientation="Horizontal" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <HorizontalStackLayout>
                                <Image InputTransparent="True" Source="ic_back.png" WidthRequest="15" HeightRequest="15" IsVisible="{Binding IsShowBackIcon}" x:DataType="viewmodel:BreadCrumbViewModel"></Image>
                                <Label InputTransparent="True" Text="{Binding Name}" TextColor="White" TextDecorations="Underline" VerticalTextAlignment="Center" Margin="0,0,5,0" x:DataType="viewmodel:BreadCrumbViewModel"/>
                                <Image Source="ic_remove.png" WidthRequest="20" HeightRequest="20" Margin="0,0,5,0">
                                    <Image.GestureRecognizers>
                                        <TapGestureRecognizer Command="{Binding CloseBreadcrumbTappedCommand}" CommandParameter="{Binding .}" NumberOfTapsRequired="1">
                                            
                                        </TapGestureRecognizer>
                                    </Image.GestureRecognizers>
                                </Image>
                            </HorizontalStackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

Answer 1

Hello,

the BindingContext for the Image inside the DataTemplate is an instance of your Model. CloseBreadcrumbTappedCommand is not defined for your Model , CloseBreadcrumbTappedCommand is in your ViewModel, you need to add reference BreadCrumbViewModel.CloseBreadcrumbTappedCommand and no need to add x:DataType="viewmodel:BreadCrumbViewModel"

First, please give a name to your ContentPage like following code.

<ContentPage
             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp3.MainPage"
             x:Name="MyMainPage"
            >

Then, please change your command binding and remove x:DataType="viewmodel:BreadCrumbViewModel", here is CollectionView code.

      <CollectionView ItemsSource="{Binding Breadcrumb}" HeightRequest="40"
 ItemsUpdatingScrollMode="KeepLastItemInView">
                <CollectionView.ItemsLayout>
                    <LinearItemsLayout Orientation="Horizontal" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <HorizontalStackLayout>
                            <Image InputTransparent="True" 
                                   Source="ic_back.png" 
                                   WidthRequest="15"                                                      
                                   HeightRequest="15" 
                                   IsVisible="{Binding IsShowBackIcon}" ></Image>
                            <Label InputTransparent="True" 
                                   Text="{Binding Name}" 
                                   TextColor="Black" 
                                   TextDecorations="Underline" 
                                   VerticalTextAlignment="Center" Margin="0,0,5,0" />
                            <Image Source="icon1.png" 
                                   WidthRequest="20" 
                                   HeightRequest="20" 
                                   Margin="0,0,5,0">
                              <Image.GestureRecognizers>
                                    <TapGestureRecognizer 
                                       Command="{Binding BindingContext.CloseBreadcrumbTappedCommand, Source={x:Reference MyMainPage}}" 
                                      CommandParameter="{Binding .}" 
                                      NumberOfTapsRequired="1">
                                    </TapGestureRecognizer>
                                </Image.GestureRecognizers>
                            </Image>
                       </HorizontalStackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

In the end, please open your BreadCrumbViewModel, then change the parameters from BreadCrumbViewModel to your Model in CloseBreadcrumbTapped method. For example, if you create a model called Bread with Name and IsShowBackIcon property like following code.

public class Bread
{
    public string Name { get; set; }
    public bool IsShowBackIcon { get; set; }
}

Your CloseBreadcrumbTapped method should be changed like following code.

    [RelayCommand]
    public void CloseBreadcrumbTapped(Bread selectedItem)
    {        
        UpdateCommodityTaxonomyWhenBreadCrumbChange(selectedItem);
    }

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.