Page control - swipe only one slide at a time

How-to Discussions
1

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.

2

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

3

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

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

4

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!

5

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.

6

Alright, that might explain. Will mark this as resolved now :slight_smile: