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?
