Load one image at a time

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

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"
/>

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

none8y ago
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"
                           />
Amit Gupta8y ago
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