WPF中鼠标/键盘/拖拽事件以及用行为封装事件详解

目录
  • 鼠标事件
  • 键盘输入事件
  • 拖拽事件
  • 用行为封装事件
    • 用事件来实现
    • 用行为来封装

本文主要介绍了WPF中常用的鼠标事件、键盘事件以及注意事项,同时使用一个案例讲解了拓展事件。除此之外,本文还讲述如何用行为(Behavior)来封装事件。

Windows中的事件通过消息机制来完成,也就是Windows系统来捕获用户输入(如鼠标点击、键盘输入),然后Windows发送一个消息给应用程序,应用程序进行具体的处理。在Winform中,窗体中每个控件都是有独立的句柄,也就是每个控件都可以收到Windows系统传来的消息,但是在WPF中,窗体中的控件是没有句柄的,所以只能是窗体进行消息捕获,WPF框架经过处理再传递给相应的控件。这是WPF和Winform在事件处理上的不同之处。

鼠标事件

常用的鼠标事件包括:

MouseEnter、MouseLeave、MouseDown、MouseUp、MouseMove、MouseLeftButtonDown、MouseLeftButtonUp、MouseRightButtonDown、MouseRightButtonUp、MouseDoubleClick

值得注意的是诸如Button一类的控件,具有Click事件,它其实是仍然是调用了MouseLeftButtonDown等底层事件,然后进行截断,也就是说Button控件只能调用Click事件而不能调用MouseLeftButtonDown事件,因为在Click事件中,调用了MouseLeftButtonDown事件,而且应用了e.Handled = true;阻止事件向下传下去。如果要在Click事件之前进行事件处理,则可以使用PreviewMouseLeftButtonDown事件。

键盘输入事件

用的最多的键盘输入事件有:

KeyDown、KeyUp、TextInput

如果要对某个键进行处理则可以

private void TextBox_KeyDown(object sender, KeyEventArgs e)
{
    if(e.Key == Key.Enter)
    {
        //e.Handled = true;//表示已经处理完成
        //具体逻辑
    }
}

注意TextBox是不能捕获到TextInput事件的,只能捕获到KeyDown、TextChanged等事件,但也可以捕获到PreviewTextInput事件,事件捕获顺序是KeyDown-PreviewTextInput-TextChanged

案例:做一个搜索栏,输入文字后回车搜索

实现方式1:可以在TextBox上增加KeyDown事件,捕获Key.Enter键。

实现方式2:增加一个Button按钮,设置<Button Content="搜索" IsDefault="True"/>

拖拽事件

拖拽事件包括:Drop、DragLeave、DragOver、DragEnter事件

案例,将某个控件拖拽到另一个区域

界面XAML

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <StackPanel x:Name="panel"  Background="#F7F9FA">
        <Border Background="Orange" Height="30" Width="30" MouseLeftButtonDown="Border_MouseLeftButtonDown"/>
    </StackPanel>
    <!--必须设置Background,否则默认为null,null是没有背景和Transparent不同-->
    <!--AllowDrop="True"必须设置-->
    <Canvas x:Name="canvas" Grid.Column="1" Drop="Canvas_Drop" AllowDrop="True"
            Background="Transparent">
    </Canvas>
</Grid>

实现代码

private void Canvas_Drop(object sender, DragEventArgs e)
{
    var data = e.Data.GetData(typeof(Border));
    //canvas.Children.Add(data);//直接这样不可以,因为同一个实例不允许在于两个容器中
    //先在之前的容器中移除,再添加
    panel.Children.Remove(data as UIElement);
    canvas.Children.Add(data as UIElement);

    //获得鼠标相对于canvas的位置
    var point = e.GetPosition((Canvas)sender);
    Canvas.SetLeft(data as UIElement, point.X);
    Canvas.SetTop(data as UIElement, point.Y);
}

private void Border_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Border border = sender as Border;
    DragDrop.DoDragDrop(border, border, DragDropEffects.Copy);
}

用行为封装事件

通过一个案例来讲解

案例,实现某个控件的随意拖动

用事件来实现

主要是通过MouseLeftButtonDown、MouseLeftButtonUp和MouseMove三个事件来实现

XAML界面

<Canvas>
    <Border Background="Orange" Width="100" Height="50" Canvas.Left="100" Canvas.Top="100"
            MouseLeftButtonDown="Border_MouseLeftButtonDown"
            MouseLeftButtonUp="Border_MouseLeftButtonUp"
            MouseMove="Border_MouseMove"
            />
</Canvas>

实现代码

private Canvas _parentCanvas = null;
private bool _isDragging = false;
private Point _mouseCurrentPoint;
private void Border_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    //获得承载Border的父对象
    if (_parentCanvas == null)
        _parentCanvas = (Canvas)VisualTreeHelper.GetParent(sender as Border);

    this._isDragging = true;
    //获得相对于border的坐标
    this._mouseCurrentPoint = e.GetPosition(sender as Border);
    //关键,锁定鼠标即不让鼠标选中其他元素
    (sender as Border).CaptureMouse();
}

private void Border_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    if (_isDragging)
    {
        //关键,取消锁定鼠标
        (sender as Border).ReleaseMouseCapture();
        _isDragging = false;
    }
}

private void Border_MouseMove(object sender, MouseEventArgs e)
{
    if (_isDragging)
    {
        //获得相对于Canvas的坐标
        Point point = e.GetPosition(_parentCanvas);

        (sender as Border).SetValue(Canvas.TopProperty, point.Y - _mouseCurrentPoint.Y);
        (sender as Border).SetValue(Canvas.LeftProperty, point.X - _mouseCurrentPoint.X);
    }
}

关键点

在进行移动的时候,一定要锁定鼠标,也就是不让鼠标可以选中其他元素,如果不锁定会出现以下情况:

情况1:如果鼠标移动过快,会出现图形不能跟随的情况

情况2:如果有多个元素,会出现选中其他元素的情况

下图演示中,鼠标箭头未松开

锁定鼠标有两种方式

(sender as Border).CaptureMouse()//锁定
(sender as Border).ReleaseMouseCapture();//解锁

System.Windows.Input.Mouse.Capture(sender as Border);//锁定
System.Windows.Input.Mouse.Capture(null);//解锁

用行为来封装

上文中主要是通过MouseLeftButtonDown、MouseLeftButtonUp和MouseMove三个事件来实现,在XAML中需要对这三个事件进行绑定。行为则可以将这三个事件封装在一起。

  • 使用行为需要nuget安装Microsoft.Xaml.Behaviors.Wpf,FrameWork版本安装System.Windows.Interactivity.WPF
  • 新建一个类,继承自Behavior<T>,类中重写OnAttached()和OnDetaching()方法。

OnAttached()表示当挂载到对应的对象上的时候触发

OnDetaching()在对象销毁时触发

public class DragMoveBehavior : Behavior<Border>
{
    // 当挂载到对应的对象上的时候触发
    protected override void OnAttached()
    {
        base.OnAttached();
		//方法与上面相同
        //this.AssociatedObject表示关联的对象
        this.AssociatedObject.MouseLeftButtonDown += AssociatedObject_MouseLeftButtonDown;
        this.AssociatedObject.MouseLeftButtonUp += AssociatedObject_MouseLeftButtonUp;
        this.AssociatedObject.MouseMove += AssociatedObject_MouseMove;
    }

    private Canvas _parentCanvas = null;
    private bool _isDragging = false;
    private Point _mouseCurrentPoint;
    private void AssociatedObject_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
    {
        if (_isDragging)
        {
            // 相对于Canvas的坐标
            Point point = e.GetPosition(_parentCanvas);
            // 设置最新坐标
            this.AssociatedObject.SetValue(Canvas.TopProperty, point.Y - _mouseCurrentPoint.Y);
            this.AssociatedObject.SetValue(Canvas.LeftProperty, point.X - _mouseCurrentPoint.X);
        }
    }

    private void AssociatedObject_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        if (_isDragging)
        {
            // 释放鼠标锁定
            //this.AssociatedObject.ReleaseMouseCapture();
            System.Windows.Input.Mouse.Capture(null);
            _isDragging = false;
        }
    }

    private void AssociatedObject_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        this._isDragging = true;
        // Canvas
        if (_parentCanvas == null)
            _parentCanvas = (Canvas)VisualTreeHelper.GetParent(sender as Border);
        // 当前鼠标坐标
        this._mouseCurrentPoint = e.GetPosition(sender as Border);
        // 鼠标锁定
        //this.AssociatedObject.CaptureMouse();
        System.Windows.Input.Mouse.Capture(this.AssociatedObject);
    }

    // 对象销毁
    protected override void OnDetaching()
    {
        this.AssociatedObject.MouseLeftButtonDown -= AssociatedObject_MouseLeftButtonDown;
        this.AssociatedObject.MouseLeftButtonUp -= AssociatedObject_MouseLeftButtonUp;
        this.AssociatedObject.MouseMove -= AssociatedObject_MouseMove;
    }
}

XAML中代码

<Canvas>
    <Border Background="Orange" Width="100" Height="50" Canvas.Left="100" Canvas.Top="100">
        <i:Interaction.Behaviors>
            <local:DragMoveBehavior/>
        </i:Interaction.Behaviors>
    </Border>
</Canvas>

以上就是WPF中鼠标/键盘/拖拽事件以及用行为封装事件详解的详细内容,更多关于WPF事件的资料请关注我们其它相关文章!

(0)

相关推荐

  • C#开发WPF程序中的弱事件模式

    在C#中,得益于强大的GC机制,使得我们开发程序变得非常简单,很多时候我们只需要管使用,而并不需要关心什么时候释放资源.但是,GC有的时并不是按照我们所期望的方式工作. 例如,我想实现一个在窗口的标题栏中实时显示当前的时间,一个比较常规的做法如下: var timer = new DispatcherTimer() { Interval = TimeSpan.FromSeconds(1) }; timer.Tick += (_s, _e) => this.Title = DateTime.Now

  • 详解WPF双滑块控件的使用和强制捕获鼠标事件焦点

    目录 效果 概述 代码部分 效果 概述 最近有个小需求要用双滑块表示一个取值范围,于是就简单做了个用户控件,在此记录下. 使用矩形Rectangle表示范围,椭圆Ellipse表示滑块,使用Canvas控制滑块的左右移动. 椭圆的鼠标按下事件里强制获取鼠标事件焦点,避免移动过快或移出控件范围时,滑块就不跟着跑了.椭圆的鼠标抬起事件释放强制获取鼠标事件焦点 代码部分 需求比较简单,只定义了4个依赖属性,范围的最大值和最小值,取值的最大值和最小值. 接下来就是计算滑块和高亮矩形的位置,计算时注意减去

  • 一文带你了解WPF中的附加事件

    目录 什么是附加事件 附加事件用法 Microsoft 官方文档 附加事件案例 定义自定义控件 注册使用附加事件 什么是附加事件 Microsoft 官方概述: 附加事件可用于在非元素类中定义新的 路由事件 ,并在树中的任何元素上引发该事件. 为此,必须将附加事件注册为路由事件,并提供支持附加事件功能的特定 支持代码 . 由于附加事件注册为路由事件,因此在元素树中引发时,它们会传播到元素树中. 简单来说就是,可以进行附加操作的事件,必须为路由事件(RoutedEvent). 附加事件用法 在 X

  • WPF自定义路由事件

    与依赖项属性类似,WPF也为路由事件提供了WPF事件系统这一组成.为一个类型添加一个路由事件的方式与为类型添加依赖项属性的方法类似,添加一个自定义路由事件的步骤: 一.声明路由事件变量并注册 定义只读的静态变量字段RouteEvent类来声明一个变量,然后使用EventManager的RegisterRoutedEvent()方法向事件系统注册路由事件,该方法的签名如下: public static RoutedEvent RegisterRoutedEvent(string name, Rou

  • 详解WPF中的隧道路由和冒泡路由事件

    WPF中使用路由事件升级了传统应用开发中的事件,在WPF中使用路由事件能更好的处理事件相关的逻辑,我们从这篇开始整理事件的用法和什么是直接路由,什么是冒泡路由,以及什么是隧道路由. 事件最基本的用法 在基于事件驱动的开发中,把代码放在响应注册的事件的处理函数内,比如Click事件.MouseDown事件.MouseUp事件等等.每个控件响应自己的注册事件,有很多如果在事件上有相互关联和影响的事件,就要在一个业务逻辑里写比较多的代码.而路由事件主要的优势就是路由事件可以在元素树上进行传递,并且沿着

  • WPF中鼠标/键盘/拖拽事件以及用行为封装事件详解

    目录 鼠标事件 键盘输入事件 拖拽事件 用行为封装事件 用事件来实现 用行为来封装 本文主要介绍了WPF中常用的鼠标事件.键盘事件以及注意事项,同时使用一个案例讲解了拓展事件.除此之外,本文还讲述如何用行为(Behavior)来封装事件. Windows中的事件通过消息机制来完成,也就是Windows系统来捕获用户输入(如鼠标点击.键盘输入),然后Windows发送一个消息给应用程序,应用程序进行具体的处理.在Winform中,窗体中每个控件都是有独立的句柄,也就是每个控件都可以收到Window

  • Vue 可拖拽组件Vue Smooth DnD的使用详解

    目录 简介和 Demo 展示 API: Container 属性 生命周期 回调 事件 API: Draggable 实战 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vue 可拖拽组件.安利一下~ Vue Smooth DnD 是一个快速.轻量级的拖放.可排序的 Vue.js 库,封装了 smooth-dnd 库. Vue Smooth DnD 主要包含了两个组件,Container 和 Draggable,Container 包含可拖动的元素或组件,它的每一个子元

  • jQuery 移动端拖拽(模块化开发,触摸事件,webpack)

    通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). 这个demo实现的功能是:可以拖拽的元素(在这里是图片)位于列表中,这些元素可以被拖到指定区域,到达指定区域(控制台)后,元素被插入控制台后,原来的拖动元素返回原位置,新的元素依然可以在控制台中拖动,也能拖出控制台. 在这个demo中一个用三个模块,分别为ajax模块,drag模块,position

  • 解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题

    功能描述: 如图,右侧悬浮菜单按钮,只支持上下方向拖动,点击时展开或关闭菜单. BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup =>onclick,意味着在click事件执行时会与与其相关的mouse事件冲突. 解决方案: 因为click事件执行时间短,所以利用鼠标拖动的时间差作为标志,在拖拽事件中计算鼠标从onmousedown 到onmouseup 所用的

  • vue中的可拖拽宽度div的实现示例

    主要思路 在需要拖拽宽度的区域设置一个div,高度设为 100%,宽度尽量窄一些(也不要太窄,3-6px左右) 在此div上绑定当“鼠标按下”时,触发document绑定“鼠标移动”方法和"鼠标抬起"方法 通过鼠标移动方法不断获取当前鼠标位置,设置需要变化大小div的宽高. 鼠标抬起时取消鼠标移动方法和鼠标抬起方法的绑定. <template>   <div class="container" id="content_box"&

  • 基于vue.js中事件修饰符.self的用法(详解)

    .self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</title> <script src="vue.js"></script> <!--'''''''

  • 对vue中的事件穿透与禁止穿透实例详解

    在开发过程中经常遇到的一个场景,就是,页面弹窗,弹窗上有一个确定或者关闭按钮,这时,如果下方有一个按钮,那你点击弹窗的时候,也会触发弹窗下层的按钮事件,vue提供的解决方法就是直接在click.stop //阻止单击事件继续传播 <a v-on:click.stop="doThis"></a> js的解决办法是,直接在事件的方法中添加event.stopPropagation() //html <button>关闭</button> //

  • JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)

    一.函数作用域 1.函数作用域 就是作用域在一个"Function"里,属于这个函数的全部变量都可以在整个函数的范围内使用及复用. function foo(a) { var b = 2; function bar() { // ... } var c = 3; } bar(); // 失败 console.log( a, b, c ); // 三个全都失败 上面的"foo"函数内的几个标识符,放到函数外面访问就都会报错. 2.立即执行函数表达式 在任意代码片段外部

  • DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

    俗话说的好,好记性不如个烂笔头,这么多技术文章如果不去吃透,技术点很快就容易忘掉,下面是小编平时浏览的技术文章,整理的笔记,分享给大家. 开发过程中我们都希望使用别人成熟的框架,因为站在巨人的肩膀上会使得我们开发的效率大幅度提升.不过,我们也应该.必须了解其基本原理.比如DOM事件,jquery框架帮我们为我们封装和抽象了各浏览器的差异行为,为事件处理带来了极大的便利.不过浏览器逐步走向统一和标准化,我们可以更加安全地使用官方规范的接口.因为只有获得众多开发者的芳心,浏览器才会走得更远.正如我们

  • Vue中使用方法、计算属性或观察者的方法实例详解

    熟悉 Vue 的都知道 方法methods.计算属性computed.观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的,但是它们之间又存在一些不同之处,每一个都有一些适合自己的场景,我们要想知道合适的场景,肯定先对它们有一个清楚的了解,先看一个小例子. <div id="app"> <input v-model="firstName" type="text"&

随机推荐