Load one image at a time

Question

Hello guys,

I'm using uwp (C#) to create an app for an olympus camera.

(The camera acts as an Web server, and the comunication is over HTTP)

I have to display a huge grid with the thumbnails of the pictures and for this I have a list with the urls (strings) binded to the image list in xaml... and I have 2 issues here:

 1. The Camera accepts just a few request at a time, and with my approach, the xaml will try to load all the images at the same time.

      Is there a nice way of loading one image at a time from the xaml? I don't know... some kind of 'magic' that loads the image just after all images before are loaded :).

 

2.  Load just the images that are intro scroll view

 

Is there any way to combine this 2 issues into one super elegant solution?

My thoughts to keep track of the images loaded when I create the url list, and load the next manually, and check if the image is intro view will be the worst code ever written :))

 

I know there's something better

 

Thank you 

Answer 1

As your images are fetched from an url, you can implement? async/await functionality to load images asynchronously in the code behind. This would be more effective performance wise

Answer 2

I can't load load hundreds of images in memory, and I wanted a way to let know the UI how to load and dispaly the images, separated from the bussiness behind, and I managed to do something with DependencyObject. Here's the code if someone needs it

 

 The dependency object

public class ImageLoader : DependencyObject
    {
        static LoadOneImageAtATimeService loadOneImageService = new LoadOneImageAtATimeService>();

        static private List imageList = new List();

        public static readonly DependencyProperty UseOneImageAtATimeProperty =
        DependencyProperty.RegisterAttached(
          "UseOneImageAtATime",
          typeof(Boolean),
          typeof(ImageLoader),
          new PropertyMetadata(null, OnLoadOneImageAtATimeChanged)
        );

        public static void SetUseOneImageAtATime(UIElement element, Boolean value)
        {
            element.SetValue(UseOneImageAtATimeProperty, value);
        }

        public static Boolean GetUseOneImageAtATime(UIElement element)
        {
            return (Boolean)element.GetValue(UseOneImageAtATimeProperty);
        }


        static void OnLoadOneImageAtATimeChanged(DependencyObject target, DependencyPropertyChangedEventArgs args)
        {
            if (!(target is Image))
            {
                return;
            }
            Image image = (Image)target;
            loadOneImageService.AddImage(image);
        }



    }

 The service with the loading logic

public class LoadOneImageAtATimeService
    {
        public LoadOneImageAtATimeService()
        {

        }

        private Queue imageList = new Queue();
        private List requestedImageList = new List();

        public int ImagesAtATime { get; set; } = 1;

        public void AddImage(Image image)
        {
            image.DataContextChanged += new Windows.Foundation.TypedEventHandler(DataContextChanged);
        }


        private void TryLoadNext()
        {
            if(requestedImageList.Count >= ImagesAtATime)
            {
                return;
            }

            if (!imageList.Any())
            {
                return;
            }

            Image image = imageList.Dequeue();
            requestedImageList.Add(image);

            ICameraImage imageContext = (ICameraImage)image.DataContext;

            if(imageContext.Source == imageContext.Thumbnail)
            {
                SetImageAsLoaded(image);
                return;
            }

            imageContext.Source = imageContext.Thumbnail;
            image.ImageOpened += new RoutedEventHandler(ImageLoaded);
        }

        private void DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args)
        {
            if(sender.DataContext == null)
            {
                return;
            }

            Image image = (Image)sender;

            ((ICameraImage)image.DataContext).Source = "ms-appx:///Assets/GenericPhoto7.png";
            //image.DataContextChanged -= new Windows.Foundation.TypedEventHandler(DataContextChanged);
            imageList.Enqueue(image);
            TryLoadNext();
        }

        private void ImageLoaded(object sender, RoutedEventArgs args)
        {
            Image image = (Image)sender;
            image.ImageOpened -= new RoutedEventHandler(ImageLoaded);

            SetImageAsLoaded(image);
        }

        private void SetImageAsLoaded(Image image)
        {
            requestedImageList.Remove(image);
            TryLoadNext();
        }
    }

 and to use this all we need is to add a new attribute to the image

 

<Image Width="100"
                           Height="100"
                           Source="{Binding Path=Source}"
                           Stretch="UniformToFill"
                           c:ImageLoader.UseOneImageAtATime="True"
                           />