Image Loaded Event isn't called under certain conditions on IOS

[SteveJML]

Description

I posted a bug report for Maui Community Toolkit as some images were not displaying the newly assigned color on IOS when using the MCT Icon Tint Behavior, this was happening when using await Task.Delay(x) before navigating to a ContentPage using Shell. Pedro replied mentioning that this is a MAUI issue and the root cause is the img.Loaded event isn't getting called. This is only happening on IOS, Android is fine and the images color as expected.

I have attached a link for the basic repo which demonstrates the issue

The raised issue is here.

https://github.com/CommunityToolkit/Maui/issues/1139

Steps to Reproduce

Create a new project with 2 content pages Add MAUI Community Toolkit Nuget

Add a button - click event to navigate to page2 On page2 add an image, in the xaml with the Image.Behavior and set the Tint to a color

await Task.Delay(500) await Shell.Current.GoToAsync(page2)

The image doesn't take the color and retains its original color (on IOS)

Remove the await Task.Delay(x) and it gets colored

Link to public reproduction project repository

https://github.com/SteveJML/Tint-Image-Test

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

IOS

Did you find any workaround?

Courtesy of Pedro J

`public Test_Image() { InitializeComponent();

    Loaded += (_, __) =>
    {
        this.img.Behaviors.Add(new IconTintColorBehavior()
        {
            TintColor = Colors.Fuchsia
        });
    };
}`

Relevant log output

No response

[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.

[fischberg]

I have an issue only on iOS that I believe may be a symptom of the same problem. I display a CollectionView on a page that contains items with icons colored using IconTintColorBehavior. I navigate to another page on which I take an action that adds items to the CollectionView on the original page. When I navigate back to the original page, the new items in the CollectionView are displayed but the icons in the added items aren't tinted. So, the CollectionView contains some items with the IconTintColorBehavior applied and added items with the original icon color.

[XamlTest]

Verified this on Visual Studio Enterprise 17.7.0 Preview 2.0. Repro on Android 13.0-API33 and Windows 11, not repro on iOS 16.4 with below Project: Tint Image Test.zip

[sowacx]

Hey @SteveJML, I was testing some other issue related with Images, but I found this one. I checked your sandbox proj. Issue that you described was occurring on my setup as well. But I found possible workaround that you may use: Creating custom Image control with IconTintColorBehavior embeded into control. Here is repo with my sandbox proj that base on yours: https://github.com/sowacx/maui-tinted-image

At least at my setup, second image which is custom control is displayed with tint color:

[midhun11]

Hi @SteveJML, I found some workaround for this:

The problem is causing by height and width request of the image while applying the tint color.

Just add a parent layout to the image and apply the height and width to it instead of Image like below:

<VerticalStackLayout HeightRequest="80" WidthRequest="80">
        <Image Source="close.png"  HorizontalOptions="Fill" VerticalOptions="Fill">
            <Image.Behaviors>
                <mct:IconTintColorBehavior TintColor="Orange" />
            </Image.Behaviors>
        </Image>
</VerticalStackLayout>

OR

<VerticalStackLayout HorizontalOptions="Center" VerticalOptions="Center"  WidthRequest="80">
        <Image Source="close.png" HeightRequest="80"  HorizontalOptions="Fill" VerticalOptions="Fill">
            <Image.Behaviors>
                <mct:IconTintColorBehavior TintColor="Orange" />
            </Image.Behaviors>
        </Image>
    </VerticalStackLayout>