Vertical Carousel Swipe

[zigzigzig]

Hello all,

I've got a carousel control, and in order to get swiping working on it I've rotated it 90 degrees and then rotated necessary components on the design item (a label) -90 degrees. While it appears to be working, I've discovered that though rotated, the carousel is still only responding to left and right swiping on the x-axis, and not at all vertically (minuscule variations like diagonal swipes get a response but are too chaotic to be reliable). Is there a way I can properly enable vertical swiping only on a carousel, using rotation or otherwise?

thanks
- z

[Stewart Marshall]

From what you've said, you've effectively made a vertically scrolling set of panels by rotating everything in the Carousel so that it looks right.

Tree (Prim_tree) however provides exactly the functionality you need.

Use of both controls is just about identical. You can change your design part to implement #Prim_Tree.iTreeDesign instead of #Prim_caro.iCarouselDesign. The method names are the same for both.

Regards

[zigzigzig]

thanks for the help, Stewart!

Can you do incremental scrolling on trees? I should have specified that this is the behavior I need, vertical swiping that
displays a singular entry and selects it automatically, without having to click on an entry.

thanks again,
- z

[Stewart Marshall]

Your request has highlighted that we could do with an Orientation property on Carousel, so please log an enhancement request for this.

And sadly, Tree will give you smooth scrolling as per any normal scrolling control and there's no real way around that.

However, there is a third option that doesn't use a visual list control. The technique is to use 2 panels that occupy the same space. When the upper panel is swiped (TouchMove is set to Vertical), it reveals the underlying panel which shows either the next or previous item depending on the direction of the swipe. This produces an effect similar to the image below when the user is mid swipe.

IMG_0887.PNG (73.98 KiB) Viewed 8873 times

When the swipe action ends, if the image is 50% off the screen, an animation is used to complete the action, completely revealing the underlying image, or it is animated back to it start position.

As the the top image is now off the screen it can be updated to show the next/previous image and put back on top of the background image. As the two are identical, the user doesn't see any change.

This sounds quite complex, but the code is really quite straightforward.

Sample import attached

Regards