[Android] Image can disappear when going back to the page.

[ziomek64]

Description

First things first please rename the title of this issue to the more correct one as I didn't know how to title it.

I'm experiencing a problem, might be xaml or shell related. The images dissapear when moving between tabs. If I have Image with its source set on the page on the moment the app is building and debugging it will stay there when changing tabs but when Image is loaded on runtime like when I pull data from API (being binded), (Or add image url in xaml and hot reload) it will dissapear when changing tabs.

When I switched .net run time for all platforms from .net 7 to .net 6 it seems to fix it so the issue might be related to that somehow? That's the only discovery I've made so far. Also this issue doesn't seem to persist on other platforms at least it doesn't on Windows. I don't have any apple devices.

Video shows that when adding an image before hand works fine when switching tabs. But there is a bug when adding an image in runtime. This doesn't happen on .net 6.

2023-03-24_09-20-38.mp4

Steps to Reproduce

1. Make fresh project
2. Try to add picture on runtime and switch tabs.

Link to public reproduction project repository

https://github.com/ziomek64/TabBarPhotoTest

Version with bug

7.0 (current)

Last version that worked well

6.0.424

Affected platforms

Android

Affected platform versions

Android

Did you find any workaround?

Use maui on .net 6

Relevant log output

No response

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.

[janseris]

Isn't this XAML Hot Reload issue?

[ziomek64]

Isn't this XAML Hot Reload issue?

I don't think so, because this happens when I have image source binded. When I pull data it works fine, but If I go from this page and come back the image is not there. But when a new image with new source is loaded it again works until I leave the page

[kirakosyan]

DevEx claims that the bug in their control is related to this. Information in the discussion can be useful
https://supportcenter.devexpress.com/ticket/details/t1155623/dxcollectionview-does-not-show-images-in-its-items-when-its-parent-tab-is-switched

[mtmgoliath]

I have managed to find a work-around.

I seems that when setting the URL to just a string property in the VM and binding the Image Source to it then the image disappears.

Instead set/bind to a property inside an object in the VM.

   //Create separate model
  public class Banner
  {
      public string Image { get; set; }
      public string Text { get; set; }
  }
  
  //In the VM create property for object
  public Banner HeadlineBanner { get; set; }
  
  
  //Then in the VM set properties on page appearing event
  [RelayCommand]
  public async void PageAppearing()
  {
      try
      {
          await Task.Run(async () =>
          {
              //Get details from api service
              var headlineBanner = new HeadlineBanner();
              headlineBanner.Image = _apiService.ImageUrl;
              headlineBanner.Text = _apiService.Text;
            
              //Set the object
              HeadlineBanner = headlineBanner;
          });

      }
      catch (Exception ex)
      {
          Crashes.TrackError(ex);
      }
  }

Then in the view bind to object's properties

<Image Source="{Binding HeadlineBanner.Image}" />
<Label Text="{Binding HeadlineBanner.Text}" />

I also found that I was having trouble if binding to a ContentView, instead of directly writing out the layout in the View.

Hopefully this helps get your app out the door!

[ziomek64]

I have managed to find a work-around.

I seems that when setting the URL to just a string property in the VM and binding the Image Source to it then the image disappears.

Instead set/bind to a property inside an object in the VM.

   //Create separate model
  public class Banner
  {
      public string Image { get; set; }
      public string Text { get; set; }
  }
  
  //In the VM create property for object
  public Banner HeadlineBanner { get; set; }
  
  
  //Then in the VM set properties on page appearing event
  [RelayCommand]
  public async void PageAppearing()
  {
      try
      {
          await Task.Run(async () =>
          {
              //Get details from api service
              var headlineBanner = new HeadlineBanner();
              headlineBanner.Image = _apiService.ImageUrl;
              headlineBanner.Text = _apiService.Text;
            
              //Set the object
              HeadlineBanner = headlineBanner;
          });

      }
      catch (Exception ex)
      {
          Crashes.TrackError(ex);
      }
  }

Then in the view bind to object's properties

<Image Source="{Binding HeadlineBanner.Image}" />
<Label Text="{Binding HeadlineBanner.Text}" />

I also found that I was having trouble if binding to a ContentView, instead of directly writing out the layout in the View.

Hopefully this helps get your app out the door!

I honestly would prefer to stay at .net 6 and wait for the fix as I have too much to change. But somebody will use it for sure. I don't need it as I didn't use any new features from 7