CarouselView - Content disappears when 'Loop' is false and inside ScrollView

[bradencohen]

Description

When utilizing CarouselView that is nested in a ScrollView, the content does not display/disappears on scroll when the Loop property is set to false.

With Outer ScrollView

Without Outer ScrollView

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage">
    <ScrollView>
        <Grid x:Name="contentGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="220" />
            </Grid.RowDefinitions>

            <Grid.Resources>
                <DataTemplate x:Key="SampleItemTemplate">
                    <VerticalStackLayout Spacing="4">
                        <Label Text="{Binding Title, Mode=OneWay}" FontAttributes="Bold" />
                        <Label Text="{Binding Description, Mode=OneWay}" />
                    </VerticalStackLayout>
                </DataTemplate>
            </Grid.Resources>

            <CarouselView x:Name="carousel"
                         ItemTemplate="{StaticResource SampleItemTemplate}"
                         Loop="False"
                         HeightRequest="220"
                         Grid.Row="0"
                         BackgroundColor="LightBlue" />
        </Grid>
    </ScrollView>
</ContentPage>

private class SampleCarouselItem
{
    public SampleCarouselItem( string title, string description )
    {
        Title = title;
        Description = description;
    }

    public string Title { get; set; }
    public string Description { get; set; }
}

var exampleItems = new List<SampleCarouselItem>
{
    new SampleCarouselItem( "First", "First CarouselView item" ),
    new SampleCarouselItem( "Second", "Second CarouselView item" ),
    new SampleCarouselItem( "Third", "Third CarouselView item" ),
    new SampleCarouselItem( "Fourth", "Fourth CarouselView item" ),
    new SampleCarouselItem( "Fifth", "Fifth CarouselView item" ),
};

carousel.ItemsSource = exampleItems;

Steps to Reproduce

1. Create a new MAUI app
2. Add a new CarouselView inside of a ScrollView
3. Set the Loop property to False
4. Observe bug

Link to public reproduction project repository

https://github.com/bradencohen/MauiRepros/

Version with bug

8.0.3

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 17+ (maybe earlier)

Did you find any workaround?

Setting Loop to true.

Relevant log output

No response

[bradencohen]

Related, potentially: https://github.com/dotnet/maui/issues/18223

[XamlTest]

Verified this on Visual Studio Enterprise 17.9.0 Preview 4(8.0.3). Repro on iOS 17.2 and MacCatalyst, not repro on Windows 11 and Android 14.0-API34 with below Project: MauiRepros.zip

[RobTF]

+1 encountered this too - another Carousel bug. When Loop=False the content seems to stretch to the entire screen size despite the carousel not being the full size of the page. Makes it completely unusable on iOS.