Fuse Community

(Bug?) Rotate Swipe Direction for PageControl with RotateGesture

Not sure if this is a bug or if I just don’t know how to do this…

I have a PageControl inside a Viewport with a RotateGesture. The pages are swiped left and right, but the swipe direction does not rotate with it. This leads to some bizarre visual effects.

For example, when the Viewport (and thus the PageControl and pages it contains) is rotated 90º, the pages are no longer oriented left and right, but up and down. Swiping up and down on the pages has no effect. But swiping left and right causes the pages to flip up and down. Looks very weird!

When the Viewport is rotated 180º, swiping becomes inverted - swipes from right-to-left flip the pages from left-to-right and vice versa.

This all makes for a terrible, disorienting user experience. Is there something I’m supposed to do to get the expected swiping behavior? Or is this a bug that needs to be fixed?

Can anyone help me with this? Should I move this to the bug section?

I think that is expected behavior, if you want to control PageControl interaction manually you can override the SwipeNavigate behavior of PageControl. something like

  <PageControl Interaction="None" /> <!-- set interaction to disable because we want to control manually -->
      <SwipeNavigate ForwardDirection="Left" ux:Name="swipeDirection" /> <!-- here we set forward direction to left, so when you swipe from left to right it will animated replacing page from right (inverse) -->
          <Text Value="Page 1" />
          <Text Value="Page 2" />
          <Text Value="Page 3" />
   <WhileTrue Value="{upsidedown}"> <!-- here variable upsidedown is set to true if we rotate page -->
      <Change swipeDirection.ForwardDirection="Top" />

More info of SwipeNavigate you can find it here

hope it helps, thanks

@Ichan_mb This looks like it will be very helpful. I will give it a try and let you know! :slightly_smiling_face:

Is there some way to get feedback from the RotateGesture so that I can know how much the target is rotated by the user, e.g. 53 degrees, -100 degrees, etc.?

I would also like to know if there is a way to limit how much the user can rotate an InteractiveTransform. If I can stop the user from rotating it 360°, that might help… and to reset the rotation to 0… I looked in the docs but didn’t find this info…

On the InteractiveTransform there is property called Rotation. You can create an observable variable and assign it to the Rotation property, and then you can add change listener to the observable variable to track changes.