(原創)[C#] 一步一步自定義拖拽(Drag&Drop)時的滑鼠效果:(一)基本原理及基本實現

leslie_xin發表於2022-04-01

一、前言

拖拽(Drag&Drop),屬於是極其常用的基礎功能。
無論是在系統上、應用上、還是在網頁上,拖拽隨處可見。同時拖拽時的滑鼠效果也很漂亮,像這樣:

image

這樣:

image

還有這樣:

image

等等等等。
這些拖拽時的滑鼠效果,直觀又美觀。
然後,在我們寫程式時,程式確實是支援了拖拽,但是效果卻是這樣的:

image

很是樸實無華。
而在某些時候,我們的程式也需要比較個性化的拖拽效果。
所以,我們就通過這一系列文章,來一步一步實現自己的個性化拖拽效果,同時,也會去仿一些經典的拖拽效果。

相信看完的你,一定會有所收穫!

本文地址:https://www.cnblogs.com/lesliexin/p/16073879.html


二、基本原理

(一)基本事件方法

與拖拽相關的事件和方法,一共有7個:

1,DragDrop:在完成拖放操作時發生。
2,DragEnter:在將物件拖入控制元件的邊界時發生。
3,DragLeave:在將物件拖出控制元件的邊界時發生。
4,DragOver:在將物件拖到控制元件的邊界上發生。
5,DoDragDrop:開始拖放操作。
6,GiveFeedback:在執行拖動操作期間發生。
7,QueryContinueDrag:在拖放操作期間發生,並且允許拖動源確定是否應取消拖放操作。

其中:

作用於拖拽發起方的是:

1,DoDragDrop
2,GiveFeedback
3,QueryContinueDrag

作用於拖拽接收方的是:

1,DragDrop
2,DragEnter
3,DragLeave
4,DragOver

(二)拖拽時上事件方法作用流程

上述7個事件的和方法的作用時機和流程如下,摘自MSDN:
(這裡不得不說,之前的離線版的MSDN是真好用,主要是翻譯的到位。現在的線上微軟Docs,大多都是機翻,差太多了。)

image

簡單的拖拽演示

在這裡,簡單寫一個演示程式,演示下上述各方法和事件具體的呼叫和實現。
演示程式的效果,就是拖動標籤(Label)到另一個標籤(Label)上,根據是否按著Shift、Ctrl等鍵,實現不同的效果。

1,設計介面

介面的設計如下,分別實現圖中對應的事件和屬性。

image

2,拖拽發起方

對於拖拽的發起方,要實現的便是:在滑鼠點選後,按著左鍵移動滑鼠到目標位置,並根據是否按著Shift、Ctrl等鍵,實現不同的效果。
所以,涉及到的事件有:MouseDown、MouseMove、MouseUp。
程式碼如下:

image

3,拖拽接收方

對於拖拽接收方,既然需要接收拖拽其上的資料,那麼就需要將屬性 AllowDrop 設定為 true,表示允許接收拖拽。
同時,還要實現DragEnter、DragDrop、DragDrop等事件,以在滑鼠拖動資料到控制元件上後,根據按鈕狀態,設定不同的效果,並對拖動的資料,進行進一步處理。
程式碼如下:

image

4,實際演示

執行程式,效果如下:

image


三、自定義拖拽時滑鼠效果

在這裡,我們來實現一個簡單的自定義拖拽效果:
拖動圖片到另一個控制元件上,在拖拽時,滑鼠變為圖片;同時,如果控制元件不允許接收圖片,則圖片變為半透明;如果允許接收圖片,則圖片變為不透明
下面我們來看一下如何去實現這種效果。

(一)實現原理

通過上面的MSDN,我們知道,在GiveFeedback,可以進一步的判斷拖放狀態效果,進而進行一定的處理。
而我們上面的效果,就要在GiveFeedback中去操作。
操作方式也很簡單,就是根據不同的拖放效果,改變不同的滑鼠即可,當然這裡的滑鼠是我們根據圖片實時生成的。

(二)開始實現

1,介面設計

介面的設計如下,分別實現圖中對應的事件和屬性。
這裡需要注意下,我們為窗體(Form)也設定了 AllowDrop=true,這是為了使拖動時劃過非目標控制元件時,也能響應變化。

image

2,拖拽發起方

此處和上文的實現原理是一樣的,涉及到的事件有:MouseDown、MouseMove、MouseUp。
程式碼如下:

image

3,拖拽接收方

此處和上文的實現原理是一樣的,要實現DragEnter、DragDrop、DragDrop等事件。
程式碼如下:

image

4,GiveFeedback實現滑鼠樣式切換

GiveFeedback,就是用來實現不同的拖拽效果的地方。
因為涉及到圖片的透明度處理,以及尺寸的調整,所以我們首先寫個方法去處理下圖片。

image

接著,在GiveFeedback中,針對不同的拖放狀態,設定不同的滑鼠。

image

4,實際演示

執行程式,效果如下:

image


四、原始碼下載

本篇文章演示程式的完整原始碼下載:

https://files.cnblogs.com/files/lesliexin/DragDropDemo.zip


五、總結

說實話,在拖拽時實現拖拽效果並不難,而且MSDN上自帶的例子也涉及到了滑鼠的切換,稍微轉換下思路,就可以實現多種多樣的拖拽效果。
不過話說回來,這種拖拽效果的實現邏輯和教程,反而很難在網上搜到,真是奇怪。
在系列後續,會去實現一些個性化的拖拽效果,以及去仿一些經典拖拽效果,如:Win10/Win11中開始選單的拖拽效果,網頁中的拖拽效果等等。還會分享下在實現這些效果時,所遇到的問題,以及解決經驗。

感謝觀看,歡迎大家評論指正。


-【END】-

相關文章