I am developing an application aimed at children with disabilities, so I need to make it simple and offer a lot of visual feedback. I am using Visual Basic .NET (2013), and most of the examples I find are for older versions of VB, mainly VB6.
Either way, the main feature I am dealing with right is the drag and drop operation on images. I have never done this before, so I am working on a test Windows Forms Application, with two picture boxes: one is the drop target, and the other is the drag source.
Issue 1) So far, I have managed to make the source picture box reposition itself wherever the cursor goes when the drag operation takes place. The movement is not smooth, and you can only see the picture box in the new position once you release the mouse button. If possible, I'd like it to give the child user more feedback on what he/she is doing, so that means making the source picture box reposition itself even while the mouse button is being held, so long as the picture is being dragged around.
Issue 2) When the source picture box is being dragged, as I drag the cursor over controls that are not drop targets, I get a black "No" cursor. How can I change this cursor or even hide it? I've tried changing the cursor on the GiveFeedback and other drag-drop related event handlers, but nothing seems to work for that particular moment. Here is a screenshot to illustrate what I am saying:
Either way, the idea is to make this application feel as smooth, friendly and expressive as possible or necessary for children with PDD (for instance, autism), who probably cannot read and therefore rely on visual and audible feedback. There will be dragging pictures around the form to create sentences (look into PECS, if you want to learn more).
Here is my drag and drop code so far (pardon the mess):
Public Class frmDragDropExample
Private mouseIsDown As Boolean = False ' Use this variable as a flag to indicate when the mouse is down
Private Offset As Point 'Use this to set the offset position, to move the picture being dragged
Private Sub frmDragDropExample_Load(sender As Object, e As EventArgs) Handles MyBase.Load
' Declare this picture box as the target of the drag-and-drop operation
dragDropTargetPictureBox.AllowDrop = True
End Sub
Private Sub dragDropSourcePictureBox_GiveFeedback(sender As Object, e As GiveFeedbackEventArgs) Handles dragDropSourcePictureBox.GiveFeedback
' Nothing here yet!
End Sub
Private Sub sourcePictureBox_MouseDown(sender As Object, e As MouseEventArgs) Handles dragDropSourcePictureBox.MouseDown
' Indicate that the mouse is down
mouseIsDown = True
Cursor.Current = Cursors.Hand
' Set the offset values to move the picture being dragged
Offset.X = MousePosition.X - sender.Left
Offset.Y = MousePosition.Y - sender.Top
End Sub
Private Sub sourcePictureBox_MouseMove(sender As Object, e As MouseEventArgs) Handles dragDropSourcePictureBox.MouseMove
If mouseIsDown Then
' Initiate the dragging.
dragDropSourcePictureBox.DoDragDrop(dragDropSourcePictureBox.Image, DragDropEffects.Move)
' Move the object along with the cursor for more feedback (the user should tell that the object is being moved around)
sender.Left = MousePosition.X - Offset.X
sender.Top = MousePosition.Y - Offset.Y
End If
' Otherwise... mouse is down.
mouseIsDown = False
End Sub
Private Sub targetPictureBox_DragDrop(sender As Object, e As DragEventArgs) Handles dragDropTargetPictureBox.DragDrop
' Paste the picture.
dragDropTargetPictureBox.Image = e.Data.GetData(DataFormats.Bitmap)
' Play a sound as feedback (the picture has been moved!).
My.Computer.Audio.Play(My.Resources.sfx_paper_flip_01, AudioPlayMode.Background)
' Also color the target pictue box white again, as feedback
dragDropTargetPictureBox.BackColor = Color.White
' Dispose of the picture (should handle garbage collection, too --so many pictures!)
dragDropSourcePictureBox.Dispose()
End Sub
Private Sub targetPictureBox_DragEnter(sender As Object, e As DragEventArgs) Handles dragDropTargetPictureBox.DragEnter
' Check the format of the data being dropped --it should be a bitmap/image
If (e.Data.GetDataPresent(DataFormats.Bitmap)) Then
' Color the target picture box for feedback
dragDropTargetPictureBox.BackColor = Color.LightGray
' Display the move cursor.
e.Effect = DragDropEffects.Move
Else
' Display the no-drop cursor.
e.Effect = DragDropEffects.None
End If
End Sub
Private Sub dragDropTargetPictureBox_DragLeave(sender As Object, e As EventArgs) H
andles dragDropTargetPictureBox.DragLeave
dragDropTargetPictureBox.BackColor = Color.White
End Sub
End Class
Thank you in advance!