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

Amit Gupta · Answer

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

none · Answer

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