0

I am dragging a picturebox that has a background image in it onto another picturebox, and when it is dropped i will call a method that draws the image to the drop location. When it drags, it just shows the small square icon indicating that it can be dropped. How do i display the image in the picturebox being dragged?

user2602079
  • 1,283
  • 5
  • 20
  • 39
  • in fact you don't need `DoDragDrop` for this purpose, just some handling with `Mouse event` is OK. – King King Sep 18 '13 at 03:20
  • @justinls Yes i saw that, however that solution looks far too complex and too much code. Was hoping for something more simple. – user2602079 Sep 18 '13 at 03:23
  • @KingKing I'm intrigued in this solution. Can you expand on that idea, as i wouldn't know where to go from here? – user2602079 Sep 18 '13 at 03:24

1 Answers1

1

You can add 2 PictureBoxes which have the same Location, BackgroundImage, BackgroundImageLayout, Size. 1 PictureBox is for dragging, 1 PictureBox is fixed (in Size and Location during runtime). Everything is very simple. Here is the demo code for you:

public partial class Form1 : Form {
  public Form1(){
        InitializeComponent();
        draggingPic.Location = pictureBox2.Location;
        draggingPic.Size = pictureBox2.Size;
        draggingPic.Parent = this;          
        draggingPic.BackgroundImage = pictureBox2.BackgroundImage;
        draggingPic.BackgroundImageLayout = pictureBox2.BackgroundImageLayout;
        draggingPic.BorderStyle = pictureBox2.BorderStyle;
        draggingPic.BringToFront();//This is important, your draggingPic should be on Top
        //MouseDown event handler for draggingPic
        draggingPic.MouseDown += (s, e) => {
            downPoint = e.Location;
        };
        //MouseMove event handler for draggingPic
        draggingPic.MouseMove += (s, e) => {
            if(e.Button == MouseButtons.Left){
                draggingPic.Left += e.X - downPoint.X;
                draggingPic.Top += e.Y - downPoint.Y;
            }
        };
        //MouseUp event handler for draggingPic
        draggingPic.MouseUp += (s, e) => {                
            g.DrawImage(draggingPic.BackgroundImage, new Rectangle(pictureBox1.PointToClient(draggingPic.PointToScreen(Point.Empty)), draggingPic.Size));
            draggingPic.Location = pictureBox2.Location;
        };
        //Initialize bm 
        //your pictureBox1 should have fixed Size during runtime
        //Otherwise we have to recreate bm in a SizeChanged event handler
        bm = new Bitmap(pictureBox1.Width, pictureBox1.Height);
        pictureBox1.Image = bm;
        g = Graphics.FromImage(bm);
  }
  Bitmap bm;
  Graphics g;
  Point downPoint;
  PictureBox draggingPic = new PictureBox();
}

Initial look:

enter image description here

When dragging:

enter image description here

After some drag-drops:

enter image description here

King King
  • 61,710
  • 16
  • 105
  • 130
  • Great thanks. So draggingPic is of type PictureBox? – user2602079 Sep 18 '13 at 05:39
  • Do we have 3 picture boxes here? – user2602079 Sep 18 '13 at 05:42
  • @user2602079 yes, 2 small ones (have the same `Size, Location,...`) and the large 1 is for displaying all the `dropped images`. – King King Sep 18 '13 at 05:43
  • Great. So we initialise draggingPic in code. Probably right there below initializeComponent()? type PictureBox draggingPic = new PictureBox();. And that is enough of an initialisation, we do not have to specify any attributes as they are all specified in your code there? – user2602079 Sep 18 '13 at 05:45
  • I declared downPoint like this `Point downPoint;` but it now still says Use of unassigned local variable regarding downPoint – user2602079 Sep 18 '13 at 06:07
  • @user2602079 `downPoint` is declared in the `class scope`, please see my code carefully, if you declare it in `Form1()` constructor scope, you have to initialize it with `Point.Empty`. And yes, all the code for `draggingPic` is there (You don't have to drag and drop it), you just need to drag-n-drop the `pictureBox1` and `pictureBox2`. – King King Sep 18 '13 at 06:10
  • Thanks, by drag n drop pbx1 and pbx2, do you mean adding drag and drop code? That will be fine if so. I had actually commented it out. should i not? – user2602079 Sep 18 '13 at 06:15
  • @user2602079 No, I mean you add them to your form by `dragging and dropping from the toolbox`, then you don't need any more code. You may want to select them and change the `BorderStyle` via `Properties window`. Remember that the `pictureBox1` is the large one and `pictureBox2` is the small one. All the code is posted above for you. – King King Sep 18 '13 at 06:18
  • Yep. Sorry for all these comments when your answer is correct, but my draggingPic is higher up than my pbx2 – user2602079 Sep 18 '13 at 06:22
  • Also, my dragging pic is not transparent, but the image used for its background is transparent. – user2602079 Sep 18 '13 at 06:24
  • @user2602079 You have to use a `real transparent background` image for it, I doubt that its image background is **not** transparent. – King King Sep 18 '13 at 06:32
  • It is. I deleted the background. I have drawn the image to my pbx1 previously and the background does not show. – user2602079 Sep 18 '13 at 06:33
  • @user2602079 Ah, I understand your want now, you want when you drag the `draggingPic`, the Image should be `transparent` too, that's not possible in `winforms`, sorry, if we try to do that, the **achieved effect** is not very well. – King King Sep 18 '13 at 06:40
  • Yeah just the background should be transparent, so you see the picture but not the square it is in. That's okay. Thanks for your help. One last thing. Could you tell me what => means? – user2602079 Sep 18 '13 at 06:45
  • @user2602079 that's called `lambda expression`, you should search for more on `lambda expression`, **it's used frequently in C# since version 3.5** – King King Sep 18 '13 at 06:48