Introduction

While developing Media Assistant, I faced several issues, mostly with the performance. I have written another
article titled Replacing TreeView with ListBox, where I explained
how I simulated a listbox to look like a tree view to support virtualization. I had to do that because a tree view performs very, very slow if there are about 20,000 nodes.
I faced a similar issue when I added a Thumbnail View to display the movies in the repository. I used a ListBox where I changed the ItemsPanel
to WrapPanel. When I use the WrapPanel, the ListBox loses its virtualization ability and it takes a lot of time to display 5000 movies in my repository.
Because WrapPanel doesn't support virtualization. In this article, I will explain how I virtualized the WrapPanel.

Thumbnail View

ListBox with WrapPanel

I changed the ItemsPanel of ListBox with WrapPanel to show the thumbnail view.

Once I used the WrapPanel with ListBox, it displays the movies in a thumbnail like view without virtualization. I could not find any solution to virtualize
the WrapPanel. So, I investigated which part of my code was taking time. Then I found that individual thumbnail items take some time to render because I used
an image, there was some processing with each item, and I was using the converters, etc.

I tried with a simple border without anything in it with WrapPanel and it displays very quickly. So, I tried to use the detail movie view with an image and other
information only for the items which are in the visible area, and all other items which are not in the visible area with a simple border. I kept changing the views while the user scrolled.
I subscribed to the ScrollChanged event and used an ItemTemplate which switches between a normal border and a detail movie view.

In the movie data, I used a property IsVisible which is used in the DataTrigger to switch to the thumbnail view. NormalThumbnail
is the DataTemplate which displays the detail movie information with image and other data. So I'm not going to explain that part in this article.

This code simply finds those items which are fully or partially visible and marks them as visible. I used a Job class which marks the items to be visible
in a different thread. I did it just to delay the trigger. But it is not necessary in most cases. So, ignore that part.

This code identifies if an item is in the visible area of the scroll viewer. Then I find the visible items rectangle and the view point's rectangle
in the same co-ordinate system and find the intersection. And I'm done.