Rank 2
I'm playing around with data virtualization to try to fix major performance issues I have with a smooth-scrolling scrollviewer. This scrollviewer is touch gesture-enabled, so flick/swipe gestures are interpreted as moving to the next page of items. Unfortunately, I haven't been having the best of luck.
Does anybody know how I could incorporate UI and data virtualization to show a page of items with the next page peeking in from the sides? A swipe would smoothly scroll the horizontal offset to the next page. Think of how mobile apps do list paging.
Attached is a 2-stage mockup of how I expect this behavior to work. Doing this without virtualization has been accomplished but it's an entirely different story when you want UI and data virtualization. Any help would be appreciated.
7 Answers, 1 is accepted
Thank you for attaching the mockups. Would it be possible for you to discuss some details about the requirements that you have, as there are a few different paths to take, to achieve similar results? First of all, is the scrollviewer functionally needed? If it is not you can go with a "fake" scroll bar and some fixed layout that changes its data context in accordance to the VQCV's current item change. This might prove difficult to implement if you need to scroll multiple items with a single gesture (flick). Such layout would be much simpler than using a full-blown itemscontrol. I can try to prepare a sample if the idea suits your needs. The other alternative is to use an ItemsControl with some virtualizing panel. However, this would require some manipulations to achieve the partially visible previous/next pages. The last option that comes to my mind is to use some of the controls of the suite (i.e. RadTileList).
Regards,
Ivan Ivanov
Telerik
Rank 2
Thanks very much for responding. I will list out the imperative features:
* Horizontal layout, wrapping vertically and scaling out horizontally
* Items are equal-sized, image-based, tapping the image should allow for displaying a dialog
* Should give the illusion of paging with the flicks/swipes
* Must show clear paging separation to make sure there are no cutoff item tiles
* Must show a small sliver of the next page to the left and right to imply to the user that there is more content, or none.
* This sliver must be a hitbox for paging, should swiping/flicking not be the user's preference
* Swiping/flicking must allow horizontal offset manipulation to feel like their swipe/flick is natural (this may necessitate the scrollviewer?)
It isn't truly important to me how this effect is achieved, so I'm open to suggestions. The RadTileList sounds great, but I was not sure if it was supported by UI or Data virtualization. The samples I have found are very basic.
Ivan, I am still at this point a prospective customer, but if we can confirm this is possible (even if it requires some help from Telerik) I would be happy to authorize purchase of your controls. Thanks!
After reviewing the listed requirements, it seems that RadTileList might not be the best way to go. I believe that similar results are achievable with VQCV and a custom control. I will try to prepare a runnable sample that illustrates the core layout and scrolling mechanisms. I will write back to this forum as soon as I am ready with it.
Regards,
Ivan Ivanov
Telerik
Rank 2
Ivan,
I'm sure you can understand that since I cannot simply wait for a response, I am also working on this in parallel. I am working on a virtualized wrap panel (inheriting from Telerik VirtualizingWrapPanel) that includes a gap between "pages".
I am faking a paging effect, it is simply observing the viewport size, measuring how many items it can fit in the viewport plus a before/after margin buffer. The paging will happen by simply animating the horizontal offset to one additional viewport width size (HorizontalOffset + ViewportWidth).
As for loading in data, my idea is that I will set the VQCV page size to whatever the aforementioned panel can display on one page x 3, so I can swipe/scroll any one direction and have it actually animate the offset. Upon "paging" by the offset, it will load the next page and purge the previous page it had ready from before (1000 objects with image thumbnail controls would be terrible performance).
If you'd like to collaborate on this with me I'd be more than happy to!
Thank you for sharing these additional requirements and please excuse me for delaying the sample. My initial idea for the spike was to fake pages by creating some usercontrols that will display the items on a single page. Thus you can still get the viewport and calculate how many items can be displayed, similar to the logic that is incorporated in the VirtualizingWrapPanel. Then items can be loaded "manually" from the VQCV by providing the loadsize and startindex. The ScrollViewer could be faked by using a single scrollbar at the bottom that is bound to "allitems/itemsperpage" size. To ease the representation of previous and following page, three actual pages can be loaded, applying some visual transformation the first and the third one. I believe that I can focus finishing the sample by tomorrow if this approach seems good for you. I am reserved about the idea to fake paging using VirtualizingWrapPanel. However, you can send your implementation if you have some working code, and then we can discuss it.
Regards,
Ivan Ivanov
Telerik
Rank 1
I apologize for the account change -- when purchasing the controls, my IT admin signed me up under my corporate email.
Officially, my attention has been pulled away from this project but I am still working on it in my free time. So please, don't worry about the delay. I'm grateful that you've taken an interest in this and are willing to come up with a sample. I don't have a working example of that panel yet.
One thing to note - my requirements don't include a scrollbar. The end user doesn't need to see or drag the scrollbar - it proves too difficult with a touchscreen anyway. So there isn't really a need to put any effort into faking that. The swiping gesture (and, additionally, a page left/right button on either side) would be the only means to manually scroll (page) through the list.
I think we are on the same page when it comes to how to present previous and following pages by loading 3 actual pages. The visual transformation between first and third is where I struggle to find a path. I could easily do a translate transform attached to the touch manipulation delta event, but somewhere in there I got lost when it came to how the VQCV handles panel "pages".
RE: Your reservations about faking paging using a VWP
Would it be necessary to virtualize the panel anyway given that there are only enough items to load 1 page on either side? We're talking about 16 items per visual page, and that potentially mean even less in smaller resolution versions of my application. The "faked" paging definitely feels like an abuse of the technologies involved, but truly all I need is to allow paging to not cut off items. The visual effect of having a centered "page" with the previous/following pages sort of "peeking in" on the edges is just a bit of "wow factor". From a functional standpoint, they are not necessary.
I prepared a sample project that illustrates the idea of loading the items by pages and calculating the loadsize in accordance to the viewport size. There are quire a few things to be polished, but I aimed to demonstrate the basic idea. Could you please have a look at it and we can discuss whether a similar approach would be applicable in your scenario?
Regards,
Ivan Ivanov
Telerik