Xamarin.Forms: CarouselView not works as expected on iOS - ios

Question

I'm trying to implement CarouselView control with horizontal scroll.
I'm using Xamarin.Forms 5.0.0.2012.
This is the xaml code:
<CarouselView x:Name="carViewArticoliAlt"
Loop="False"
ItemsSource="{Binding ListaProdottiAlt}"
IndicatorView="indicatorView"
IsVisible="{Binding ArticoliAlt}"
HeightRequest="200"
PeekAreaInsets="100">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"
SnapPointsAlignment="Start"
SnapPointsType="Mandatory"
ItemSpacing="20" />
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame HasShadow="True" BorderColor="LightGray"
CornerRadius="5" Padding="5"
HeightRequest="310"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" >
<Frame.GestureRecognizers>
<TapGestureRecognizer
Tapped="TapGestureRecognizer_Tapped"/>
</Frame.GestureRecognizers>
<Grid>
<StackLayout x:Name="stkArticoloAlt">
<ImageButton x:Name="ImageArt"
Source="{Binding ImageArt}"
Aspect="AspectFit"
HeightRequest="80"
Clicked="ImageArt_Clicked"
BackgroundColor="White"/>
<Label Text="{Binding Descrizione}"
Style="{StaticResource labelDescrizioneStyle}"
MaxLines="3" LineBreakMode="TailTruncation"
HeightRequest="55"
FontSize="15"/>
</StackLayout>
</StackLayout>
</Grid>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="indicatorView"
IndicatorColor="LightGray"
SelectedIndicatorColor="DarkGray"
HorizontalOptions="Center" />
On Android platform the control is well rendered, but on iOS the following exception is thrown: Objective-C exception thrown. Name: NSInternalInconsistencyException Reason: negative sizes are not supported in the flow layout.
I followed this tutorial:
https://learn.microsoft.com/it-it/xamarin/xamarin-forms/user-interface/carouselview/scrolling
I noticed that the cause of the exception is the PeekAreaInsets property. Infact, if I don't handle this property, the exception does not occur. However the control is not drawn correctly, since the tabs are overlapping. Android code keeps on running correctly.
As you can see in the image, the cards are all overlapped, even if LinearItemsLayout.Orientation is set to horizontal.

Answer 1

Name: NSInternalInconsistencyException Reason: negative sizes are not supported in the flow layout.
The error indicates that the child's size( in datatemplate) is bigger than parent layout's size.
<CarouselView x:Name="carViewArticoliAlt"
Loop="False"
ItemsSource="{Binding ListaProdottiAlt}"
IndicatorView="indicatorView"
IsVisible="{Binding ArticoliAlt}"
HeightRequest="200" --------->parent's height
PeekAreaInsets="100">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"
SnapPointsAlignment="Start"
SnapPointsType="Mandatory"
ItemSpacing="20" />
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame HasShadow="True" BorderColor="LightGray"
CornerRadius="5" Padding="5"
HeightRequest="310" --------->child's height
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" >
To solve the problem try to remove HeightRequest="200" on CarouselView.

Answer 2

Since the Xamarin.Forms 5 release a new feature has been implemented on the CarouselView: Loop. This seems to be set to True by default and is causing some issues together with the PeakAreaInsets property. I was able to solve/work-around above crash/error by setting Loop="False". Perhaps that also works in your case?