Drag and Drop

1. Drag and Drop (Not in the Textbook)

2. Objectives • You will be able to use drag and drop in your Windows Forms applications.

3. Drag and Drop Example • Simple example of drag and drop. • User will be able to drag an image from one picture box to another.

4. Getting Started • Create a new Windows Forms application. • Drag_Drop_Example • Put two picture boxes and a button on the form, as shown on the next slide. • Set BorderStyle • Set SizeMode to Zoom • Set the image for the left hand picture box but not for the right hand one. • http://www.cse.usf.edu/~turnerr/Software_Systems_Development/Downloads/USF_Bull_small.jpg

5. The Form

6. Set Properties • Picture Boxes: • Set BorderStyle • Set SizeMode to Zoom • Button • Enabled = False

7. Add Event Handler • Display the events for pbSource. • Create an event handler for the MouseDown event

8. Add Event Handler

9. MouseDown Event Handler private void pbSource_MouseDown(object sender, MouseEventArgs e) { pbSource.DoDragDrop(pbSource.Image, DragDropEffects.Move); }

10. Form Load Event Handler • Select the form and display its events. • Create an event handler for the Load event.

11. Form Load Event Handler

12. Form Load Event Handler private void Form1_Load(object sender, EventArgs e) { pbTarget.AllowDrop = true; }

13. More Event Handlers • Select pbTarget and display its events. • Create event handlers for DragEnter and DragDrop

14. More Event Handlers private void pbTarget_DragEnter(object sender, DragEventArgs e) { e.Effect = DragDropEffects.Move; } private void pbTarget_DragDrop(object sender, DragEventArgs e) { DataObject dataObject = (DataObject) e.Data; pbTarget.Image = (Image)dataObject.GetData(DataFormats.Bitmap); pbSource.Image = null; pbSource.Enabled = false; btnResetImage.Enabled = true; }

15. Button Click Handler • Double click on the Reset Image button to create a click event handler. private void btnResetImage_Click(object sender, EventArgs e) { pbSource.Image = pbTarget.Image; pbSource.Enabled = true; pbTarget.Image = null; btnResetImage.Enabled = false; } • Build and run

16. Program in Action Click on pbSource and drag to pbTarget

17. After Drag and Drop Click on Reset Image

18. Back to Original Form

19. Multiple Sources • Add another picture box, pbSource2. • Set its Image property. • http://www.cse.usf.edu/~turnerr/Software_Systems_Development/Downloads/Water_Lilies.jpg • Create a MouseDown event handler private void pbSource2_MouseDown(object sender, MouseEventArgs e) { pbSource.DoDragDrop(pbSource2.Image, DragDropEffects.Move); }

20. Remember the Source public partial class Form1 : Form { PictureBox source; .... private void pbSource_MouseDown(object sender, MouseEventArgs e) { source = pbSource; pbSource.DoDragDrop(pbSource.Image, DragDropEffects.Move); } private void pbSource2_MouseDown(object sender, MouseEventArgs e) { source = pbSource2; pbSource2.DoDragDrop(pbSource2.Image, DragDropEffects.Move); }

21. Prevent Another Drag private void pbTarget_DragDrop(object sender, DragEventArgs e) { DataObject dataObject = (DataObject) e.Data; pbTarget.Image = (Image)dataObject.GetData(DataFormats.Bitmap); btnResetImage.Enabled = true; source.Image = null; pbSource.Enabled = false; pbSource2.Enabled = false; }

22. Update Reset private void btnResetImage_Click(object sender, EventArgs e) { if (pbSource.Image == null) { pbSource.Image = pbTarget.Image; } else { pbSource2.Image = pbTarget.Image; } pbTarget.Image = null; pbSource.Enabled = true; pbSource2.Enabled = true; btnResetImage.Enabled = false; }

23. Multiple Sources in Action

24. Multiple Sources in Action

25. Multiple Targets • Add a second target, pbTarget2 • Add DragEnter and DragDrop event handlers.

27. Allow Drop in pbTarget2 private void Form1_Load(object sender, EventArgs e) { pbTarget.AllowDrop = true; pbTarget2.AllowDrop = true; }

28. pbTarget2 Event Handlers private void pbTarget2_DragEnter(object sender, DragEventArgs e) { e.Effect = DragDropEffects.Move; } private void pbTarget2_DragDrop(object sender, DragEventArgs e) { DataObject dataObject = (DataObject)e.Data; pbTarget2.Image = (Image)dataObject.GetData(DataFormats.Bitmap); source.Image = null; pbSource.Enabled = false; pbSource2.Enabled = false; btnResetImage.Enabled = true; }

29. Update Reset private void btnResetImage_Click(object sender, EventArgs e) { PictureBox current_target; if (pbTarget.Image != null) { current_target = pbTarget; } else { current_target = pbTarget2; } if (pbSource.Image == null) { pbSource.Image = current_target.Image; } else { pbSource2.Image = current_target.Image; } current_target.Image = null; pbSource.Enabled = true; pbSource2.Enabled = true; btnResetImage.Enabled = false; }

30. Initial Form

31. After Drag and Drop

32. After Reset Image End of Presentation

33. Assignment • Do this example for yourself • if you haven't done it in class. • Study and understand how to do drag and drop. • What properties to update on each event.