CarouselView in Xamarin Forms (iOS) repaint issue

Question

I am tring to use the Xamarin Forms 5 CarouselView to allow a user to sipe through a calendar. There are a couple of issues one on iOS and one on Android. The iOS issue is that on initial paint it looks like this:

Note that the Frame is missing any data and it's RHS border. If I slightly slide the carousel to the left (not actually off page), it repaints and the data and border is drawn

The markup that I am using for the Carousel is the root Element in a ContentPage

<CarouselView
    CurrentItem="{Binding CurrentDay}"
    HorizontalScrollBarVisibility="Never"
    ItemsSource="{Binding Days}"
    Loop="True"
    VerticalScrollBarVisibility="Never">
    <CarouselView.Behaviors>
        <behaviors:CarouselCurrentItemChangedToCommandBehavior CurrentItemChangedCommand="{Binding DayChangedCommand}" />
    </CarouselView.Behaviors>
    <CarouselView.ItemTemplate>
        <DataTemplate x:DataType="viewmodels:DayItemViewModel">
            <Grid>
                <ActivityIndicator
                    Grid.Row="0"
                    Margin="12"
                    HorizontalOptions="Center"
                    HeightRequest="45"
                    IsEnabled="{Binding IsLoading}"
                    IsRunning="{Binding IsLoading}"
                    IsVisible="{Binding IsLoading}"
                    WidthRequest="45" />
                <CollectionView
                    Grid.Row="0"
                    Margin="28,28,28,8"
                    IsVisible="{Binding IsLoaded}"
                    ItemTemplate="{StaticResource DayItemTemplateSelector}"
                    ItemsSource="{Binding Entries}">
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout Orientation="Vertical" VerticalItemSpacing="8" />
                    </CollectionView.ItemsLayout>
                </CollectionView>
            </Grid>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

I see this output in the Debug window

The behavior of the UICollectionViewFlowLayout is not defined because: the item width must be less than the width of the UICollectionView minus the section insets left and right values, minus the content insets left and right values. Please check the values returned by the delegate. The relevant UICollectionViewFlowLayout instance is <Xamarin_Forms_Platform_iOS_GridViewLayout: 0x1385f1e80>, and it is attached to <UICollectionView: 0x13941ac00; frame = (0 0; 359 688); clipsToBounds = YES; autoresize = W+H; gestureRecognizers = <NSArray: 0x283dd6ca0>; backgroundColor = UIExtendedGrayColorSpace 0 0; layer = <CALayer: 0x28387ea80>; contentOffset: {0, 0}; contentSize: {359, 264}; adjustedContentInset: {0, 0, 0, 0}; layout: <Xamarin_Forms_Platform_iOS_GridViewLayout: 0x1385f1e80>; da taSource: <Xamarin_Forms_Platform_iOS_GroupableItemsViewController_1: 0x12ef09ae0>>. 2023-06-30 14:24:38.220 ProjectBreatheApp.iOS[2007:340600] Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger.

Any thoughts on how I can programatically force that repaint or ensure the item is displayed correctly initially

Answer 1

I switched to use a StackLayout with Bindablelayouts wrapped in a ScrollView and it now works

<CarouselView.ItemTemplate>
    <DataTemplate x:DataType="viewmodels:DayItemViewModel">
        <Grid>
            <ScrollView>
                <StackLayout
                Grid.Row="0"
                Margin="28,28,28,8"
                BindableLayout.ItemTemplateSelector="{StaticResource DayItemTemplateSelector}"
                BindableLayout.ItemsSource="{Binding Entries}"
                Orientation="Vertical"
                Spacing="4"
                VerticalOptions="Start" />
            </ScrollView>
            <ActivityIndicator
            Grid.Row="0"
            Margin="12"
            HeightRequest="45"
            HorizontalOptions="Center"
            IsEnabled="{Binding IsLoading}"
            IsRunning="{Binding IsLoading}"
            IsVisible="{Binding IsLoading}"
            WidthRequest="45" />
        </Grid>
    </DataTemplate>
</CarouselView.ItemTemplate>

I did try Syncfusion's CarouselView but it worked in a different way and had an odd way of transitioning from item to item.