CollectionView scroll in .NET MAUI disturbs UI when there are more data

Question

CollectionView UI gets overlapped when perform scroll in iOS -> iPad device. Check the attached image.

MyPage.xaml

<Grid IsVisible="{Binding IsBusy, Converter={StaticResource inverseBooleanConverter}}"
         RowDefinitions="auto, auto, auto, *, auto, auto">

        <StackLayout
                    Padding="0"
                    BackgroundColor="WhiteSmoke"
                    Grid.Row="0">
            <StackLayout
                        Orientation="Horizontal"
                        Margin="10,20">

                <ImageButton
                            HorizontalOptions="Start"
                            HeightRequest="22"
                            WidthRequest="22"
                            Command="{Binding Path=NavigateToRootCommand}"
                            Margin="5,0">
                    <ImageButton.Source>
                        <FontImageSource Glyph="{x:Static helper:MaterialFontHelper.ChevronDown}"
                                         Color="{StaticResource Black}"
                                         Size="22"
                                         FontFamily="MaterialDesignIcons"/>

                    </ImageButton.Source>
                </ImageButton>

                <Label
                      Style="{StaticResource LabelValueStyle}"
                      Text="Retail Food"
                      HorizontalOptions="Start"/>

                <Label
                      Style="{StaticResource LabelValueStyle}"
                      Text="NA"
                      HorizontalOptions="EndAndExpand"/>

            </StackLayout>
            <StackLayout.Shadow>
                <Shadow
                       Brush="Black"
                       Offset="10,5"
                       Opacity="0.3" />
            </StackLayout.Shadow>
        </StackLayout>
        <Label
              Grid.Row="1"
              Padding="10,20,0,20"
              LineBreakMode="TailTruncation"
              Text="{Binding Path=InspectionTitle}"
              Style="{StaticResource LabelTitleStyle}"/>

        <BoxView
                Grid.Row="2"
                HeightRequest="0.3"
                BackgroundColor="#ECECEC"/>

        <CollectionView
            Grid.Row="3"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"
            ItemsSource="{Binding HealthViolationCodeRefs}">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid
                             RowDefinitions="auto, auto, 5"
                             RowSpacing="5"
                             ColumnDefinitions="40, *, 5">

                            <CheckBox
                                     Grid.Row="0"
                                     VerticalOptions="CenterAndExpand"
                                     Margin="0,5,0,0"
                                     IsChecked="{Binding Path=IsSelected}"
                                     CheckedChanged="CheckBox_CheckedChanged"
                                     Color="DarkGray"
                                     Grid.Column="0">
                            </CheckBox>

                            <Label
                                  Padding="10,10,0,0"
                                  Text="{Binding Path=CodeNumber}"
                                  Style="{StaticResource LabelTitleStyle}"
                                  Grid.Row="0" Grid.Column="1">
                                <Label.GestureRecognizers>
                                    <TapGestureRecognizer
                                                         Command="{Binding Source={x:Reference _this},
                                                                   Path=BindingContext.ViolationCodeTapCommand}"
                                                                   CommandParameter="{Binding .}"/>
                                </Label.GestureRecognizers>
                            </Label>

                            <Label
                                  Grid.Row="1"
                                  Grid.Column="1"
                                  Padding="10,0"
                                  Margin="{OnPlatform iOS='0,0,20,0'}"
                                  Style="{StaticResource LabelKeyStyle}"
                                  HorizontalOptions="StartAndExpand"
                                  MaxLines="4"
                                  Text="{Binding Path=CodeText}"/>

                            <BoxView
                                    HeightRequest="0.3"
                                    Grid.Row="2"
                                    Grid.Column="0"
                                    Grid.ColumnSpan="3"
                                    BackgroundColor="#ECECEC"/>
                        </Grid>
                    </DataTemplate>

                </CollectionView.ItemTemplate>
        </CollectionView>
      <StackLayout BackgroundColor="WhiteSmoke" Grid.Row="5" VerticalOptions="EndAndExpand" Orientation="Horizontal">
            <Button
                    Margin="0,10,15,10"
                    Command="{Binding Path=NavigateToViolationItemDetailsCommand}"
                    Text="Next"
                    IsEnabled="{Binding Path=IsNextEnabled}"
                    Padding="30,10"
                    HorizontalOptions="EndAndExpand"
                    CornerRadius="5"/>
    </StackLayout>
</Grid>

I have tried to remove bounce and animation using Handler like we do in Xamarin.Forms using custom renderer

namespace YourAppName.iOS.Renderers
{
    public class NoBounceScrollViewRenderer : ScrollViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                // Disable bounce effect
                Bounces = false;
            }
        }
    }
}

But there is no such properties like Bounce or AlwaysBounceVertical in .NET MAUI CollectionView. Does anyone know how to fix this?

Reported new bug in Maui: https://github.com/dotnet/maui/issues/15983

Answer 1

RowDefinitions="auto, auto, auto, *, auto, auto">

Row 3 is fill.

<CollectionView
            Grid.Row="3"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"
            ItemsSource="{Binding HealthViolationCodeRefs}">

VerticalOptions is fill.

I have seen more than one complain about this. (If you want, I can do the search for you)

1. Remove VerticalOptions and test.
2. Add HeightRequest=300 and test.
3. Make sure you do not have any AUTO before * and test. (or was the other way around)

You will not like this, but more or less all you can do is to make it work somehow. You may have to redesign the whole thing. I am waiting myself for more than one fix for the collection view. It is bug infested.