1

I have to display ~150 images at high resolution (~5 MB each one) at the same time. The problem is that it requires a lot of time to load all those images simultaneously. So I'm thinking to show at the beginning low resolution images and in the meantime load the true high res images in background. Then when they are ready switch them.

2 Answers 2

0

I wouldn't bother with all of that C# code. Instead, I'd just use a collection control and a collection of file paths. Try this example:

<ListBox ItemsSource="{Binding FilePaths}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}" Width="250" Stretch="Uniform" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

...

private ObservableCollection<string> filePaths = new ObservableCollection<string>();
public ObservableCollection<string> FilePaths
{
    get { return filePaths; }
    set { filePaths = value; NotifyPropertyChanged("FilePaths"); }
}

...

FilePaths = new ObservableCollection<string>(Directory.GetFiles(
    Environment.GetFolderPath(Environment.SpecialFolder.MyPictures), "*.png"));
2
  • And this way you can load low resolution images for a fast start up and then load the high res version in the background?
    – Marco
    Sep 25, 2014 at 12:32
  • If you have access to low resolution images as mentioned here, you can use PriorityBinding in combination with IsAsync property as mentioned in the example section of Binding.IsAsync
    – 0xBADF00D
    Nov 5, 2014 at 14:32
-1

After a while I ended up with this solution. First I load the low resolution images and I add them to the Grid:

foreach (var extElem in ElemList)
{
   IdImage img = new IdImage();
   img.Id = extElem.ImageID;
   img.CollectionId = extElem.CollectionID;
   BitmapImage bi = new BitmapImage();
   bi.BeginInit();
   bi.UriSource = new Uri(extElem.Url, UriKind.Absolute);
   bi.DecodePixelWidth = 200; //If you want to further reduce the image size (and load time)
   bi.EndInit();
   img.Source = bi;
   grid.Children.Add(img);

   _imgList.Add(img);
}

Then I start a background operation to load the high res images and to change the source of the bitmaps:

BackgroundWorker bgw = new BackgroundWorker();
bgw.DoWork += (s, args) =>
{
    int i = 0;
    foreach (var extElem in _imgList)
    {
        String url = extElem.HighResImageUri;
        Image img = _imgList.ElementAt(i);

        BitmapImage bi = new BitmapImage();
        bi.BeginInit();
        bi.UriSource = new Uri(url, UriKind.Absolute);
        bi.EndInit();
        bi.Freeze();

        Dispatcher.BeginInvoke((Action)(() =>
        {
            img.Source = bi;
        }));
    }
    i++;
}
bgw.RunWorkerAsync();
4
  • -1. A good solution would have used an ItemsControl with a proper DataTemplate and a view model, instead of creating and manipulating UI elements in code. Search the web for MVVM.
    – Clemens
    Sep 25, 2014 at 11:22
  • Yup, I did so. I used an ItemsControl, a DataTemplate etc etc. But I have a FAR more complicated application then what I have described here, and those images are in overlay on the "base.Internalchildren" images that are even more than 150 (they are ca. 2000) and are rendered at a lower resolution to let animations play smoothly.
    – Marco
    Sep 25, 2014 at 12:26
  • Then your answer here is just to show us how to do something in a BackgroundWorker?
    – Clemens
    Sep 25, 2014 at 13:48
  • Mmm, more or less yes :) My problem was that I did not know how to show a bunch of low resolution images and then (when everything is loaded) on runtime update those images with an high resolution version without slowing down the application. I found out that I could use a BackgroundWorker to update the Source property of the Image. Since I was about to ask on SO I thought to write my solution (to this particular problem). If you think It's useless I can remove the question .-.
    – Marco
    Sep 25, 2014 at 14:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.