0

For quite a few weeks I've been trying to learn WPF and how to handle a large number of images inside a listbox. I've found several articles on stackoverflow regarding this, but the problem is that the code-answers either are incomplete, not working or too complex for me to understand just yet. I hope somebody here can give me an idea on how this is done.

My main goal is to make a layout like this, being able to select individual images in the view (loading images from a folder):

enter image description here

As far as I've understood I should use a listbox in WPF to hold the images, but I'm a bit confused regarding the actual loading of images. Does anyone have a sample that shows how this is done the proper way without blocking the main thread? I've read about ObservableCollection, Backgroundworker, Lists, virtualizingStackPanel and so on, but I have a hard time to understand what I'm supposed to use.

Edit: I've been looking at the following thread, but as the images shows, I have problems that it does not load all images for some reason. That being said, still not sure if that's the way to do it. It loads the first few images quickly, then one each second: WPF UI multitasking

Community
  • 1
  • 1
NeoID
  • 901
  • 1
  • 11
  • 29
  • 2
    You should only load the images that you currently show. Use virtualization for that. – Stefan Over Sep 16 '14 at 19:36
  • heres the same problem http://stackoverflow.com/questions/14525859/minimizing-memory-consumption-listbox-of-images-wpf – mhoward Sep 16 '14 at 19:44
  • @mhoward: Yes, that looks just like what I'm looking for, but sadly little information regarding the code-behind. – NeoID Sep 16 '14 at 19:54
  • I would start with the code to load the data on a background thread, using a command line application to ensure that I'm forced to use no UI components for this. Once I have the data loading using a background thread, I should end up having an `ObservableCollection` of data about each image, and can start on the UI. Since you want item selection, you should use a `ListBox` for drawing this list to the UI. Now it's a just matter of overwriting the `ItemTemplate`, `ItemsPanelTemplate`, and ensuring the [UI virtualization works](http://stackoverflow.com/a/2784220/302677) – Rachel Sep 16 '14 at 19:54
  • I'm the author of the WPF UI Multitasking answer. That answer was intended to show the OP of the original question what to do and what not to do in WPF, and how DataBinding removes the need for cumbersome manipulation of the Visual Tree. That said, What you need here is to use nested `StackPanel`s, because the WPF `WrapPanel` does not virtualize. Otherwise, there is a virtualizing WrapPanel-like UI somewhere on github or around. Google that. – Federico Berasategui Sep 16 '14 at 20:18
  • Thanks, I've followed the tips as good as I can and this is what I have come up with. The code works, problem is that it only shows a single list of images while I'm trying to make a grid. I can't seem to use wrap-panel as it would break the virtualization. I found this post: http://www.pedrolamas.com/2014/03/31/wrappanel-is-great-so-please-stop-using-it/ It looks just like what I'm looking for, but I don't understand this part: "Now lets say we first group the items in groups of 3..." Any examples on how to do this? xaml: http://pastebin.com/BX4qEUSc code: http://pastebin.com/gV4dSa7a – NeoID Sep 17 '14 at 13:28

1 Answers1

0

Add VirtualizingPanel.IsVirtualizing="True" to your listbox, It should load lazily now.