.NET Maui TapGestureRecognizer not working

Question

I am currently working on a Maui project in .NET 8 but I have troubles with the TapGestureRecognizer I use in a CollectionView.

Snippet from my XAML:

<ContentPage.BindingContext>
    <viewmodel:SearchLoadingListVM />
</ContentPage.BindingContext>

<Page.Behaviors>
    <ctk:StatusBarBehavior StatusBarColor="#005ea8" StatusBarStyle="LightContent" />
</Page.Behaviors>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="40*" />
        <RowDefinition Height="60*" />
    </Grid.RowDefinitions>


    <VerticalStackLayout Grid.Row="0"
                         Grid.RowSpan="2"
                         Margin="0,30,0,0">

        <Image Source="deliveryboximage.png"
               HeightRequest="150" />

        <HorizontalStackLayout HorizontalOptions="Center">
            <Entry BackgroundColor="White"
                   HeightRequest="40"
                   WidthRequest="280"
                   MaxLength="10"
                   TextTransform="Uppercase"
                   Placeholder="Auftragsnummer"
                   HorizontalTextAlignment="Start"
                   Margin="0,0,-80,0"
                   IsEnabled="{Binding IsEntryEnabled}"
                   Text="{Binding EntryTextValue}"
                   TextColor="Black" />


            <ImageButton Source="barcode_scanner.svg"
                         Scale="0.7"
                         Margin="0,0,0,7"
                         Command="{Binding ScanBarCodeCommand}" />

            <ImageButton Source="search.svg"
                         Scale="0.7"
                         Margin="-5,0,0,7"
                         Command="{Binding ExecuteSearchCommand}" />


        </HorizontalStackLayout>

    </VerticalStackLayout>
    <ScrollView IsEnabled="{Binding IsScrollViewEnabled}"
                Grid.Row="1">
        <CollectionView
            ItemsSource="{Binding LoadingListCollection}"
            HorizontalOptions="Center"
            SelectionMode="None">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="{x:Type x:String}">
                    <Grid Padding="2">
                        <Frame BorderColor="LightGray">
                            <Frame.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:SearchLoadingListVM}}, Path=ItemTapedCommand}"
                                                      CommandParameter="{Binding .}" />
                            </Frame.GestureRecognizers>
                            <HorizontalStackLayout>
                                <Label Text="{Binding .}"
                                       FontSize="22"
                                       TextColor="Black" />

                            </HorizontalStackLayout>
                        </Frame>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ScrollView>
</Grid>

The generated code by the MVVM Community Toolkit:

partial class SearchLoadingListVM
{
    /// <summary>The backing field for <see cref="ItemTapedCommand"/>.</summary>
    [global::System.CodeDom.Compiler.GeneratedCode("CommunityToolkit.Mvvm.SourceGenerators.RelayCommandGenerator", "8.2.0.0")]
    private global::CommunityToolkit.Mvvm.Input.AsyncRelayCommand<string>? itemTapedCommand;
    /// <summary>Gets an <see cref="global::CommunityToolkit.Mvvm.Input.IAsyncRelayCommand{T}"/> instance wrapping <see cref="ItemTaped"/>.</summary>
    [global::System.CodeDom.Compiler.GeneratedCode("CommunityToolkit.Mvvm.SourceGenerators.RelayCommandGenerator", "8.2.0.0")]
    [global::System.Diagnostics.CodeAnalysis.ExcludeFromCodeCoverage]
    public global::CommunityToolkit.Mvvm.Input.IAsyncRelayCommand<string> ItemTapedCommand => itemTapedCommand ??= new global::CommunityToolkit.Mvvm.Input.AsyncRelayCommand<string>(new global::System.Func<string, global::System.Threading.Tasks.Task>(ItemTaped));
}

The VM (ItemTaped() should be called):

public partial class SearchLoadingListVM : ObservableObject

{
    [ObservableProperty]
    private ObservableCollection<string> loadingListCollection;

    [ObservableProperty]
    private string entryTextValue;

    [ObservableProperty]
    private bool isEntryEnabled = true;

    [ObservableProperty]
    private bool isScrollViewEnabled;

    private WebService.WebService webService;

    public SearchLoadingListVM()
    {
        CheckPermission();

        loadingListCollection = new ObservableCollection<string>();
        webService = new WebService.WebService();
    }

    [RelayCommand]
    public async void ScanBarCode()
    {
        IsEntryEnabled = false;
        await Shell.Current.GoToAsync( nameof( CodeScannerView ) );
        IsEntryEnabled = true;
    }

    [RelayCommand]
    public async void ExecuteSearch()
    {
        if( !string.IsNullOrEmpty( EntryTextValue ) )
        {
            IsEntryEnabled = false;
            await Shell.Current.Navigation.PushModalAsync( new BusyIndicationModal() );
            LoadingListCollection = await webService.GetLoadingListsAsync( EntryTextValue );
            if( LoadingListCollection.Count == 0 )
            {
                
            }

            await Shell.Current.Navigation.PopModalAsync();
            IsEntryEnabled = true;
        }
    }

    [RelayCommand]
    async Task ItemTaped( string item )
    {
        await Shell.Current.Navigation.PushAsync( new CameraView() );
    }

    async Task CheckPermission()
    {
        PermissionStatus status = await Permissions.CheckStatusAsync<Permissions.Camera>();

        if( status != PermissionStatus.Granted )
        {
            status = await Permissions.RequestAsync<Permissions.Camera>();
        }
    }

I did copy the XAML code from a video by James Montemagno and the answers from this question.
Interestingly it did work before but after the last Visual Studio update my whole solution broke and even after restoring some of the before used code it doenst work.
When I set Break Points at the two methods seen above, the studio doenst broke at any of them. There are also some other RelayCommands implemented which all work fine, so I guess the problem is my XAML?

Does anybody know if I missed out anything or why it doenst work?

Thank you in advance!

Answer 1

I can reproduce this issue.

That because you set <ScrollView IsEnabled="{Binding IsScrollViewEnabled}". The default value of IsScrollViewEnabled is false. You disable the parent control (ScrollView), the child control is also disabled.

You may also find the text is gray. If you set IsScrollViewEnabled=true. Then the label textcolor will be black and the command will be fired.

Please let me know if you have any questions.