像智能手机一样,在WPF中用手指按住并移动滑动图像

像智能手机一样,在WPF中用手指按住并移动滑动图像,wpf,xaml,sliding,Wpf,Xaml,Sliding,这是我的代码: <Grid Grid.Row="1" > <Image Stretch="Fill" Source="{Binding Path=MyImage}"/> </Grid> 我有一个图像在我的视图中,我通过绑定设置它的表面 在这个图像之外,我有两个箭头(左箭头和右箭头)。如果用户单击右箭头,我将向他显示下一幅图像,如果他再次单击右箭头-下一幅,等等。这非常有效 现在,我想让它工作起来,就像我们在智能手机上滑动图像一样,使用拇指,

这是我的代码:

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

我有一个图像在我的视图中,我通过绑定设置它的表面

在这个图像之外,我有两个箭头(左箭头和右箭头)。如果用户单击右箭头,我将向他显示下一幅图像,如果他再次单击右箭头-下一幅,等等。这非常有效

现在,我想让它工作起来,就像我们在智能手机上滑动图像一样,使用拇指,而不使用箭头。因此,我需要通过单击鼠标按钮,按住它,然后向左或向右移动来使图像滑动


我该怎么做呢?

您可以处理上下鼠标事件并计算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\u MouseLeftButtonUp上,您可以使用down.X和up.X计算差异并开始您的操作。

您可以创建一个
行为来处理滚动:

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);
        }
    }
当然,您需要在您的行为和xaml中添加对
Systems.Windows.interactive
的引用


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

与touchevents的处理方法相同。我自己的一个小提示:如果你不想点击的话,我希望每边至少有20像素的小变化,但这不会显示滑动效果,它只会在一秒钟内切换图像。不会有滑动。
<ScrollViewer CanContentScroll="True"
              HorizontalScrollBarVisibility="Hidden"
              VerticalScrollBarVisibility="Hidden"
              VerticalAlignment="Stretch">
    <!-- Your content here -->
    <i:Interaction.Behaviors>
        <behaviours:ScrollViewerTouchScrollBehaviour Sensitivity="1" />
    </i:Interaction.Behaviors>
</ScrollViewer>