如何使用鼠标在 WPF 中创建左右滑动？

Question

我是 C# 的新手。所以，我正在尝试在我的 WPF 中创建一个简单的滑动功能，如果我向左或向右滑动，它会转到另一个 wpf window。请帮我！我在网上找不到太多资源。

所以我的问题是如何在 wpf 应用程序中使用鼠标滑动，以便我可以使用鼠标滑动在 pages/window 之间切换。

我只是想做一个图像轮播。到目前为止我已经关注了这个 WPF image swipe to change image like in iOS 但是，它不会滑动，而是在移动鼠标时放大和缩小。

Answer 1

我正在使用页面，但您也可以使用 window。

第一。创建两个页面 LeftPage.xaml 和 RightPage.Xaml 和以下代码到 MainWindow.xaml 和 MainWindows.xaml.cs

XAML

主窗口

<Window x:Class="SOWPF.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"        
    xmlns:local="clr-namespace:SOWPF"
    mc:Ignorable="d" 
    Title="MainWindow" Height="450" Width="800"
    MouseDown="Window_MouseDown" MouseMove="Window_MouseMove">
<Grid>
    <Frame x:Name="MainFrame" NavigationUIVisibility="Hidden" />
</Grid>

C#

public partial class MainWindow : Window
{
    protected Point SwipeStart;
    public MainWindow()
    {
        InitializeComponent();
        MainFrame.Source = new Uri("LeftPage.xaml", UriKind.RelativeOrAbsolute);
    }

    private void Window_MouseDown(object sender, MouseEventArgs e)
    {
        SwipeStart = e.GetPosition(this);
    }

    private void Window_MouseMove(object sender, MouseEventArgs e)
    {
        if (e.LeftButton == MouseButtonState.Pressed)
        {
            var Swipe = e.GetPosition(this);                

            //Swipe Left
            if (SwipeStart != null && Swipe.X > (SwipeStart.X + 200))
            {
                // OR Use Your Logic to switch between pages.
                MainFrame.Source = new Uri("LeftPage.xaml", UriKind.RelativeOrAbsolute);
            }

            //Swipe Right
            if (SwipeStart != null && Swipe.X < (SwipeStart.X - 200))
            {
                // OR Use Your Logic to switch between pages.
                MainFrame.Source = new Uri("RightPage.xaml", UriKind.RelativeOrAbsolute);
            }
        }
        e.Handled = true;
    }
}

Answer 2

我创建了一个 Behavior，这样整个事情就可以在不需要任何代码的情况下完成。使用 Behavior 的好处是您可以在解决方案的任何位置重用它，对其进行单元测试以确保它按您的意愿运行或扩展它的功能。

主要Window

<Window x:Class="TestWpfApplication.MainWindowView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:testWpfApplication="clr-namespace:TestWpfApplication"
        mc:Ignorable="d"
        Title="MainWindow" 
        Height="450" 
        Width="800">

    <i:Interaction.Behaviors>
        <testWpfApplication:SwipeBehavior TargetContentControl="{Binding ElementName=MainContentControl}" LeftUserControl="{Binding Path=LeftControl}" RightUserControl="{Binding Path=RightControl}" />
    </i:Interaction.Behaviors>

    <Grid>
        <ContentControl Name="MainContentControl" />
    </Grid>
</Window>

主要Window代码隐藏

using System.Windows;

namespace TestWpfApplication
{
    public partial class MainWindowView : Window
    {
        private readonly MainWindowViewModel _mainWindowViewModel = new MainWindowViewModel();

        public MainWindowView()
        {
            InitializeComponent();

            DataContext = _mainWindowViewModel;
        }
    }
}

滑动行为

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Interactivity;

namespace TestWpfApplication
{
    public class SwipeBehavior : Behavior<Window>
    {
        public static readonly DependencyProperty TargetContentControlProperty = DependencyProperty.RegisterAttached("TargetContentControl", typeof(ContentControl), typeof(SwipeBehavior), new UIPropertyMetadata(null));

        public static readonly DependencyProperty LeftUserControlProperty = DependencyProperty.RegisterAttached("LeftUserControl", typeof(UserControl), typeof(SwipeBehavior), new UIPropertyMetadata(null));

        public static readonly DependencyProperty RightUserControlProperty = DependencyProperty.RegisterAttached("RightUserControl", typeof(UserControl), typeof(SwipeBehavior), new UIPropertyMetadata(null));

        public static ContentControl GetTargetContentControl(DependencyObject dependencyObject)
        {
            return (ContentControl) dependencyObject.GetValue(TargetContentControlProperty);
        }

        public static void SetTargetContentControl(DependencyObject dependencyObject, ContentControl value)
        {
            dependencyObject.SetValue(TargetContentControlProperty, value);
        }

        public static ContentControl GetLeftUserControl(DependencyObject dependencyObject)
        {
            return (UserControl) dependencyObject.GetValue(LeftUserControlProperty);
        }

        public static void SetLeftUserControl(DependencyObject dependencyObject, UserControl value)
        {
            dependencyObject.SetValue(LeftUserControlProperty, value);
        }

        public static ContentControl GetRightUserControl(DependencyObject dependencyObject)
        {
            return (UserControl) dependencyObject.GetValue(RightUserControlProperty);
        }

        public static void SetRightUserControl(DependencyObject dependencyObject, UserControl value)
        {
            dependencyObject.SetValue(RightUserControlProperty, value);
        }

        private Point _swipeStart;

        protected override void OnAttached()
        {
            base.OnAttached();
            AssociatedObject.MouseDown += OnMouseDown;
            AssociatedObject.MouseMove += OnMouseMove;
        }

        private void OnMouseDown(object sender, MouseButtonEventArgs e)
        {
            _swipeStart = e.GetPosition(AssociatedObject);
        }

        private void OnMouseMove(object sender, MouseEventArgs e)
        {
            var targetContentControl = GetValue(TargetContentControlProperty) as ContentControl;

            if (targetContentControl == null)
            {
                return;
            }

            if (e.LeftButton == MouseButtonState.Pressed)
            {
                var swipe = e.GetPosition(AssociatedObject);                

                //Swipe Left
                if (swipe.X > (_swipeStart.X + 200))
                {
                    // OR Use Your Logic to switch between pages.
                    targetContentControl.Content = new LeftControl();
                }

                //Swipe Right
                if (swipe.X < (_swipeStart.X - 200))
                {
                    // OR Use Your Logic to switch between pages.
                    targetContentControl.Content = new RightControl();
                }
            }

            e.Handled = true;
        }
    }
}

主要Window视图模型

using System.Windows.Controls;

namespace TestWpfApplication
{
    internal class MainWindowViewModel
    {
        public UserControl LeftControl { get; } = new LeftControl();

        public UserControl RightControl { get; } = new RightControl();
    }
}

注意：本例中的LeftControl和RightControl是WPF用户控件。此外，您必须在项目中引用 System.Window.Interactivity 才能使用 Behavior class

如何使用鼠标在 WPF 中创建左右滑动？

How to create left and right swipes in WPF using Mouse?

c#

wpf

swipe

swipe-gesture