Application Crash Issue with Data Binding in .NET MAUI 8 CollectionView and ObservableCollection

[gauravK996]

Description

We are currently facing an issue related to data binding when using .NET MAUI's CollectionView in conjunction with ObservableCollection. The problem appears to be affecting the expected behavior of the data binding mechanism, resulting in unexpected outcomes. Application consistently crashes, specifically when multiple data items are added in bulk and scrolling is performed within the CollectionView.

Steps to Reproduce

Create a .NET MAUI 8 project with a CollectionView.
Bind the CollectionView to an ObservableCollection.
Perform add, remove, clear operations on the ObservableCollection.
Observe the application crash, especially with multiple data items and scrolling.

Link to public reproduction project repository

No response

Version with bug

8.0.3

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

7.0.101

Affected platforms

Windows

Affected platform versions

No response

Did you find any workaround?

Temporary workaround: It appears that introducing a Task.Delay(50) in specific scenarios helps mitigate the problem.
But the application continues to crash despite the introduction of Task.Delay

Relevant log output

No response

[ghost]

Hi @gauravK996. 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.

[malsabi]

Im also having this issue on iOS whenever i call Clear method and re add items the app crashes.

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[gauravK996]

I encountered the issue described above in Windows, if there's any possibility of addressing this in the next service release, it would be incredibly beneficial for our ongoing work.

The provided code example illustrates the issue, and I believe an early fix could greatly contribute to the stability and functionality of our project.

-----------------------C# Code-------------------------------

    public ObservableCollection<string> UploadedPhotos { get; set; }


    /// <summary>
    /// Load images into the collection view using AddRange
    /// </summary>
    public void LoadImagesCollectionView(string folderPath)
    {
        MainThread.BeginInvokeOnMainThread(() =>
        {
            UploadedPhotos.Clear();
            var imageFiles = GetImagesFromLocalDrive(folderPath) //20 or more images
            try
            {                    
                UploadedPhotos.AddRange(imageFiles);
            }
            catch (Exception ex)
            {
                LogHandler.LogError(ex);
            }
        });
    }
    
    /// <summary>
    /// Load images into the collection view  using Add method
    /// </summary>
    public void LoadImagesCollectionView2(string folderPath)
    {
        MainThread.BeginInvokeOnMainThread(() =>
        {
            UploadedPhotos.Clear();
            var imageFiles = GetImagesFromLocalDrive() //20 or more images
            try
            {
                foreach (var image in imageFiles)
                {
                    UploadedPhotos.Add(image);
                }    
            }
            catch (Exception ex)
            {
                LogHandler.LogError(ex);
            }
        });
    }

    /// <summary>
    /// Load images into the collection view  using Add method without MainThread.BeginInvokeOnMainThread
    /// </summary>
    public void LoadImagesCollectionView3(string folderPath)
    {
            UploadedPhotos.Clear();
            var imageFiles = GetImagesFromLocalDrive() //20 or more images
            try
            {
                foreach (var image in imageFiles)
                {
                    UploadedPhotos.Add(image);
                }    
            }
            catch (Exception ex)
            {
                LogHandler.LogError(ex);
            }
    }

---------------- XAML Code -----------------
<CollectionView Grid.Row="0" Grid.Column="0" ItemsSource="{Binding UploadedPhotos}" VerticalScrollBarVisibility="Always"> <CollectionView.ItemsLayout> <GridItemsLayout HorizontalItemSpacing="4" Orientation="Vertical" Span="3" VerticalItemSpacing="4" /> </CollectionView.ItemsLayout> <CollectionView.ItemTemplate> <DataTemplate> <Grid> <Border Padding="0" StrokeShape="RoundRectangle 6" StrokeThickness="2"> <Image Margin="5" Aspect="AspectFill" BackgroundColor="White" Source="{Binding .}"/> </Border> </Grid> </DataTemplate> </CollectionView.ItemTemplate> <CollectionView.EmptyView> <StackLayout Padding="60" HorizontalOptions="Center" VerticalOptions="Center"> <Image HorizontalOptions="Center" Source="folder_empty.png" VerticalOptions="Center" /> </StackLayout> </CollectionView.EmptyView> </CollectionView>

[bronteq]

I have the same issue in Maui Windows 8.0.6 SR1.

A workaround that seems working is to create a new ObservableCollection, do the work on it and finally assign the new collection to the binded one.

Try this:

public void LoadImagesCollectionView3(string folderPath)
{
	UploadedPhotos.Clear();
	ObservableCollection<string> tmp = new();
	var imageFiles = GetImagesFromLocalDrive() //20 or more images
	try
	{
		foreach (var image in imageFiles)
		{
			tmp.Add(image);
		}
		UploadedPhotos = tmp;
	}
	catch (Exception ex)
	{
		LogHandler.LogError(ex);
	}
}

I also tried this, but does not work with CollectionViews with IsGrouped="True" property and collections with more than one grouping

public void LoadImagesCollectionView3(string folderPath)
    {
            UploadedPhotos.Clear();
            UploadedPhotos = new();
            var imageFiles = GetImagesFromLocalDrive() //20 or more images
            try
            {
                foreach (var image in imageFiles)
                {
                    UploadedPhotos.Add(image);
                }    
            }
            catch (Exception ex)
            {
                LogHandler.LogError(ex);
            }
    }

[gauravK996]

When I am using an image or image button element with collectionView and binding the image source, the application crashes. (static image source working fine)
Example- Source="{Binding ImageURL}"- Crash
Source="abc.png"- Working
Workaround: It appears that introducing a custom view with skiasharp to render images is working perfectly.

.NET MAUI 8.0.14.

[malsabi]

All issues were resolved after using ReactiveUI DynamicData. Clearing / Filtering / Sorting the List will not cause any exceptions or crash in iOS. I also tested on Windows / Android. It's perfect.

[ctigrisht]

I get a crash on windows when I put carousel views inside of a collection view. Please fix asap

[tcimran]

Was anyone able to find a solutions? i tried to Initialize ObservableCollection object with the loaded data.
Where Tasks is an ObservableCollection and tasking the temporary list in loop then i assigned to it.
Tasks = new ObservableCollection(tasking);

[CathyZhu0110]

I created a sample project, can repro this issue on Windows platform using Visual Studio 17.12.0 Preview 5(MAUI: 9.0.0-rc.2.24503.2, 8.0.92 & 8.0.3), and I also can repro it on 17.11.5(MAUI:7.0.101)DataBinding.zip