search

dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
21.83k stars 1.67k forks source link

Image loading error #21670

Open Phantom-KNA opened 3 months ago

Phantom-KNA commented 3 months ago

Description

The loading of images is terrible, this worked quite well in Microsoft.Maui.Controls and Microsoft.Maui.Controls.Compatibility 8.0.6, this log "[FileUtils] err write to mi_exception_log" is repeated over and over again without stopping, causing the performance of the app to degrade.

Steps to Reproduce

Download repo: Change this line: https://github.com/Phantom-KNA/ImagesBugMaui/blob/139d779efc15062bc930fc6bd41986afa47f9f6a/MainViewModel.cs#L20 by your apikey from TMDB

Link to public reproduction project repository

https://github.com/Phantom-KNA/ImagesBugMaui

Version with bug

8.0.7 SR2

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

8.0.6

Affected platforms

Android

Affected platform versions

No response

Did you find any workaround?

<ItemGroup Condition="'$(TargetFramework)' == 'net8.0-android'">
    <PackageReference Include="Microsoft.Maui.Controls" Version="8.0.6" />
    <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="8.0.6" />
    <PackageReference Include="CommunityToolkit.Maui" Version="7.0.1" />
</ItemGroup>
<ItemGroup Condition="'$(TargetFramework)' != 'net8.0-android'">
      <PackageReference Include="Microsoft.Maui.Controls" Version="8.0.14" />
     <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="8.0.14" />
     <PackageReference Include="CommunityToolkit.Maui" Version="8.0.1" />
</ItemGroup>

Relevant log output

[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[Choreographer] Skipped 85 frames!  The application may be doing too much work on its main thread.
[libEGL] pre_cache appList: ,,
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[OpenGLRenderer] Davey! duration=2144ms; Flags=0, FrameTimelineVsyncId=262895160, IntendedVsync=1882183490503668, Vsync=1882184108734855, InputEventId=0, HandleInputStart=1882184110534605, AnimationStart=1882184110538564, PerformTraversalsStart=1882184110539970, DrawStart=1882185473372730, FrameDeadline=1882183507170334, FrameInterval=1882184110408824, FrameStartTime=16708951, SyncQueued=1882185549530803, SyncStart=1882185549577730, IssueDrawCommandsStart=1882185550193771, SwapBuffers=1882185630546323, FrameCompleted=1882185635449032, DequeueBufferDuration=17760, QueueBufferDuration=275052, GpuCompleted=1882185635449032, SwapBuffersCompleted=1882185631080646, DisplayPresentTime=0, CommandSubmissionCompleted=1882185630546323, 
[OpenGLRenderer] Davey! duration=1483ms; Flags=0, FrameTimelineVsyncId=262895190, IntendedVsync=1882184123049936, Vsync=1882185543331511, InputEventId=0, HandleInputStart=1882185553610803, AnimationStart=1882185553614448, PerformTraversalsStart=1882185553682573, DrawStart=1882185554074553, FrameDeadline=1882184156425797, FrameInterval=1882185553468250, FrameStartTime=16709195, SyncQueued=1882185582936896, SyncStart=1882185636586896, IssueDrawCommandsStart=1882185636846480, SwapBuffers=1882185655133146, FrameCompleted=1882185660358823, DequeueBufferDuration=13021, QueueBufferDuration=229583, GpuCompleted=1882185660358823, SwapBuffersCompleted=1882185655906167, DisplayPresentTime=0, CommandSubmissionCompleted=1882185655133146, 
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[e.imagesbugmaui] This is non sticky GC, maxfree is 8388608 minfree is 2097152
[e.imagesbugmaui] Explicit concurrent copying GC freed 12899(864KB) AllocSpace objects, 0(0B) LOS objects, 75% free, 6669KB/26MB, paused 29us,25us total 20.896ms
[FileUtils] err write to mi_exception_log
[OpenGLRenderer] Davey! duration=762ms; Flags=0, FrameTimelineVsyncId=262895257, IntendedVsync=1882185894104432, Vsync=1882186128022998, InputEventId=0, HandleInputStart=1882186141769656, AnimationStart=1882186141779188, PerformTraversalsStart=1882186141870594, DrawStart=1882186530533250, FrameDeadline=1882185927479567, FrameInterval=1882186141690750, FrameStartTime=16708469, SyncQueued=1882186615193771, SyncStart=1882186615979396, IssueDrawCommandsStart=1882186636751323, SwapBuffers=1882186645267521, FrameCompleted=1882186657731688, DequeueBufferDuration=18177, QueueBufferDuration=317396, GpuCompleted=1882186657731688, SwapBuffersCompleted=1882186646161375, DisplayPresentTime=0, CommandSubmissionCompleted=1882186645267521, 
[monodroid-assembly] open_from_bundles: failed to load assembly System.Xml.XmlSerializer.dll
Loaded assembly: /data/data/com.companyname.imagesbugmaui/files/.__override__/System.Xml.XmlSerializer.dll [External]
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[OpenGLRenderer] Davey! duration=836ms; Flags=0, FrameTimelineVsyncId=262895294, IntendedVsync=1882186145097625, Vsync=1882186629642907, InputEventId=0, HandleInputStart=1882186641807208, AnimationStart=1882186641811167, PerformTraversalsStart=1882186641854708, DrawStart=1882186921920333, FrameDeadline=1882186178472749, FrameInterval=1882186641759708, FrameStartTime=16708458, SyncQueued=1882186941286531, SyncStart=1882186941615854, IssueDrawCommandsStart=1882186971075437, SwapBuffers=1882186975290958, FrameCompleted=1882186981999448, DequeueBufferDuration=17031, QueueBufferDuration=413802, GpuCompleted=1882186981999448, SwapBuffersCompleted=1882186976165646, DisplayPresentTime=0, CommandSubmissionCompleted=1882186975290958, 
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
Thread started: <Thread Pool> #15
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[e.imagesbugmaui] This is non sticky GC, maxfree is 8388608 minfree is 2097152
[e.imagesbugmaui] Explicit concurrent copying GC freed 11928(803KB) AllocSpace objects, 0(0B) LOS objects, 75% free, 6745KB/26MB, paused 23us,22us total 15.530ms
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[ProfileInstaller] Installing profile for com.companyname.imagesbugmaui
[e.imagesbugmaui] This is non sticky GC, maxfree is 8388608 minfree is 2097152
[e.imagesbugmaui] Explicit concurrent copying GC freed 3665(300KB) AllocSpace objects, 0(0B) LOS objects, 75% free, 6605KB/25MB, paused 38us,33us total 15.038ms
[e.imagesbugmaui] This is non sticky GC, maxfree is 8388608 minfree is 2097152
[e.imagesbugmaui] Explicit concurrent copying GC freed 598(69KB) AllocSpace objects, 0(0B) LOS objects, 75% free, 6599KB/25MB, paused 17us,25us total 14.538ms
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[libc] Requested dump for pid 3920 (e.imagesbugmaui)
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[e.imagesbugmaui] This is non sticky GC, maxfree is 8388608 minfree is 2097152
[e.imagesbugmaui] Explicit concurrent copying GC freed 17570(1004KB) AllocSpace objects, 0(0B) LOS objects, 75% free, 6619KB/25MB, paused 38us,22us total 19.480ms
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[e.imagesbugmaui] This is non sticky GC, maxfree is 8388608 minfree is 2097152
[e.imagesbugmaui] Explicit concurrent copying GC freed 18451(997KB) AllocSpace objects, 0(0B) LOS objects, 75% free, 6645KB/25MB, paused 22us,21us total 15.737ms
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[e.imagesbugmaui] This is non sticky GC, maxfree is 8388608 minfree is 2097152
[e.imagesbugmaui] Explicit concurrent copying GC freed 18053(1002KB) AllocSpace objects, 0(0B) LOS objects, 75% free, 6651KB/25MB, paused 20us,24us total 15.842ms
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[e.imagesbugmaui] This is non sticky GC, maxfree is 8388608 minfree is 2097152
[e.imagesbugmaui] Explicit concurrent copying GC freed 19171(1072KB) AllocSpace objects, 0(0B) LOS objects, 75% free, 6635KB/25MB, paused 25us,23us total 16.510ms
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[e.imagesbugmaui] This is non sticky GC, maxfree is 8388608 minfree is 2097152
[e.imagesbugmaui] Explicit concurrent copying GC freed 18098(1002KB) AllocSpace objects, 0(0B) LOS objects, 75% free, 6656KB/26MB, paused 21us,20us total 16.401ms
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[e.imagesbugmaui] This is non sticky GC, maxfree is 8388608 minfree is 2097152
[e.imagesbugmaui] Explicit concurrent copying GC freed 18321(1014KB) AllocSpace objects, 0(0B) LOS objects, 75% free, 6649KB/25MB, paused 19us,23us total 15.683ms
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[e.imagesbugmaui] This is non sticky GC, maxfree is 8388608 minfree is 2097152
[e.imagesbugmaui] Explicit concurrent copying GC freed 18637(1001KB) AllocSpace objects, 0(0B) LOS objects, 75% free, 6671KB/26MB, paused 34us,21us total 17.415ms
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
[FileUtils] err write to mi_exception_log
Phantom-KNA commented 3 months ago 
<ItemGroup Condition="'$(TargetFramework)' == 'net8.0-android'">
    <PackageReference Include="Microsoft.Maui.Controls" Version="8.0.6" />
    <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="8.0.6" />
    <PackageReference Include="CommunityToolkit.Maui" Version="7.0.1" />
</ItemGroup>
<ItemGroup Condition="'$(TargetFramework)' != 'net8.0-android'">
      <PackageReference Include="Microsoft.Maui.Controls" Version="8.0.14" />
     <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="8.0.14" />
     <PackageReference Include="CommunityToolkit.Maui" Version="8.0.1" />
</ItemGroup>

This way it works fine for Android, I couldn't tell if the error is in CommunityToolkit.Maui or in recent versions of Microsoft.Maui.Controls. On Windows it works fine regardless of which version is used, other platforms have not been tested.

jfversluis commented 3 months ago

While I appreciate the reproduction it's still a bit too big and adding a lot of noise making it hard to see what the actual cause of this might be. If you take out all the plugins and such does it still show this behavior? We really want to determine if this is something that originates in .NET MAUI or not. If not, there is not much we can do about it unfortunately.

One approach might be to just create a File > New MAUI project and start adding bits from this project until you hit the bug. That way you will have a good overview of the moving parts that show this behavior.

Phantom-KNA commented 3 months ago

While I appreciate the reproduction it's still a bit too big and adding a lot of noise making it hard to see what the actual cause of this might be. If you take out all the plugins and such does it still show this behavior? We really want to determine if this is something that originates in .NET MAUI or not. If not, there is not much we can do about it unfortunately.

One approach might be to just create a File > New MAUI project and start adding bits from this project until you hit the bug. That way you will have a good overview of the moving parts that show this behavior.

Fine, not problem, thanks for your time.

  1. Create a new MAUI project.
  2. Add CollectionView to your MainPage, preferably 4, with DataTemplate only Image. Example: 
    <CollectionView
x:Name="List">
<CollectionView.ItemsLayout>
    <GridItemsLayout HorizontalItemSpacing="5" Orientation="Horizontal" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
    <DataTemplate>
        <Image WidthRequest="100" Source="{Binding .}" />
    </DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
  3. Add this list of images or any you want to your ItemSource: 
        List<string> enlaces = new List<string>()
{
"https://image.tmdb.org/t/p/w92/iLa15KURiosRmvtWP6vKqBT11Le.jpg",
"https://image.tmdb.org/t/p/w92/zS8BSQdbOesql0EWbs17kPvLoAT.jpg",
"https://image.tmdb.org/t/p/w92/wmnVOIaTsGcRpZ9rLv2msbtqi3C.jpg",
"https://image.tmdb.org/t/p/w92/cboUHkM1zA7m3SaCrf6dW5jGqqW.jpg",
"https://image.tmdb.org/t/p/w92/blq050GHBt0Fzx1j9FvohaEuknJ.jpg",
"https://image.tmdb.org/t/p/w92/diEeiB2DmZZadHISkg24RO2n0rT.jpg",
"https://image.tmdb.org/t/p/w92/8fzJZQhmkLyZeXdZUi1eE2ZKhkm.jpg",
"https://image.tmdb.org/t/p/w92/6tJWxRfBKWGIPFkfLTod2CgCexU.jpg",
"https://image.tmdb.org/t/p/w92/pxkPdKscFFSNoSoROLYIgxcz8of.jpg",
"https://image.tmdb.org/t/p/w92/9rk0NJXs1izgJPZwbkSrkiVFWMQ.jpg",
"https://image.tmdb.org/t/p/w92/9pHFhxo1inS9EeupN9QIDuUWmGm.jpg",
"https://image.tmdb.org/t/p/w92/fSY6BYUZMObTIzPfRBlhuAb5lsd.jpg",
"https://image.tmdb.org/t/p/w92/6cKzsWfDtGj5BMHi1dN9EkGz4lJ.jpg",
"https://image.tmdb.org/t/p/w92/lMZWF6Bm8MkFHjL9PHgUzHuuYfi.jpg",
"https://image.tmdb.org/t/p/w92/fRaBjht3S1HU6lJrz2SoFwwOZQM.jpg",
"https://image.tmdb.org/t/p/w92/yJTk4eqQd9Yo5REpFbTSOMkbSgn.jpg",
"https://image.tmdb.org/t/p/w92/q35kdC8ci9Fm2gVQazJdsohtGpD.jpg",
"https://image.tmdb.org/t/p/w92/tskjJSuOk1U8moEkCOPtetGTpFe.jpg",
"https://image.tmdb.org/t/p/w92/ncKCQVXgk4BcQV6XbvesgZ2zLvZ.jpg",
"https://image.tmdb.org/t/p/w92/syKwepJwzvoYhPLBfUy4YYSrstr.jpg"
};
  4. Slide the images from left to right or vice versa.
  5. You can start looking at the log: [FileUtils] err write to mi_exception_log.
Phantom-KNA commented 3 months ago

While I appreciate the reproduction it's still a bit too big and adding a lot of noise making it hard to see what the actual cause of this might be. If you take out all the plugins and such does it still show this behavior? We really want to determine if this is something that originates in .NET MAUI or not. If not, there is not much we can do about it unfortunately.

One approach might be to just create a File > New MAUI project and start adding bits from this project until you hit the bug. That way you will have a good overview of the moving parts that show this behavior.

I have been doing some tests, apparently there are some performance errors in my design, but the strange thing is that in a version prior to Microsoft.Maui.Controls 8.0.6 it works perfectly fine, this appears with 8.0.14

Phantom-KNA commented 2 months ago

@jfversluis After version 8.0.6 this error starts, I tried 8.0.7, 8.0.10 and 8.0.14. It is worth noting that this occurs in CollectionView. Can used this XAML for auto log error, Use a Grid or VerticalLayout for put this collectionviews:

                        <CollectionView
                            x:Name="List1"
                            Margin="0,0,0,0">
                            <CollectionView.ItemsLayout>
                                <GridItemsLayout HorizontalItemSpacing="{OnPlatform Android=0, WinUI=5}" Orientation="Horizontal" />
                            </CollectionView.ItemsLayout>

                            <CollectionView.ItemTemplate>
                                <DataTemplate>
                                    <Grid
                                        Margin="15,0,0,0"
                                        ColumnSpacing="100"
                                        WidthRequest="{OnPlatform Android=100,
                                                                  WinUI=150}">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="{OnPlatform Android=150, WinUI=250}" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Border
                                            Grid.Row="0"
                                            Margin="0,0,0,0"
                                            Stroke="Transparent"
                                            StrokeThickness="0">
                                            <Border.StrokeShape>
                                                <RoundRectangle CornerRadius="10" />
                                            </Border.StrokeShape>
                                            <Image
                                                Margin="0,0,0,0"
                                                Aspect="AspectFill"
                                                BackgroundColor="{AppThemeBinding Light={StaticResource White},
                                                                                  Dark={StaticResource Black},
                                                                                  Default={StaticResource Black}}"
                                                Source="{Binding .}" />
                                        </Border>
                                        <Border
                                            Margin="10,10,0,0"
                                            BackgroundColor="#E21221"
                                            HeightRequest="20"
                                            HorizontalOptions="Start"
                                            Stroke="#FB101D"
                                            VerticalOptions="Start"
                                            WidthRequest="30">
                                            <Border.StrokeShape>
                                                <RoundRectangle CornerRadius="5" />
                                            </Border.StrokeShape>
                                            <Label
                                                FontSize="10"
                                                HorizontalOptions="Center"
                                                Text="5.0"
                                                TextColor="White"
                                                VerticalOptions="Center" />
                                        </Border>
                                        <Label
                                            Grid.Row="1"
                                            Margin="0,0,0,0"
                                            FontSize="12"
                                            HorizontalOptions="Center"
                                            HorizontalTextAlignment="Center"
                                            Text="Movie 1"
                                            TextColor="{AppThemeBinding Light={StaticResource Black},
                                                                        Dark={StaticResource White},
                                                                        Default={StaticResource Black}}"
                                            VerticalOptions="Start" />
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroupList>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal">
                                                        <VisualState.Setters>
                                                            <Setter Property="Opacity" Value="1" />
                                                            <Setter Property="BackgroundColor" Value="Transparent" />
                                                        </VisualState.Setters>
                                                    </VisualState>
                                                    <VisualState x:Name="Selected">
                                                        <VisualState.Setters>
                                                            <Setter Property="Opacity" Value="0.5" />
                                                            <Setter Property="BackgroundColor" Value="Transparent" />
                                                        </VisualState.Setters>
                                                    </VisualState>
                                                </VisualStateGroup>
                                            </VisualStateGroupList>
                                        </VisualStateManager.VisualStateGroups>
                                    </Grid>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>
                        </CollectionView>

<CollectionView
                            x:Name="List2"
                            Margin="0,0,0,0">
                            <CollectionView.ItemsLayout>
                                <GridItemsLayout HorizontalItemSpacing="{OnPlatform Android=0, WinUI=5}" Orientation="Horizontal" />
                            </CollectionView.ItemsLayout>

                            <CollectionView.ItemTemplate>
                                <DataTemplate>
                                    <Grid
                                        Margin="15,0,0,0"
                                        ColumnSpacing="100"
                                        WidthRequest="{OnPlatform Android=100,
                                                                  WinUI=150}">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="{OnPlatform Android=150, WinUI=250}" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Border
                                            Grid.Row="0"
                                            Margin="0,0,0,0"
                                            Stroke="Transparent"
                                            StrokeThickness="0">
                                            <Border.StrokeShape>
                                                <RoundRectangle CornerRadius="10" />
                                            </Border.StrokeShape>
                                            <Image
                                                Margin="0,0,0,0"
                                                Aspect="AspectFill"
                                                BackgroundColor="{AppThemeBinding Light={StaticResource White},
                                                                                  Dark={StaticResource Black},
                                                                                  Default={StaticResource Black}}"
                                                Source="{Binding .}" />
                                        </Border>
                                        <Border
                                            Margin="10,10,0,0"
                                            BackgroundColor="#E21221"
                                            HeightRequest="20"
                                            HorizontalOptions="Start"
                                            Stroke="#FB101D"
                                            VerticalOptions="Start"
                                            WidthRequest="30">
                                            <Border.StrokeShape>
                                                <RoundRectangle CornerRadius="5" />
                                            </Border.StrokeShape>
                                            <Label
                                                FontSize="10"
                                                HorizontalOptions="Center"
                                                Text="5.0"
                                                TextColor="White"
                                                VerticalOptions="Center" />
                                        </Border>
                                        <Label
                                            Grid.Row="1"
                                            Margin="0,0,0,0"
                                            FontSize="12"
                                            HorizontalOptions="Center"
                                            HorizontalTextAlignment="Center"
                                            Text="Movie 1"
                                            TextColor="{AppThemeBinding Light={StaticResource Black},
                                                                        Dark={StaticResource White},
                                                                        Default={StaticResource Black}}"
                                            VerticalOptions="Start" />
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroupList>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal">
                                                        <VisualState.Setters>
                                                            <Setter Property="Opacity" Value="1" />
                                                            <Setter Property="BackgroundColor" Value="Transparent" />
                                                        </VisualState.Setters>
                                                    </VisualState>
                                                    <VisualState x:Name="Selected">
                                                        <VisualState.Setters>
                                                            <Setter Property="Opacity" Value="0.5" />
                                                            <Setter Property="BackgroundColor" Value="Transparent" />
                                                        </VisualState.Setters>
                                                    </VisualState>
                                                </VisualStateGroup>
                                            </VisualStateGroupList>
                                        </VisualStateManager.VisualStateGroups>
                                    </Grid>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>
                        </CollectionView>
<CollectionView
                            x:Name="List3"
                            Margin="0,0,0,0">
                            <CollectionView.ItemsLayout>
                                <GridItemsLayout HorizontalItemSpacing="{OnPlatform Android=0, WinUI=5}" Orientation="Horizontal" />
                            </CollectionView.ItemsLayout>

                            <CollectionView.ItemTemplate>
                                <DataTemplate>
                                    <Grid
                                        Margin="15,0,0,0"
                                        ColumnSpacing="100"
                                        WidthRequest="{OnPlatform Android=100,
                                                                  WinUI=150}">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="{OnPlatform Android=150, WinUI=250}" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Border
                                            Grid.Row="0"
                                            Margin="0,0,0,0"
                                            Stroke="Transparent"
                                            StrokeThickness="0">
                                            <Border.StrokeShape>
                                                <RoundRectangle CornerRadius="10" />
                                            </Border.StrokeShape>
                                            <Image
                                                Margin="0,0,0,0"
                                                Aspect="AspectFill"
                                                BackgroundColor="{AppThemeBinding Light={StaticResource White},
                                                                                  Dark={StaticResource Black},
                                                                                  Default={StaticResource Black}}"
                                                Source="{Binding .}" />
                                        </Border>
                                        <Border
                                            Margin="10,10,0,0"
                                            BackgroundColor="#E21221"
                                            HeightRequest="20"
                                            HorizontalOptions="Start"
                                            Stroke="#FB101D"
                                            VerticalOptions="Start"
                                            WidthRequest="30">
                                            <Border.StrokeShape>
                                                <RoundRectangle CornerRadius="5" />
                                            </Border.StrokeShape>
                                            <Label
                                                FontSize="10"
                                                HorizontalOptions="Center"
                                                Text="5.0"
                                                TextColor="White"
                                                VerticalOptions="Center" />
                                        </Border>
                                        <Label
                                            Grid.Row="1"
                                            Margin="0,0,0,0"
                                            FontSize="12"
                                            HorizontalOptions="Center"
                                            HorizontalTextAlignment="Center"
                                            Text="Movie 1"
                                            TextColor="{AppThemeBinding Light={StaticResource Black},
                                                                        Dark={StaticResource White},
                                                                        Default={StaticResource Black}}"
                                            VerticalOptions="Start" />
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroupList>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal">
                                                        <VisualState.Setters>
                                                            <Setter Property="Opacity" Value="1" />
                                                            <Setter Property="BackgroundColor" Value="Transparent" />
                                                        </VisualState.Setters>
                                                    </VisualState>
                                                    <VisualState x:Name="Selected">
                                                        <VisualState.Setters>
                                                            <Setter Property="Opacity" Value="0.5" />
                                                            <Setter Property="BackgroundColor" Value="Transparent" />
                                                        </VisualState.Setters>
                                                    </VisualState>
                                                </VisualStateGroup>
                                            </VisualStateGroupList>
                                        </VisualStateManager.VisualStateGroups>
                                    </Grid>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>
                        </CollectionView>
<CollectionView
                            x:Name="List4"
                            Margin="0,0,0,0">
                            <CollectionView.ItemsLayout>
                                <GridItemsLayout HorizontalItemSpacing="{OnPlatform Android=0, WinUI=5}" Orientation="Horizontal" />
                            </CollectionView.ItemsLayout>

                            <CollectionView.ItemTemplate>
                                <DataTemplate>
                                    <Grid
                                        Margin="15,0,0,0"
                                        ColumnSpacing="100"
                                        WidthRequest="{OnPlatform Android=100,
                                                                  WinUI=150}">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="{OnPlatform Android=150, WinUI=250}" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Border
                                            Grid.Row="0"
                                            Margin="0,0,0,0"
                                            Stroke="Transparent"
                                            StrokeThickness="0">
                                            <Border.StrokeShape>
                                                <RoundRectangle CornerRadius="10" />
                                            </Border.StrokeShape>
                                            <Image
                                                Margin="0,0,0,0"
                                                Aspect="AspectFill"
                                                BackgroundColor="{AppThemeBinding Light={StaticResource White},
                                                                                  Dark={StaticResource Black},
                                                                                  Default={StaticResource Black}}"
                                                Source="{Binding .}" />
                                        </Border>
                                        <Border
                                            Margin="10,10,0,0"
                                            BackgroundColor="#E21221"
                                            HeightRequest="20"
                                            HorizontalOptions="Start"
                                            Stroke="#FB101D"
                                            VerticalOptions="Start"
                                            WidthRequest="30">
                                            <Border.StrokeShape>
                                                <RoundRectangle CornerRadius="5" />
                                            </Border.StrokeShape>
                                            <Label
                                                FontSize="10"
                                                HorizontalOptions="Center"
                                                Text="5.0"
                                                TextColor="White"
                                                VerticalOptions="Center" />
                                        </Border>
                                        <Label
                                            Grid.Row="1"
                                            Margin="0,0,0,0"
                                            FontSize="12"
                                            HorizontalOptions="Center"
                                            HorizontalTextAlignment="Center"
                                            Text="Movie 1"
                                            TextColor="{AppThemeBinding Light={StaticResource Black},
                                                                        Dark={StaticResource White},
                                                                        Default={StaticResource Black}}"
                                            VerticalOptions="Start" />
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroupList>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal">
                                                        <VisualState.Setters>
                                                            <Setter Property="Opacity" Value="1" />
                                                            <Setter Property="BackgroundColor" Value="Transparent" />
                                                        </VisualState.Setters>
                                                    </VisualState>
                                                    <VisualState x:Name="Selected">
                                                        <VisualState.Setters>
                                                            <Setter Property="Opacity" Value="0.5" />
                                                            <Setter Property="BackgroundColor" Value="Transparent" />
                                                        </VisualState.Setters>
                                                    </VisualState>
                                                </VisualStateGroup>
                                            </VisualStateGroupList>
                                        </VisualStateManager.VisualStateGroups>
                                    </Grid>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>
                        </CollectionView>

Code Behind or ViewModel:

List<string> links = new List<string>()
{
    "https://image.tmdb.org/t/p/w92/iLa15KURiosRmvtWP6vKqBT11Le.jpg",
    "https://image.tmdb.org/t/p/w92/zS8BSQdbOesql0EWbs17kPvLoAT.jpg",
    "https://image.tmdb.org/t/p/w92/wmnVOIaTsGcRpZ9rLv2msbtqi3C.jpg",
    "https://image.tmdb.org/t/p/w92/cboUHkM1zA7m3SaCrf6dW5jGqqW.jpg",
    "https://image.tmdb.org/t/p/w92/blq050GHBt0Fzx1j9FvohaEuknJ.jpg",
    "https://image.tmdb.org/t/p/w92/diEeiB2DmZZadHISkg24RO2n0rT.jpg",
    "https://image.tmdb.org/t/p/w92/8fzJZQhmkLyZeXdZUi1eE2ZKhkm.jpg",
    "https://image.tmdb.org/t/p/w92/6tJWxRfBKWGIPFkfLTod2CgCexU.jpg",
    "https://image.tmdb.org/t/p/w92/pxkPdKscFFSNoSoROLYIgxcz8of.jpg",
    "https://image.tmdb.org/t/p/w92/9rk0NJXs1izgJPZwbkSrkiVFWMQ.jpg",
    "https://image.tmdb.org/t/p/w92/9pHFhxo1inS9EeupN9QIDuUWmGm.jpg",
    "https://image.tmdb.org/t/p/w92/fSY6BYUZMObTIzPfRBlhuAb5lsd.jpg",
    "https://image.tmdb.org/t/p/w92/6cKzsWfDtGj5BMHi1dN9EkGz4lJ.jpg",
    "https://image.tmdb.org/t/p/w92/lMZWF6Bm8MkFHjL9PHgUzHuuYfi.jpg",
    "https://image.tmdb.org/t/p/w92/fRaBjht3S1HU6lJrz2SoFwwOZQM.jpg",
    "https://image.tmdb.org/t/p/w92/yJTk4eqQd9Yo5REpFbTSOMkbSgn.jpg",
    "https://image.tmdb.org/t/p/w92/q35kdC8ci9Fm2gVQazJdsohtGpD.jpg",
    "https://image.tmdb.org/t/p/w92/tskjJSuOk1U8moEkCOPtetGTpFe.jpg",
    "https://image.tmdb.org/t/p/w92/ncKCQVXgk4BcQV6XbvesgZ2zLvZ.jpg",
    "https://image.tmdb.org/t/p/w92/syKwepJwzvoYhPLBfUy4YYSrstr.jpg"
};

List1.ItemSource = links;
List2.ItemSource = links;
List3.ItemSource = links;
List4.ItemSource = links;
ninachen03 commented 2 weeks ago

I cannot repro this issue on Visual Studio 17.11.0 Preview 2.1 (8.0.60 & 8.0.14), I created below sample and please correct me if my reproduction steps are wrong, thank you. sample project

Phantom-KNA commented 2 weeks ago

The same for Net 8.0.60

ninachen03 commented 2 weeks ago

@Phantom-KNA Could you provide a sample project for us to investigate it further? And please correct me if my reproduction steps are wrong at your convenience

Phantom-KNA commented 1 week ago

@Phantom-KNA Could you provide a sample project for us to investigate it further? And please correct me if my reproduction steps are wrong at your convenience

Sorry for some reason I had not seen the messages in this thread, I will check your example repo and confirm, thanks for the time