Check to see if Image Should Reload When Attached

src/Controls/tests/TestCases.HostApp/Issues/Issue14471.xaml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    x:Class="Maui.Controls.Sample.Issues.Issue14471"
+    xmlns:ns="clr-namespace:Maui.Controls.Sample.Issues">
+    <TabBar>
+        <ShellContent Route="tab1" Title="tab1" ContentTemplate="{DataTemplate ns:Issue14471Tab1Content}"/>
+        <ShellContent Route="tab2" Title="tab2" ContentTemplate="{DataTemplate ns:Issue14471Tab2Content}"/>
+    </TabBar>
+</Shell>

src/Controls/tests/TestCases.HostApp/Issues/Issue14471.xaml.cs

@@ -0,0 +1,55 @@
+namespace Maui.Controls.Sample.Issues
+{
+	[XamlCompilation(XamlCompilationOptions.Compile)]
+	[Issue(IssueTracker.Github, 14471, "Image can disappear when going back to the page", PlatformAffected.Android)]
+	public partial class Issue14471 : Shell
+	{
+		public Issue14471()
+		{
+			InitializeComponent();
+		}
+	}
+
+	public class Issue14471Tab1Content : ContentPage
+	{
+
+		public Issue14471Tab1Content()
+		{
+			var image = new Image() { HeightRequest = 100, AutomationId = "image" };
+			var imageButton = new ImageButton() { HeightRequest = 100, AutomationId = "imageButton" };
+			Content = new VerticalStackLayout()
+			{
+				new Button() 
+				{ 
+					AutomationId = "switchToTab2Button",
+					Text = "Switch to tab 2",
+					Command = new Command(async () => await Shell.Current.GoToAsync("//tab2"))
+				},
+				image,
+				imageButton
+			};
+			LoadImage((source) => image.Source = source);
+			LoadImage((source) => imageButton.Source = source);
+		}
+
+		async void LoadImage(Action<ImageSource> setImageSource)
+		{
+			await Task.Delay(1);
+			var imageBytes = Convert.FromBase64String("iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAB+FBMVEUAAAA/mUPidDHiLi5Cn0XkNTPmeUrkdUg/m0Q0pEfcpSbwaVdKskg+lUP4zA/iLi3msSHkOjVAmETdJSjtYFE/lkPnRj3sWUs8kkLeqCVIq0fxvhXqUkbVmSjwa1n1yBLepyX1xxP0xRXqUkboST9KukpHpUbuvRrzrhF/ljbwaljuZFM4jELaoSdLtElJrUj1xxP6zwzfqSU4i0HYnydMtUlIqUfywxb60AxZqEXaoifgMCXptR9MtklHpEY2iUHWnSjvvRr70QujkC+pUC/90glMuEnlOjVMt0j70QriLS1LtEnnRj3qUUXfIidOjsxAhcZFo0bjNDH0xxNLr0dIrUdmntVTkMoyfL8jcLBRuErhJyrgKyb4zA/5zg3tYFBBmUTmQTnhMinruBzvvhnxwxZ/st+Ktt5zp9hqota2vtK6y9FemNBblc9HiMiTtMbFtsM6gcPV2r6dwroseLrMrbQrdLGdyKoobKbo3Zh+ynrgVllZulTsXE3rV0pIqUf42UVUo0JyjEHoS0HmsiHRGR/lmRz/1hjqnxjvpRWfwtOhusaz0LRGf7FEfbDVmqHXlJeW0pbXq5bec3fX0nTnzmuJuWvhoFFhm0FtrziBsjaAaDCYWC+uSi6jQS3FsSfLJiTirCOkuCG1KiG+wSC+GBvgyhTszQ64Z77KAAAARXRSTlMAIQRDLyUgCwsE6ebm5ubg2dLR0byXl4FDQzU1NDEuLSUgC+vr6urq6ubb29vb2tra2tG8vLu7u7uXl5eXgYGBgYGBLiUALabIAAABsElEQVQoz12S9VPjQBxHt8VaOA6HE+AOzv1wd7pJk5I2adpCC7RUcHd3d3fXf5PvLkxheD++z+yb7GSRlwD/+Hj/APQCZWxM5M+goF+RMbHK594v+tPoiN1uHxkt+xzt9+R9wnRTZZQpXQ0T5uP1IQxToyOAZiQu5HEpjeA4SWIoksRxNiGC1tRZJ4LNxgHgnU5nJZBDvuDdl8lzQRBsQ+s9PZt7s7Pz8wsL39/DkIfZ4xlB2Gqsq62ta9oxVlVrNZpihFRpGO9fzQw1ms0NDWZz07iGkJmIFH8xxkc3a/WWlubmFkv9AB2SEpDvKxbjidN2faseaNV3zoHXvv7wMODJdkOHAegweAfFPx4G67KluxzottCU9n8CUqXzcIQdXOytAHqXxomvykhEKN9EFutG22p//0rbNvHVxiJywa8yS2KDfV1dfbu31H8jF1RHiTKtWYeHxUvq3bn0pyjCRaiRU6aDO+gb3aEfEeVNsDgm8zzLy9egPa7Qt8TSJdwhjplk06HH43ZNJ3s91KKCHQ5x4sw1fRGYDZ0n1L4FKb9/BP5JLYxToheoFCVxz57PPS8UhhEpLBVeAAAAAElFTkSuQmCC");
+    		setImageSource.Invoke(ImageSource.FromStream(() => new MemoryStream(imageBytes)));
+		}
+	}
+
+	public class Issue14471Tab2Content : ContentPage
+	{
+		public Issue14471Tab2Content()
+		{
+			Content = new Button()
+			{
+				AutomationId = "switchToTab1Button",
+				Text = "Switch to tab 1",
+				Command = new Command(async () => await Shell.Current.GoToAsync("//tab1"))
+			};
+		}
+	}
+}

src/Controls/tests/TestCases.HostApp/Issues/Issue6625.xaml

@@ -0,0 +1,22 @@
+<?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="Maui.Controls.Sample.Issues.Issue6625">
+    <ContentPage.Content>
+        <Grid x:Name="Container"
+              RowDefinitions="Auto,*">
+            <Label x:Name="Label"
+                   Grid.Row="0"
+                   LineBreakMode="CharacterWrap"
+                   HorizontalOptions="Center"
+                   VerticalOptions="Start"
+                   Padding="8,16"/>
+            <Image x:Name="Image"
+                 Grid.Row="1"
+                 BackgroundColor="WhiteSmoke"
+                 Aspect="AspectFit"
+                 VerticalOptions="Center"
+                 HorizontalOptions="Center" />
+        </Grid>
+    </ContentPage.Content>
+</ContentPage>

src/Controls/tests/TestCases.HostApp/Issues/Issue6625.xaml.cs

@@ -0,0 +1,51 @@
+using System;
+using System.Collections;
+using System.Linq;
+using Microsoft.Maui.Controls;
+using Microsoft.Maui.Controls.Xaml;
+using Microsoft.Maui.Platform;
+
+namespace Maui.Controls.Sample.Issues
+{
+	[Issue(IssueTracker.Github, 6625, "Changing image source on Android causes flicker between images", PlatformAffected.Android)]
+	public partial class Issue6625 : ContentPage
+	{
+		readonly ImageSource[] imageSources =
+		[
+			"https://64.media.tumblr.com/14cb5aa197e5d9ca6479d955f68344f0/cb28a32e384437f2-07/s540x810/005508be5849eff8fda5b0ebda23f9fcbede164e.jpg",
+			"https://64.media.tumblr.com/d66b1709639c23315d26c0a4e977c399/1fb3e31c5e63625d-81/s540x810/2e9a893ec8c1f65a4b9fb8f1264b4fb76914ced8.jpg",
+			null,
+			"https://64.media.tumblr.com/e7db300b8248c0a7f4c66884032c9414/8f89498ebe784d1c-4e/s540x810/90835c041547bf2936ee249c5c5e1b4eddd589a3.jpg",
+			"https://64.media.tumblr.com/fd901060692d2c9ca6f05ddc58e28e5d/2db73c9c5730d87c-e2/s500x750/092c9dc3cff5150acf24bf22a9e61b9719d9ccd6.jpg",
+			"https://64.media.tumblr.com/c011aa547a45ac6fe47c46beeb290596/eafc76ded66f16f9-dc/s500x750/5ed923ed086296a2bd41cab3106079eb7addc2d0.jpg",
+			"https://this.is.a.broken.url",
+			new FontImageSource { FontFamily = "FA", Glyph = "\uf111", Size = 200, Color = Colors.Blue },
+			new FontImageSource { FontFamily = "FA", Glyph = "\uf192", Size = 200, Color = Colors.Blue },
+			new FontImageSource { FontFamily = "FA", Glyph = "\uf111", Size = 200, Color = Colors.Blue },
+			new FontImageSource { FontFamily = "FA", Glyph = "\uf192", Size = 200, Color = Colors.Blue }
+		];
+
+		int imageNo = -1;
+
+		public Issue6625()
+		{
+			InitializeComponent();
+			Container.GestureRecognizers.Add(new TapGestureRecognizer { Command = new Command(NextImage) });
+		    NextImage();
+		}
+
+		void NextImage()
+		{
+			imageNo = (imageNo + 1) % imageSources.Length;
+
+			ImageSource imageSource = imageSources[imageNo];
+			Label.Text = imageSource switch
+			{
+				UriImageSource uri => uri.Uri.ToString(),
+				FontImageSource font => $"Glyph: {Convert.ToBase64String(font.Glyph.Select(c => (byte)c).ToArray())}",
+				_ => imageSource?.GetType().Name ?? "null"
+			};
+			Image.Source = imageSource;
+		}
+	}
+}

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue14471.cs

@@ -0,0 +1,28 @@
+#if !MACCATALYST // VerifyScreenshot() is not supported on MacCatalyst
+using NUnit.Framework;
+using UITest.Appium;
+using UITest.Core;
+
+namespace Microsoft.Maui.TestCases.Tests.Issues;
+
+public class Issue14471 : _IssuesUITest
+{
+	public Issue14471(TestDevice device) : base(device){ }
+
+	public override string Issue => "Image can disappear when going back to the page";
+
+	[Test]
+	[Category(UITestCategories.Image)]
+	public void ImageDoesntDisappearWhenNavigatingBack()
+	{
+		App.WaitForElement("image");
+		App.Click("switchToTab2Button");
+		App.WaitForElement("switchToTab1Button");
+		App.Click("switchToTab1Button");
+		App.WaitForElement("image");
+
+		// The test passes if image is loaded
+		VerifyScreenshot();
+	}
+}
+#endif

src/Core/src/Handlers/Image/ImageHandler.Android.cs

@@ -1,13 +1,14 @@
 using System.Threading.Tasks;
 using Android.Graphics.Drawables;
+using Android.Views;
 using Android.Widget;
 using AndroidX.AppCompat.Widget;
-using Google.Android.Material.Button;
 
 namespace Microsoft.Maui.Handlers
 {
 	public partial class ImageHandler : ViewHandler<IImage, ImageView>
 	{
+
 		protected override ImageView CreatePlatformView()
 		{
 			var imageView = new AppCompatImageView(Context);
@@ -21,9 +22,15 @@ protected override ImageView CreatePlatformView()
 			return imageView;
 		}
 
+		protected override void ConnectHandler(ImageView platformView)
+		{
+			platformView.ViewAttachedToWindow += OnPlatformViewAttachedToWindow;
+		}
+
 		protected override void DisconnectHandler(ImageView platformView)
 		{
 			base.DisconnectHandler(platformView);
+			platformView.ViewAttachedToWindow -= OnPlatformViewAttachedToWindow;
 			SourceLoader.Reset();
 		}
 
@@ -54,10 +61,17 @@ await handler
 				.SourceLoader
 				.UpdateImageSourceAsync();
 
+
+			// This indicates that the image has finished loading
+			// So, now if the attached event fires again then we need to see if Glide has cleared the image out
+			handler.SourceLoader.CheckForImageLoadedOnAttached = true;
+
 			// Because this resolves from a task we should validate that the
 			// handler hasn't been disconnected
 			if (handler.IsConnected())
+			{
 				handler.UpdateValue(nameof(IImage.IsAnimationPlaying));
+			}
 		}
 
 		public override void PlatformArrange(Graphics.Rect frame)
@@ -79,12 +93,44 @@ public override void PlatformArrange(Graphics.Rect frame)
 			base.PlatformArrange(frame);
 		}
 
+		internal static void OnPlatformViewAttachedToWindow(IImageHandler imageHandler)
+		{
+
+			// Glide will automatically clear out the image if the Fragment or Activity is destroyed
+			// So we want to reload the image here if it's supposed to have an image
+			if (imageHandler.SourceLoader.CheckForImageLoadedOnAttached &&
+				imageHandler.PlatformView.Drawable is null && 
+				imageHandler.VirtualView.Source is not null)
+			{
+				imageHandler.SourceLoader.CheckForImageLoadedOnAttached = false;
+				imageHandler.UpdateValue(nameof(IImage.Source));
+			}
+		}
+
+		void OnPlatformViewAttachedToWindow(object? sender, View.ViewAttachedToWindowEventArgs e)
+		{
+			if (sender is not View platformView)
+			{
+				return;
+			}
+
+			if (!this.IsConnected())
+			{
+				platformView.ViewAttachedToWindow -= OnPlatformViewAttachedToWindow;
+				return;
+			}
+
+			OnPlatformViewAttachedToWindow(this);
+		}
+
 		partial class ImageImageSourcePartSetter
 		{
 			public override void SetImageSource(Drawable? platformImage)
 			{
 				if (Handler?.PlatformView is not ImageView image)
+				{
 					return;
+				}
 
 				image.SetImageDrawable(platformImage);
 			}

src/Core/src/Handlers/ImageButton/ImageButtonHandler.Android.cs

@@ -23,6 +23,7 @@ protected override void DisconnectHandler(ShapeableImageView platformView)
 			platformView.FocusChange -= OnFocusChange;
 			platformView.Click -= OnClick;
 			platformView.Touch -= OnTouch;
+			platformView.ViewAttachedToWindow -= OnPlatformViewAttachedToWindow;
 
 			base.DisconnectHandler(platformView);
 
@@ -34,6 +35,7 @@ protected override void ConnectHandler(ShapeableImageView platformView)
 			platformView.FocusChange += OnFocusChange;
 			platformView.Click += OnClick;
 			platformView.Touch += OnTouch;
+			platformView.ViewAttachedToWindow += OnPlatformViewAttachedToWindow;
 
 			base.ConnectHandler(platformView);
 		}
@@ -90,6 +92,22 @@ void OnClick(object? sender, EventArgs e)
 			VirtualView?.Clicked();
 		}
 
+		void OnPlatformViewAttachedToWindow(object? sender, View.ViewAttachedToWindowEventArgs e)
+		{
+			if (sender is not View platformView)
+			{
+				return;
+			}
+
+			if (!this.IsConnected())
+			{
+				platformView.ViewAttachedToWindow -= OnPlatformViewAttachedToWindow;
+				return;
+			}
+
+			ImageHandler.OnPlatformViewAttachedToWindow(this);
+		}
+
 		partial class ImageButtonImageSourcePartSetter
 		{
 			public override void SetImageSource(Drawable? platformImage)

src/Core/src/Platform/ImageSourcePartLoader.cs

@@ -28,6 +28,12 @@ public partial class ImageSourcePartLoader
 		IImageSourceServiceProvider? _imageSourceServiceProvider;
 #endif
 
+		#if ANDROID
+		// This is a temporary workaround for Android so that images don't just keep vanishing
+		// We will have a better fix in the next release that's better integrated with Glide
+		internal bool CheckForImageLoadedOnAttached { get; set; }
+		#endif
+
 		readonly IImageSourcePartSetter _setter;
 
 		internal ImageSourceServiceResultManager SourceManager { get; } = new ImageSourceServiceResultManager();
@@ -77,10 +83,17 @@ public async Task UpdateImageSourceAsync()
 #else
 				await Task.CompletedTask;
 #endif
+
+#if ANDROID
+				CheckForImageLoadedOnAttached = true;
+#endif
 			}
 			else
 			{
 				Setter.SetImageSource(null);
+#if ANDROID
+				CheckForImageLoadedOnAttached = false;
+#endif
 			}
 		}
 	}

src/Core/src/PublicAPI/net-android/PublicAPI.Unshipped.txt

@@ -61,6 +61,7 @@ Microsoft.Maui.SoftInputExtensions
 override Microsoft.Maui.FontSize.Equals(object? obj) -> bool
 override Microsoft.Maui.FontSize.GetHashCode() -> int
 override Microsoft.Maui.Handlers.EditorHandler.PlatformArrange(Microsoft.Maui.Graphics.Rect frame) -> void
+override Microsoft.Maui.Handlers.ImageHandler.ConnectHandler(Android.Widget.ImageView! platformView) -> void
 override Microsoft.Maui.Handlers.RadioButtonHandler.PlatformArrange(Microsoft.Maui.Graphics.Rect frame) -> void
 override Microsoft.Maui.Handlers.ShapeViewHandler.GetDesiredSize(double widthConstraint, double heightConstraint) -> Microsoft.Maui.Graphics.Size
 override Microsoft.Maui.Layouts.FlexBasis.Equals(object? obj) -> bool