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) -->
      <Page>
          <Text Value="Page 1" />
      </Page>
      <Page>
          <Text Value="Page 2" />
      </Page>
      <Page>
          <Text Value="Page 3" />
      </Page>
  </PageControl>
   <WhileTrue Value="{upsidedown}"> <!-- here variable upsidedown is set to true if we rotate page -->
      <Change swipeDirection.ForwardDirection="Top" />
   </WhileTrue>

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: