Прокрутка CollectionView в .NET MAUI нарушает пользовательский интерфейс, когда данных больше

Question

Пользовательский интерфейс CollectionView перекрывается при выполнении прокрутки на устройстве iOS -> iPad. Проверьте прикрепленное изображение.

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>

Я попытался удалить отскок и анимацию с помощью Handler, как мы это делаем в Xamarin.Forms, используя собственный модуль рендеринга.

      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;
            }
        }
    }
}

Но в .NET MAUI CollectionView нет таких свойств, как Bounce или AlwaysBounceVertical. Кто-нибудь знает, как это исправить?

Сообщается о новой ошибке на Мауи: https://github.com/dotnet/maui/issues/15983 .

Answer 1

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

Третий ряд заполнен.

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

Вертикальные параметры — это заливка.

Я видел больше одной жалобы на это. (Если хочешь, могу поискать за тебя)

1. Удалитевертикальныеопции и проверьте.
2. Добавьте HeightRequest=300 и проверьте.
3. Убедитесь, что у вас нет AUTO перед * и протестируйте. (или было наоборот)

Вам это не понравится, но более или менее все, что вы можете сделать, — это как-то заставить это работать. Возможно, вам придется перепроектировать все это. Жду еще не одного исправления для просмотра коллекции. Он заражен ошибками.