Search code examples
c#android.netxamarincollectionview

ImageSource already loaded blink in Collection View


I'm working on an app where a page is displaying previous photos and new one that I can take a shot from the app. I have an ObservableCollection where the object is containing the ImageSource.

try
        {
            if (SDCard.Updated || SDCard.FirstLoad) 
            {                    
                List<MyObject> myObjects = (List <MyObject> )await DataStore.GetItemsAsync(true);
                MyObservableCollection.Clear();
                foreach (var myObject in myObjects)
                {
                    MyObservableCollection.Add(myObject);
                }                          
                
            }
        }
catch (Exception ex)
        {
            Debug.WriteLine(ex);
        }
        finally
        {
            if(IsBusy==true)
                IsBusy = false;
        }

Binded in a CollectionView.

<CollectionView x:Name="ItemsListView" ItemsLayout="HorizontalList"
            ItemsSource="{Binding MyObservableCollection}"                        
            SelectionMode="None">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <RelativeLayout x:DataType="model:MyObject">
                    <Image Source="{Binding PhotoSource}"  BackgroundColor="AliceBlue" Aspect="AspectFill" RelativeLayout.WidthConstraint=
            "{ConstraintExpression Type=RelativeToParent, Property=Width}" RelativeLayout.HeightConstraint=
            "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
...

PhotoSource is a ImageSource Property. After I shot the new photo from the app, I save it on the application (in Application.Current.Properties). Then, when I come back on this page, the "try{}" part rebuilt ObservableCollection with saved data and so the CollectionView is updated (with a little delay/blink during the photo loading).

The issue is : After this, EVEN if I don't reload the ObservableCollection linked, the app always seems to "reload" the photo each time when i go on the page which is displaying total photo list. There is a delay (on .APK tested on my Android phone) or a blink (from the Android emulator).

Is there somebody who faced this issue ?

  • When I open the app, the photos page is load with already saved photos and there is only 1 "load effect" (short delay/blink). If I come back there further, it doesn't load and the images are directly shown.
  • I added breakpoint in my reload list function to be sure after I add a new photo the list isn't reload each time I go to this page so I can confirm that the ObservableCollection isn't modified when I come back on the page.

I repeat : the issue is that the application seems to refresh each time the new PhotoSource added during the use of the application. If I close the app, relaunch it, then go to the page : there is a single loading effect, and the nexts access are fluid (photosources are already loaded).


Solution

  • After I watched in details how the items loaded from memory (previous photos) and the new one (taken from the app) are listed Visual Studio in pined spy mini-windows, I observed this :

    Items loaded from memory ImageSource property : Item.PhotoSource(ImageSource) has a File Property. ImageSource Object has File property

    Wherease new item added recently hadn't "File" property.

    And the explanation is there :

    My new added item.ImageSource property was build by

    ImageSource.FromStream(() => { return mediaFile.GetStream(); });
    

    Wherease my Loaded Item.ImageSource build by

    ImageSource.FromPath(stringPath);
    

    When I changed my new item.ImageSource initialisation to ImageSource.FromPath(stringPath), the "blink/load delay" disappeared.

    I don't know why the ImageSource.FromStream() initialisation faced this behavior and doesn't build the "File" property of the new ImageSource object, but it was the cause of my problem.