MediaElement in CollectionView in TabView will throw exception in iOS and Mac

[jingliancui]

Description

Please see the reproduce

Steps to Reproduce

1. Clone source code from https://github.com/jingliancui/TabViewMediumElementIssue
2. Open code using vs code
3. Debug it in Mac or iOS device(my device is iphone12)

Result:
Exception throw:
An unhandled exception of type 'System.NullReferenceException' occurred in Microsoft.iOS.dll: 'The current view controller cannot be detected.'

Expect:
Should not throw exception

.NET Version

.NET 10.0

Version with bug

1.0.7

Is this a regression from previous behavior?

Not sure, haven't tested other versions

Last Known Working Version

Not sure

Affected platforms

iOS

Affected Platform Versions

No response

Have you found a workaround?

No

Relevant log output

An unhandled exception of type 'System.NullReferenceException' occurred in Microsoft.iOS.dll: 'The current view controller cannot be detected.'

[jingliancui]

If MainPage don't using TabView, it will run fine without exception.

[naveenkumar-sanjeevirayan]

Hi @jingliancui

We have analyzed the reported behavior, and this appears to be a framework-level limitation in .NET MAUI. Specifically, when the MediaElement is used inside a CollectionView DataTemplate, it can lead to runtime exceptions on iOS and Mac Catalyst platforms. This is due to the interaction between native video rendering (AVPlayer) and the view recycling mechanism used by CollectionView.

This issue has already been reported and tracked in the MAUI Community Toolkit repository:

GitHub Issue: [BUG] MediaElement not supported in a DataTemplate on a Page with multiple ItemView controls · Issue #2247 · CommunityToolkit/Maui

Workaround

As of now, we recommend avoiding the use of MediaElement inside a virtualized control such as CollectionView. Instead, you can use a non-virtualized layout like BindableLayout with VerticalStackLayout, which prevents view recycling and avoids the crash.

Please refer to the implementation below:

<VerticalStackLayout BindableLayout.ItemsSource="{Binding ListItems}">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <VerticalStackLayout>
                <Label Text="{Binding TheName}" />
                <toolkit:MediaElement
                    WidthRequest="250"
                    HeightRequest="200" />
            </VerticalStackLayout>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</VerticalStackLayout>

Please feel free to reach out if you need further assistance or a more optimized approach for your scenario.

Regards,
Naveenkumar S

[jingliancui]

Hi @naveenkumar-sanjeevirayan
I believe this is different issue that you descripted.
I've updated the source code's repo.
You can try to run the InPageSampleApp to have a look, thanks.