Page control - swipe only one slide at a time

Back to How-to Discussions
The issue in this thread has been resolved.

Hi. I'm using a PageControl with multiple slides. Is there a way to force it to only swipe one item at a time?

Right now if someone swipes just the right (or wrong?) way, he can swipe two slides in one move.

That should not be possible. You'll need to show some code in a minimal reproduction.

Here is a simple code that can be used to replicate the issue:

<App>
<JavaScript>
	var slides = [0,1,2,3,4,5,6,7];
	module.exports.slides = slides;
</JavaScript>
<DockPanel>
	<PageControl ClipToBounds="true">
		<Each Items="{slides}">
			<Panel>
				<Text FontSize="30" Alignment="Center" Value="{}"/>
				<Rectangle Layer="Background">
					<Stroke Width="2" Color="#f00"/>
				</Rectangle>
			</Panel>
		</Each>
	</PageControl>
</DockPanel>
</App>

But the problem seems to be with the interaction itself (drag a slide hard enough and the page control will swipe 2 slides or even more). Here is a video that hopefully illustrates the issue

https://www.dropbox.com/s/p5d7nw8rzazq2ux/20171019_124206.mp4?dl=0

You can see me going from slide 1 to 3 in one single motion/swipe.

Tried that code, couldn't get it to overscroll a single page in one swipe motion. There is a bit of overflow if I scroll really enthusiastically, because that's how the default NavigationMotion for a PageControl works.

You might try doing this, and then tweak the settings on NavigationMotion to make it behave exactly like you need:

<App>
<JavaScript>
    var slides = [0,1,2,3,4,5,6,7];
    module.exports.slides = slides;
</JavaScript>
<DockPanel>
    <PageControl ClipToBounds="true">
        <NavigationMotion GotoType="SmoothSnap" />
        <Each Items="{slides}">
            <Panel>
                <Text FontSize="30" Alignment="Center" Value="{}"/>
                <Rectangle Layer="Background">
                    <Stroke Width="2" Color="#f00"/>
                </Rectangle>
            </Panel>
        </Each>
    </PageControl>
</DockPanel>
</App>

Hope this helps!

SmoothSnap is what I already used in my full project and it didn't prevent the issue (so I can stil replicate it even with using your code above). However I think I realized what the problem is: I have a very high sensitivity for my mouse, so when I test in the desktop emulator this is what might be causing the problem.

I tried previewing it now on a phone and it does not happen at all no matter how hard I swipe, so it looks like this is not a real problem.

Post Stats
  • 5
    replies
  • 177
    views
  • 2
    users