Why am I unable to trigger the click event or command on tapping bottom items in .Net Maui List View / Bindable Stack Layout?

Question

I am developing a .Net Maui application and facing trouble with collection views, more specifically with the List View and the problem persists even if I try bindable layout like Stack Layout by replacing List View.

Only First few items can be tapped. The function in code behind or even the command (in view model) is not triggered when I debug.

For tapping items, I used click event for List View and gestures recognizers for Bindable Layout. I need to go to the detail pages once I tap the item. The behavior should be same for all the items not for the first few items.

By Adding Bindable layout inside border, the issue on android is resolved, but for IOS it still persists.

Refer to the following xaml code:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="MobileApp_MAUI.Views.Support.SupportPage"
    xmlns:model="clr-namespace:MobileApp_MAUI.Model"
    xmlns:viewmodel="clr-namespace:MobileApp_MAUI.ViewModel"
    xmlns:itemtemplate="clr-namespace:MobileApp_MAUI.Views.ContactUs.Templates"
    x:DataType="viewmodel:SupportPageViewModel"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    Title="Support">
    <ScrollView VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never" Grid.Row="0" VerticalOptions="FillAndExpand">
        <StackLayout  BackgroundColor="#f5f2ed">
            <!--MAIN HEADER-->
            <Grid BackgroundColor="{StaticResource XBlue}" Margin="0,0,0,10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="180"  />
                </Grid.RowDefinitions>
                <Label Text="You can browse the frequently asked questions using the search bar or browse by clicking the topic buttons below. If you cannot find the answer to your question please contact us."
                                LineBreakMode="WordWrap"
                       HorizontalOptions="Center"
                       VerticalOptions="Center" BackgroundColor="#004A4A"
                       Padding="20,25,20,25" TextColor="White"
                                FontSize="14"/>
            </Grid>
            <Label Text="Frequently Asked Questions"  FontAttributes="Bold" FontSize="Large"
                           FontFamily="MyFont" Margin="0,0,0,5"
                           Padding="10,10,10,0" TextColor="Black" />
            <ActivityIndicator IsVisible="{Binding IsRunning}" IsRunning="{Binding IsRunning}"  
                            VerticalOptions="Center" Margin="0,30,0,5"
                            />
            <Border Margin="9,9,9,0" Stroke="Transparent" BackgroundColor="Transparent">
                <StackLayout BindableLayout.ItemsSource="{Binding Categories}"  Margin="9,9,9,0" VerticalOptions="FillAndExpand"
                                  BackgroundColor="{StaticResource PageBack}">
                    <BindableLayout.ItemTemplate >
                        <DataTemplate x:DataType="model:FAQCategory" >
                            <Grid Padding="5"  BackgroundColor="White" ColumnSpacing="5" Margin="0,1,0,0" >
                                <Grid.RowDefinitions >
                                    <RowDefinition Height="50" />
                                    <RowDefinition Height="50" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions >
                                    <ColumnDefinition Width=".30*" />
                                    <ColumnDefinition Width=".70*" />
                                </Grid.ColumnDefinitions>
                                <Image Grid.RowSpan="2"
                                   Source="{Binding ImagePath}" Aspect="AspectFill" Margin="5"/>
                                <Label Grid.Column="1" VerticalOptions="Center"
                                   Text="{Binding Category}"
                                   FontFamily="MyFont" FontSize="16"
                                   VerticalTextAlignment="Center"/>
                                <Label Grid.Row="1"
                                   Grid.Column="1"
                                   Text="Read more"
                                   FontAttributes="Bold"
                                   TextColor="{StaticResource XBlue}"/>
                                <Grid.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="Category_ItemTapped"  CommandParameter="{Binding .}" />
                                </Grid.GestureRecognizers>
                            </Grid>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </StackLayout>
            </Border>
        </StackLayout>
    </ScrollView>
</ContentPage>

Answer 1

This is a known issue that being tracked in the link below, you can follow up there.

https://github.com/dotnet/maui/issues/14624

The issue appears again on the latest MAUI release 7.0.81 and 7.0.200 on iOS only. Every Button that doesn’t appear directly on the screen after render will never get clicked. It appears in the 3 following scenarios: Button in a ScrollView, Bindable StackLayout and ListView.

As an alternative solution, you can try to call SizeToFit method on ScrollView's first subview provided by mtopolewski like below:

using Microsoft.Maui.Handlers;
#if IOS
using UIKit;
#endif

namespace IOSScrollviewApp;

public class FixedScrollview : ScrollView
{
  public FixedScrollview()
  {
#if IOS
      ScrollViewHandler.Mapper.AppendToMapping(nameof(IScrollView.ContentSize), OnScrollViewContentSizePropertyChanged);
#endif
  }

#if IOS
  private void OnScrollViewContentSizePropertyChanged(IScrollViewHandler _, IScrollView __)
  {
      if (Handler?.PlatformView is not UIView platformUiView)
          return;
      
      if (platformUiView.Subviews.FirstOrDefault() is not { } contentView)
          return;
      
      contentView.SizeToFit();
  }
#endif
}

Then add namespace to your project xmlns:fixed="clr-namespace:IOSScrollviewApp", replace ScrollView with fixed:FixedScrollview.