HorizontalSnapPointsType in UWP ScrollViewer UserControl not set

Question

I've created a UserControl that contains a ScrollViewer, a StackPanel and two buttons. I've disabled the horizontal scroll bar and want to use the buttons to scroll. But when I set HorizontalSnapPointsType inside of the control it doesn't work. If I add the ScrollViewer directly into my main xaml the property is set. The other properties like HorizontalScrollBarVisibility and HorizontalScrollMode are set properly so I'm not sure what the issue is. I've included xaml below.

<UserControl
x:Class="TestApp.Controls.CarouselScrollViewer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<Grid>
    <ScrollViewer x:Name="ScrollViewer"
            HorizontalScrollBarVisibility="Hidden" 
            HorizontalScrollMode="Disabled"
            VerticalScrollBarVisibility="Hidden"
            VerticalScrollMode="Disabled"
            HorizontalSnapPointsType="Mandatory">
        <ContentPresenter x:Name="Content" Content="{x:Bind ScrollViewerContent}" />
    </ScrollViewer>
    <Button VerticalAlignment="Center" HorizontalAlignment="Left" Content="LEFT" Background="White" Click="LeftButton_OnClick" Name="BtnLeft"/>
    <Button VerticalAlignment="Center" HorizontalAlignment="Right" Content="RIGHT" Background="White" Click="RightButton_OnClick" Name="BtnRight"/>
</Grid>

And then the xaml that's calling the control.

<Page
x:Class="TestApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp"
xmlns:controls="using:TestApp.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <controls:CarouselScrollViewer SegmentWidth="400">
        <controls:CarouselScrollViewer.ScrollViewerContent>
            <StackPanel Orientation="Horizontal">
                <Image Source="Assets/cole_anne.png" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
                <Image Source="Assets/icecream.JPG" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
                <Image Source="Assets/jibby_hotdog.png" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
                <Image Source="Assets/andy_courtney_norah.png" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
                <Image Source="Assets/boating.JPG" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
                <Image Source="Assets/dev.jpg" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
                <Image Source="Assets/moir_crab.jpg" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
                <Image Source="Assets/MoirJudLindsayIlgaboating.jpg" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
            </StackPanel>
        </controls:CarouselScrollViewer.ScrollViewerContent>
    </controls:CarouselScrollViewer>
</Grid>

Jay Zuo Jay Zuo · Accepted Answer · 2016-12-01T09:09:21

ScrollViewer.HorizontalSnapPointsType property declares how manipulation behavior reacts to the snap points along the horizontal axis. And as it is declared in the Remarks, this property works for panning actions:

For panning actions, there are often natural stopping places. Snap points provide a way to indicate where these places are. Then, when a user swipes, the manipulation result favors that natural point using behavior as expressed by a SnapPointsType value.

More specifically, this property applies in Touch mode. Ref the "Panning behaviors" section of Guidelines for panning:

Panning with the swipe gesture introduces inertia behavior into the interaction when the touch contact is lifted. With inertia, the content continues to pan until some distance threshold is reached without direct input from the user. Use snap points to modify this inertia behavior.

However, in you code, you've disabled horizontal scroll and used buttons to scroll, so snap points won't work and setting HorizontalSnapPointsType property won't have any effect.

HorizontalSnapPointsType in UWP ScrollViewer UserControl not set

1 Answers