UWP ScrollViewer UserControl 中的 HorizontalSnapPointsType 未设置答案

【问题标题】：HorizontalSnapPointsType in UWP ScrollViewer UserControl not setUWP ScrollViewer UserControl 中的 HorizontalSnapPointsType 未设置
【发布时间】：2016-11-30 19:38:29
【问题描述】：

我创建了一个包含一个 ScrollViewer、一个 StackPanel 和两个按钮的 UserControl。我已禁用水平滚动条并想使用按钮滚动。但是当我在控件内部设置 HorizontalSnapPointsType 时它不起作用。如果我将 ScrollViewer 直接添加到我的主 xaml 中，则设置该属性。 HorizontalScrollBarVisibility 和 HorizontalScrollMode 等其他属性设置正确，所以我不确定问题是什么。我在下面包含了 xaml。

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

然后是调用控件的 xaml。

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

【问题讨论】：

标签： c# xaml user-controls uwp

【解决方案1】：

ScrollViewer.HorizontalSnapPointsType property 声明操作行为如何响应水平轴上的捕捉点。正如 Remarks 中声明的那样，此属性适用于平移操作：

对于平移动作，通常有自然停止的地方。捕捉点提供了一种指示这些位置所在位置的方法。然后，当用户滑动时，操作结果会使用 SnapPointsType 值表示的行为来支持该自然点。

更具体地说，此属性适用于触控模式。参考Guidelines for panning的“平移行为”部分：

使用滑动手势进行平移会在解除触摸接触时将惯性行为引入交互。借助惯性，内容会继续平移，直到达到某个距离阈值，而无需用户直接输入。使用捕捉点来修改这种惯性行为。

但是，在您的代码中，您已禁用水平滚动并使用按钮进行滚动，因此捕捉点将不起作用并且设置 HorizontalSnapPointsType 属性将没有任何效果。

【讨论】：