Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Implement Drag and Drop in Your Windows Forms Applications : Page 4

Find out how to empower your users by supporting drag and drop features in your Windows Forms applications.


advertisement
Handling Different Data Types
In the DragEnter event you already created, add the line shown below in bold. The GetFormats() method returns the type of data that is passed into the event:

Private Sub PictureBox1_DragEnter( _ ByVal sender As Object, _ ByVal e As System.Windows.Forms.DragEventArgs) _ Handles PictureBox1.DragEnter <b>Dim formats As String() = e.Data.GetFormats</b> '---if the data to be dropped is an image format--- If (e.Data.GetDataPresent(DataFormats.Bitmap)) Then ...

Set a breakpoint after the line you just added so you can observe the type of data being passed into the event. Press F5 to debug the application and drop an image from Word onto the PictureBox control. Figure 6 shows the data type of the image dragged and dropped from Word.

 
Figure 6. Examining the Data Type of an Image Dropped from Word.
 
Figure 7. Examining the Data Type of an Image Dropped from WordPad.

So, now you can see that one of the possible formats is bitmap; therefore you can safely convert the data into a bitmap image and display it in the PictureBox control. In contrast, if you drag and drop an image from WordPad, the corresponding image type is shown in Figure 7.

This time round, the control does not pass the image data in the bitmap format. Instead, it passes Rich Text Format (RTF).

So, to enable the PictureBox control to accept images dragged and dropped from WordPad, you need to modify the DragEnter event to accept RTF as well as bitmaps:

Private Sub PictureBox1_DragEnter( _ ByVal sender As Object, _ ByVal e As System.Windows.Forms. _ DragEventArgs) _ Handles PictureBox1.DragEnter Dim formats As String() = e.Data.GetFormats '---if the data to be dropped is an image format--- If (e.Data.GetDataPresent(DataFormats.Bitmap)) Then '---determine if this is a copy or move--- If (e.KeyState And CtrlMask) = CtrlMask Then e.Effect = DragDropEffects.Copy Else e.Effect = DragDropEffects.Move End If '---change the border style of the control--- PictureBox1.BorderStyle = BorderStyle.Fixed3D ElseIf (e.Data.GetDataPresent(DataFormats.Rtf)) Then '---determine if this is a copy or move--- If (e.KeyState And CtrlMask) = CtrlMask Then e.Effect = DragDropEffects.Copy Else e.Effect = DragDropEffects.Move End If '---change the border style of the control--- PictureBox1.BorderStyle = BorderStyle.Fixed3D End If End Sub

In addition, you also need to modify the DragDrop event so that you can write your custom code to deal with the particular data format:



Private Sub PictureBox1_DragDrop( _ ByVal sender As Object, _ ByVal e As System.Windows.Forms. _ DragEventArgs) _ Handles PictureBox1.DragDrop '---if the data to be dropped is a image format--- If (e.Data.GetDataPresent(DataFormats.Bitmap)) Then '---set the control to display ' the text being dropped--- PictureBox1.Image = e.Data.GetData( _ DataFormats.Bitmap) ElseIf (e.Data.GetDataPresent(DataFormats.Rtf)) Then '---display the rich text--- Console.WriteLine( _ e.Data.GetData(DataFormats.Rtf)) End If '---set the borderstyle back to its original--- PictureBox1.BorderStyle = BorderStyle.FixedSingle End Sub

 
Figure 8. Printing the RTF Content.
Unfortunately, the preceding code simply writes the data of the image (as RTF) to the console window (see Figure 8). To display the actual image in the PictureBox control, you would have to write your own code to extract the image data.

Move versus Copy
The previous example showed how you can copy or move an image from the PictureBox control. In a typical move operation, after copying the image to another control/location, you need to remove the original image. So how do you know when a drop operation has completed? The answer lies in the QueryContinueDrag event.

Add another PictureBox control to Form1 so that Form1 now looks like Figure 9. Using that, you can follow this demonstration showing how to move an image (by drag and drop) from PictureBox1 to PictureBox2.

 
Figure 9. Two PictureBox Controls on Form1.
Configure PictureBox2 in the Form1_Load event as follows:

Private Sub Form1_Load( _ ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles MyBase.Load '---set the control to allow drop--- TextBox1.AllowDrop = True '---set the control to allow drop--- With PictureBox1 .AllowDrop = True .BorderStyle = BorderStyle.FixedSingle .SizeMode = PictureBoxSizeMode.StretchImage End With '---set the control to allow drop--- With PictureBox2 .AllowDrop = True .BorderStyle = BorderStyle.FixedSingle .SizeMode = PictureBoxSizeMode.StretchImage End With ...

Add the code shown in Listing 1 to PictureBox2 to support dropping.

For a move operation, you need to remove the image in PictureBox1 after the user has moved it to PictureBox2. To do this, you need to service the QueryContinueDrag event of PictureBox1. The control fires this event after you drag and drop an image from PictureBox1. In that event code, you can determine whether the operation is a move, and if it is, delete the image from PictureBox1:

Private Sub PictureBox1_QueryContinueDrag( _ ByVal sender As Object, _ ByVal e As _ System.Windows.Forms.QueryContinueDragEventArgs) _ Handles PictureBox1.QueryContinueDrag If e.Action = DragAction.Drop Then If (e.KeyState And CtrlMask) <> CtrlMask Then '---a move operation--- PictureBox1.Image = Nothing End If End If End Sub

You can now test the code. Press F5 in Visual Studio 2005 and then drag and drop an image onto PictureBox1. Next, drag the image that's now in PictureBox1 and drop it onto PictureBox2. Notice that the image in PictureBox1 is now gone. If you instead perform a copy operation (by holding down the CTRL key) while dragging the image from PictureBox1 to PictureBox2; the code that services the QueryContinueDrag event merely copies the image and does not remove it.

Note that using the QueryContinueDrag event to remove an item that a user has moved is not a foolproof method. If you abort the move operation (such as dropping the image outside PictureBox2), the control will still remove the picture. In other words, using the QueryContinueDrag event, you have no idea where the user moved (or dropped) the item, or whether the user aborted the operation.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date