Making a Virtualizing WrapPanel
If you use Jing, you may have noticed that loading times for the History bin can be really long. As discussed in this post, we’ve already implemented some techniques to improve this, except for one: implementing a virtualizing panel.
In response, I’ve spent the last two months implementing one to significantly cut down on loading times. To be blunt, I can’t say it was an enjoyable experience – it was rather frustrating. Although Dan Crevier has a series of posts on implementing a virtualizing panel, his example is not ready to be used in production.
In this post, I will discuss how I made a virtualizing WrapPanel at a high level, and hopefully make the process a little bit easier.
Disclaimers
Since I wrote my virtualizing WrapPanel under company time, I cannot list its source code as I would be violating my NDA with TechSmith.
Also, I am assuming you already know what the purpose of virtualizing panels are, and have read Dan Crevier’s tutorial on how to write one since I use many of the terms that he does.
Tags: IScrollInfo, lazy load, scrolling, virtualizing, WrapPanel
You can comment below, or link to this permanent URL from your own site.
March 20, 2008 at 10:53 am
[...] from a major software company about Virtualizing WrapPanel…looks like Jerry did that too: "Making a Virtualizing WrapPanel". (no code, but he helps explain more about how to do [...]
June 26, 2008 at 8:52 pm
Jerry,
Thanks for writing this! This is a really good article and will help me implement what I need. I need to create a StackPanel (could be a wrap panel) that will implement scrolling in a different way than normal. Our designer thought it would be a good idea if our program didn’t have any scroll bars. Luckily we don’t have lots of data that needs to be shown in any given stack panel … Just more controls.
Stack panels that have more content than can fit into the scroll viewer will have buttons at the top and bottom. If the user wishes to scroll down, they hit a “Page Down” button. This will cause all the elements in the current view that are visible to fade out, then the elements that are under the last fully visible element will slide up into view. The opposite will occur if the user tries to page up.
I don’t need to worry about virtualizing visuals since the number of child controls in my panel will be always be small (under 10). The one concern I have is that I will be able to perform two different Animations in the ArrangeOverride function. Maybe I just need to fade the visible items out in the IScrollInfo.PageDown function and then translate the items into view in the ArrangeOverride function.
My biggest concern is being able to determine what child controls are visible in the scrollviewer and which are not. Is there an easy way to determine this?
Thanks,
Louis
January 12, 2009 at 9:35 am
Hi Jerry
I’m trying to implement such a panel using your advices.
I have a question:
*If you do not clean the items after you scroll, then the more your scroll the more memory to consume ? Isn’t it ?
Thanks
Jonathan
January 12, 2009 at 1:41 pm
Hi Jonathan,
Right, the panel will keep consuming memory until you’ve loaded all your items into it. I admit it’s not the ideal way to do things, yet at the time of this article, the items I were loading were from disk, and wanted to avoid having to constantly read from the hard drive from loading and unloading the items. After I wrote the article, I was assigned to other areas of my project not having to do with WPF, so it’s with regret that I haven’t had the chance to explore a possible better solution.
Fortunately, we had a major release last week, so I now have some free time. Thanks for asking, I will try to explore better solutions and get them posted if I find any
Jerry
January 22, 2009 at 3:20 pm
I followed the Dan guide for the virtualization. I started implementing an uniform grid (tile panel). Anyway i’m not able to calculate the extent, cause the set of children of the panel is dynamically changed by the panel itself, who asks the ItemContainerGenerator to build/dispose the containers. At every moment, the set of children of the panel contains only (the containers for) the realized items (right?)
Anyway, to calculate the size of the extent (to enable scrolling) the panel should know the total number of the items (realized and virtualized).
Any help?