.NET MAUI CarouselView Items Not Visible in Release Mode

[NimmoLtd]

Description

I have a CarouselView for displaying an ObservableCollection of type ImageSource.
[ObservableProperty] private ObservableCollection<ImageSource> _workOrderPhotosList = new();

An API call gets said images and adds them to the collection. This works fine in Debug mode with no issue, images are added to the collection and are displayed correctly.

In Release mode however, images are added to the collection but they are invisible. I know they are there as the IndicatorView populates showing either 1 or more dots, and I can swipe to flick through the collection even though there are no images visible.

Can anybody shed some light on why this may be? I am using Compiled Bindings, as indicated at the top of my XAML:
x:DataType="viewModels:WorkOrderDetailsViewModel"

I have ReSharper installed, so IntelliSense is showing me that the CarouselView ItemsSrouce is correctly bound to the WorkOrderDetailsViewModel, with the path WorkOrdersPhotosList

ItemsSource="{Binding (WorkOrderDetailsViewModel). Path=WorkOrderPhotosList}"

Code if call is successful:

if (response.IsSuccessStatusCode)
{
    var jsonResponse = await response.Content.ReadAsStringAsync();
    using JsonDocument doc = JsonDocument.Parse(jsonResponse);

    var imageSources = new ObservableCollection<ImageSource>();
    foreach (var element in doc.RootElement.EnumerateArray())
    {
        var base64Image = element.GetString();
        var imageBytes = Convert.FromBase64String(base64Image);
        var imageSource = ImageSource.FromStream(() => new MemoryStream(imageBytes));
        imageSources.Add(imageSource);
    }

    WorkOrderPhotosList.Clear();
    foreach (var imageSource in imageSources)
    {
        WorkOrderPhotosList.Add(imageSource);
    }
}

XAML for IndicatorView and CarouselView :

<IndicatorView x:Name="AttachmentsIndicatorView"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="Start"
               IndicatorColor="White" 
               IndicatorSize="12" 
               SelectedIndicatorColor="CornflowerBlue" 
               Grid.Row="2"
               Margin="0,-2,0,10"/>

<CarouselView x:Name="CarouselView"
              Grid.Row="3"
              IsVisible="{Binding HasAttachments}"
              ItemsSource="{Binding WorkOrderPhotosList}"
              IndicatorView="AttachmentsIndicatorView"
              Loop="True"
              HeightRequest="200"
              HorizontalScrollBarVisibility="Never"
              VerticalScrollBarVisibility="Never"
              IsScrollAnimated="True"
              IsSwipeEnabled="True"
              IsBounceEnabled="True">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding .}"
                   Aspect="AspectFill"
                   HeightRequest="200">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer 
                        NumberOfTapsRequired="1"
                        Command="{Binding Source={RelativeSource AncestorType={x:Type viewModels:WorkOrderDetailsViewModel}}, Path=ImageTappedCommand}"
                        CommandParameter="{Binding .}" />
                </Image.GestureRecognizers>
            </Image>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

Steps to Reproduce

1. Add a CarouselView in XAML to a .NET MAUI project.
2. Bind an ObservableCollection of type ImageSource to its ItemsSource.
3. Attach an IndicatorView to the Carousel.
4. Run solution in debug mode.
5. Run solution in release mode.

Output

• Expected: Images from collection to display in the CarouselView normally, as they do in debug mode.
• Actual: Images are not visible in release mode, but are in debug mode.

Link to public reproduction project repository

No response

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

Android, I was not able test on other platforms

Affected platform versions

Android 13 - API 33

Did you find any workaround?

#19357 (comment)

Relevant log output

No response

[ghost]

Hi @NimmoLtd. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback to reproduce the issue but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

[ESO-ST]

We have the same issue with iOS, for us adding a dummy await Task.Delay(1); after the carousel is shown but right before we set its items fixed the issue.

[ghost]

Hi @NimmoLtd. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback to reproduce the issue but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

[bebenlebricolo]

Same exact issue with CollectionView in release mode.
The "workaround" is to specify the DataType in the DataTemplate tag :

<DataTemplate x:DataType="datamodels:MyModel">
                    <Grid>
                        <controls:MyControl BindingContext="{Binding .}" />
                    </Grid>
</DataTemplate>

Try with and without the DataType property, that's the only difference that makes it work like you expect.
Found the original solution here : https://stackoverflow.com/questions/75283345/collectionview-working-in-debug-but-not-in-release-in-net-maui/75285858#75285858

Many thanks to its original contributor (more than one year ago)

[Hrishikesh46779]

I faced the same issue. @bebenlebricolo comment solved my problem. After adding DataTemplate x:DataType="x:String" to my CarouselView the label became visible.