Image clip throwing unhandled exception

[williambuchanan2]

Description

This works ok:

<Image  VerticalOptions="Center" Margin="0,0,0,0" Source="{Binding UserProfile.ProfileImageThumbnail, Converter={StaticResource ByteArrayToImage}}" WidthRequest="50" HeightRequest="50" Aspect="AspectFit" HorizontalOptions="Start">
</Image>

but this doesn't:

<Image  VerticalOptions="Center" Margin="0,0,0,0" Source="{Binding UserProfile.ProfileImageThumbnail, Converter={StaticResource ByteArrayToImage}}" WidthRequest="50" HeightRequest="50" Aspect="AspectFit" HorizontalOptions="Start">
<Image.Clip>
<EllipseGeometry RadiusX="18" RadiusY="18" Center="25,25" />
</Image.Clip>
</Image>

When the clip is in place I get the exception shown in the attached image.

Steps to Reproduce

In a contentpage add an image with an image.clip to a listview.
Load the page and scroll up and down a few times.
Eventually the exception gets thrown.

Link to public reproduction project repository

?

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

net7.0

Did you find any workaround?

No

Relevant log output

No response

[ghost]

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

[williambuchanan2]

I have been unable to create an example app to demonstrate this issue. I have noticed that it isn't caused purely by the clip - I am now getting the error just on the page without the clip in place, but it is very intermittent and seems to only happen in Android. I assume it is something to do with the images being rendered while scrolling.

[williambuchanan2]

Update on this... I think the problem is related to ListView. I have removed the ListView and replaced it with CollectionView and the error has stopped happening. Below is the Xaml. I have left in the ListView code but commented it so you can see the difference between it not working and working.

<?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="PDS.App.RedSix.Views.SocialMainPage"
             xmlns:controls="clr-namespace:PDS.App.RedSix.Controls"
             xmlns:vm="clr-namespace:PDS.App.RedSix.ViewModels"
             xmlns:models="clr-namespace:PDS.App.Model.RedSix;assembly=PDS.App.Model.RedSix"
             xmlns:appUtils="clr-namespace:PDS.App.Library.AppUtilities;assembly=PDS.App.Library.AppUtilities"
             xmlns:imageUtils="clr-namespace:PDS.App.Library.CombinedUtils;assembly=PDS.App.Library.CombinedUtils"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Name="thisSocialMainPage"
             Title="Social Feed">
    <ContentPage.Resources>
        <ResourceDictionary>
            <toolkit:ByteArrayToImageSourceConverter x:Key="ByteArrayToImage" />
        </ResourceDictionary>
    </ContentPage.Resources>

    <!-- Page Content -->
    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="80"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>

            <Frame Padding="50,30,50,30" HasShadow="true" BackgroundColor="#80000000" Grid.Row="0" Grid.Column="0" IsVisible="{Binding Loading}" VerticalOptions="Center" HorizontalOptions="Center">
                <ActivityIndicator Color="White" VerticalOptions="Center" HorizontalOptions="Center" x:Name="actInd" IsRunning="{Binding Loading}" IsVisible="{Binding Loading}" IsEnabled="{Binding Loading}" />
            </Frame>

            <!-- Top of page current user status section -->
            <Border BackgroundColor="{AppThemeBinding Light={StaticResource LightBorder}, Dark={StaticResource DarkBorder}}" Margin="5" Padding="10" Grid.Row="0"
                    HorizontalOptions="FillAndExpand">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="15,15,15,15" />
                </Border.StrokeShape>

                <Grid VerticalOptions="Center" HorizontalOptions="FillAndExpand" x:Name="Header">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <Image Grid.Row="0" Grid.Column="0" VerticalOptions="Center" Margin="0,0,12,0" Source="{Binding ProfileImageThumbnail}" WidthRequest="50" HeightRequest="50" 
                           Aspect="AspectFit" HorizontalOptions="Start">
                        <Image.Clip>
                            <EllipseGeometry RadiusX="18" RadiusY="18" Center="25,25" />
                        </Image.Clip>
                    </Image>
                    <Button Grid.Row="0" Grid.Column="1" Text="Post" Command="{Binding ShowPostSheetPressedCommand}" HorizontalOptions="CenterAndExpand" 
                            VerticalOptions="Center" CornerRadius="15" Margin="7,0,0,0" FontSize="15" 
                            BackgroundColor="{AppThemeBinding Light={StaticResource PostLight}, Dark={StaticResource AccentColor}}">
                    </Button>

                    <Image Grid.Row="0" Grid.Column="3" VerticalOptions="Center" HorizontalOptions="End" Margin="12,0,0,0" Source="{Binding CurrentMoodImage}" WidthRequest="50" HeightRequest="50" 
                           Aspect="AspectFit">
                        <Image.Clip>
                            <EllipseGeometry RadiusX="18" RadiusY="18" Center="25,25" />
                        </Image.Clip>
                    </Image>

                </Grid>

            </Border>


            <!-- Feed Content Section -->
            <CollectionView ItemsSource="{Binding Feed}" Grid.Row="1"
                    VerticalScrollBarVisibility="Default" VerticalOptions="Fill" HorizontalOptions="FillAndExpand">
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="models:FeedContentDTO">


            <!--<ListView x:Name="FeedListView" ItemsSource="{Binding Feed}" CachingStrategy="RecycleElement" SeparatorVisibility="None" Grid.Row="1"
                    VerticalScrollBarVisibility="Default" HasUnevenRows="True" VerticalOptions="Fill" HorizontalOptions="FillAndExpand">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="models:FeedContentUI">-->
                        <!--<ViewCell>-->

                        <Border Margin="5,0,5,0" Padding="5" BackgroundColor="{AppThemeBinding Light={StaticResource LightBorder}, Dark={StaticResource DarkBorder}}"
                                        VerticalOptions="StartAndExpand">
                            <Border.StrokeShape>
                                <RoundRectangle CornerRadius="15,15,15,15"/>
                            </Border.StrokeShape>
                            <StackLayout>
                                <StackLayout Orientation="Horizontal" Padding="15, 10">
                                    <Image  VerticalOptions="Center" Margin="0,0,0,0" 
                                               Source="{Binding UserProfile.ProfileImageThumbnail, Mode=OneWay, Converter={StaticResource ByteArrayToImage}}" WidthRequest="40" 
                                               HeightRequest="40" Aspect="AspectFill" HorizontalOptions="Start">
                                        <Image.Clip>
                                            <EllipseGeometry RadiusX="18" RadiusY="18" Center="25,25" />
                                        </Image.Clip>
                                        <Image.Shadow>
                                            <Shadow Brush="Black" Offset="40,40" Radius="28" Opacity="0.6"/>
                                        </Image.Shadow>
                                    </Image>
                                    <StackLayout VerticalOptions="Center">
                                        <Label Style="{StaticResource Key=baseLabelStyle}"
                                                    Text="John Doe" FontSize="16" TextColor="White" Margin="10, 0"/>
                                        <Label Style="{StaticResource Key=baseLabelStyle}"
                                                    Text="Sr SWE at Google Inc" FontSize="14" TextColor="DarkGray" Margin="10, 0"/>
                                    </StackLayout>
                                </StackLayout>
                                <Label Style="{StaticResource Key=baseLabelStyle}"
                                            Text="{Binding FeedContent}" FontSize="16" FontAttributes="Bold" Margin="20, 10"/>

                                <ListView x:Name="FeedAttachmentListView" ItemsSource="{Binding FeedAttachments}" CachingStrategy="RecycleElement" SeparatorVisibility="None" 
                                               HasUnevenRows="True" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                                    <ListView.ItemTemplate>
                                        <DataTemplate x:DataType="models:FeedAttachmentDTO">
                                            <ViewCell>
                                                <Image Source="{Binding ImageData, Mode=OneWay, Converter={StaticResource ByteArrayToImage}}"  Aspect="AspectFill" Margin="10, 10"
                                                          VerticalOptions="FillAndExpand" HorizontalOptions="Center">
                                                    <Image.Shadow>
                                                        <Shadow Brush="Black" Offset="0,7" Radius="10" Opacity="0.6"/>
                                                    </Image.Shadow>
                                                </Image>
                                            </ViewCell>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>

                                <Grid Margin="15,10,15,5">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition/>
                                        <ColumnDefinition/>
                                    </Grid.ColumnDefinitions>
                                    <Label HorizontalOptions="Fill" Grid.Column="0" Style="{StaticResource Key=baseLabelStyle}" 
                                                Text="Jon Doe and others like this" FontSize="12" TextColor="DarkGray"/>
                                    <Label HorizontalOptions="End" Grid.Column="1" Style="{StaticResource Key=baseLabelStyle}" 
                                                Text="10 comments" FontSize="12" TextColor="DarkGray"/>
                                </Grid>
                            </StackLayout>
                        </Border>

                        <!--</ViewCell>-->
                    </DataTemplate>
                    <!--</ListView.ItemTemplate>
            </ListView>-->
                </CollectionView.ItemTemplate>
            </CollectionView>

        </Grid>

    </ContentPage.Content>
</ContentPage >

[williambuchanan2]

Update - I discovered that this is unrelated to the original thing I suspected. I have opened a new discussion which has better information (#14052) so closing this one.