用手指握住和移动WPF滑动图像，就像智能​​手机一样

Question

这是我的代码：

 <Grid Grid.Row="1" >
     <Image Stretch="Fill" Source="{Binding Path=MyImage}"/>
 </Grid>

我在视图中有一个图像，并通过绑定来设置它。

在此图像之外，我有两个箭头（左箭头和右箭头）。如果用户点击右箭头，我会向他显示下一张图片，如果他再次点击右箭头 - 下一张图片，等等。这非常有用。

现在，我想通过使用我们的拇指在不使用箭头的情况下在我们的智能手机中滑动图像来实现它。因此，我需要通过单击鼠标按钮，按住它然后向左或向右移动来滑动图像。

我该怎么做？

Answer 1

您可以在向下和向上处理鼠标事件并计算X值

    private Point down;
    public MainWindow()
    {
        InitializeComponent();
    }

    private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        down = e.GetPosition(this);
    }

    private void Image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        Point up = e.GetPosition(this);
    }

在Image_MouseLeftButtonUp上，您可以使用down.X和up.X计算差异并开始行动。

Answer 2

您可以创建一个Behavior来处理滚动：

public class ScrollViewerTouchScrollBehaviour : Behavior<ScrollViewer>
    {
        private double? _horizontalOffset;
        private Point? _position;
        private double _sensitivity = 1;

        public double Sensitivity
        {
            get { return _sensitivity; }
            set { _sensitivity = value; }
        }

        protected override void OnAttached()
        {
            base.OnAttached();
            AssociatedObject.PreviewMouseLeftButtonDown += PreviewMouseLeftButtonDown;
            AssociatedObject.PreviewMouseMove += PreviewMouseMove;
            AssociatedObject.PreviewMouseLeftButtonUp += PreviewMouseLeftButtonUp;
        }

        protected override void OnDetaching()
        {
            base.OnDetaching();
            AssociatedObject.PreviewMouseLeftButtonDown -= PreviewMouseLeftButtonDown;
            AssociatedObject.PreviewMouseMove -= PreviewMouseMove;
            AssociatedObject.PreviewMouseLeftButtonUp -= PreviewMouseLeftButtonUp;
        }

        private void PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            _horizontalOffset = AssociatedObject.HorizontalOffset;
            _position = e.GetPosition(AssociatedObject);
        }

        private void PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            AssociatedObject.ReleaseMouseCapture();
        }

        private void PreviewMouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton != MouseButtonState.Pressed || !_horizontalOffset.HasValue || !_position.HasValue)
            {
                return;
            }

            var point = e.GetPosition(AssociatedObject);

            var diff = point.X / Sensitivity - _position.Value.X / Sensitivity;

            AssociatedObject.ScrollToHorizontalOffset(_horizontalOffset.Value - diff);
        }
    }

Sensitivity属性允许您调整滚动的速度。尝试使用不同的值来查看最适合您应用的值。

然后在您的xaml位置，您希望能够在ScrollViewer内滚动的内容并添加行为：

<ScrollViewer CanContentScroll="True"
              HorizontalScrollBarVisibility="Hidden"
              VerticalScrollBarVisibility="Hidden"
              VerticalAlignment="Stretch">
    <!-- Your content here -->
    <i:Interaction.Behaviors>
        <behaviours:ScrollViewerTouchScrollBehaviour Sensitivity="1" />
    </i:Interaction.Behaviors>
</ScrollViewer>

您当然需要在行为和xaml中添加对Systems.Windows.Interactivty的引用。

如果您不想使用某种行为，也可以在代码隐藏中处理事件。