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!
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.