[ACCEPTED]-A PictureBox Problem-picturebox

Accepted answer
Score: 10

Make sure the image in pictureBox3 is transparent. Set 20 the BackColor to transparent. In code, set the Parent property 19 of the pictureBox3 to be pictureBox2. Adjust the Location coordinates 18 of pictureBox3 since they will be relative to the coordinates 17 of pictureBox2 once you've changed the Parent.

    private void Form1_Load(object sender, EventArgs e)
    {
        pictureBox3.Parent = pictureBox2;
        pictureBox3.Location =
            new Point(
                pictureBox3.Location.X
                - pictureBox2.Location.X,
                pictureBox3.Location.Y
                - pictureBox2.Location.Y);

    }

In designer 16 you will not see the transparency, but at 15 runtime you will.

Update

In the image, the left 14 side shows the designer view, the right 13 side is the runtime version. Left: Designer view, Right: How it looks at runtime

Another update

I really don't 12 understand how it would be possible that 11 this doesn't work for you. I suppose there 10 must be something we are doing different. I'll 9 describe the exact steps to take to create 8 a working sample. If you follow the exact 7 same steps, I wonder if we'll get the same 6 results or not. Next steps describe what 5 to do and use two images I found on the 4 net.

  • Using Visual Studio 2008, create a New Project using template Windows Forms Application. Make sure the project is targeted at the .NET Framework 3.5.
  • Set the Size of the Form to 457;483.
  • Drag a PictureBox control onto the form. Set its Location to 0;0 and its Size to 449;449.
  • Click the ellipsis besides its Image property, click the Import... button and import the image at http://a.dryicons.com/files/graphics_previews/retro_blue_background.jpg (just type the URL in the File name text box and click Open). Then click OK to use the image.
  • Drag another PictureBox onto the form, set its Location to 0;0 and its Size to 256;256. Also set its BackColor property to Transparent.
  • Using the same method as described above, import image http://www.axdn.com/redist/axiw_i.png which is a transparent image.
  • Now place the following code in the 3 form's OnLoad event handler:

    private void Form1_Load(object sender, EventArgs e)
    {
        pictureBox2.Parent = pictureBox1;
    }
    

That's it! If 2 I run this program I get a transparent image 1 on top of another image.

Score: 7

I'll add another example that according 8 to the updated requirement allows for moving 7 image3.
To get it working, put an image 6 with transparency in Resources\transp.png
This uses the same 5 image for all three images, but you can 4 simply replace transparentImg for image1 3 and image2 to suitable images.

Once the demo 2 is started the middle image can be dragged-dropped 1 around the form.

public partial class Form1 : Form
{
    private readonly Image transparentImg; // The transparent image
    private bool isMoving = false;         // true while dragging the image
    private Point movingPicturePosition = new Point(80, 20);   // the position of the moving image
    private Point offset;   // mouse position inside the moving image while dragging
    public Form1()
    {
        InitializeComponent();

        // 
        // pictureBox1
        // 
        this.pictureBox1.Location = new System.Drawing.Point(0, 0);
        this.pictureBox1.Name = "pictureBox1";
        this.pictureBox1.Size = new System.Drawing.Size(231, 235);
        this.pictureBox1.TabIndex = 0;
        this.pictureBox1.TabStop = false;
        this.pictureBox1.Paint += new System.Windows.Forms.PaintEventHandler(this.pictureBox1_Paint);
        this.pictureBox1.MouseDown += new System.Windows.Forms.MouseEventHandler(this.pictureBox1_MouseDown);
        this.pictureBox1.MouseMove += new System.Windows.Forms.MouseEventHandler(this.pictureBox1_MouseMove);
        this.pictureBox1.MouseUp += new System.Windows.Forms.MouseEventHandler(this.pictureBox1_MouseUp);
        this.Controls.Add(this.pictureBox1);
        transparentImg = Image.FromFile("..\\..\\Resources\\transp.png");
    }

    private void pictureBox1_Paint(object sender, PaintEventArgs e)
    {
        var g = e.Graphics;
        g.DrawImageUnscaled(transparentImg, new Point(20, 20));      // image1
        g.DrawImageUnscaled(transparentImg, new Point(140, 20));     // image2
        g.DrawImageUnscaled(transparentImg, movingPicturePosition);  // image3
    }

    private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
    {
        var r = new Rectangle(movingPicturePosition, transparentImg.Size);
        if (r.Contains(e.Location))
        {
            isMoving = true;
            offset = new Point(movingPicturePosition.X - e.X, movingPicturePosition.Y - e.Y);
        }
    }

    private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
    {
        if (isMoving)
        {
            movingPicturePosition = e.Location;
            movingPicturePosition.Offset(offset);
            pictureBox1.Invalidate();
        }
    }

    private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
    {
        isMoving = false;
    }
}
Score: 3

This code will do the trick:

using (Graphics g = Graphics.FromImage(pictureBox1.Image))
{
    g.DrawImage(pictureBox2.Image, 
        (int)((pictureBox1.Image.Width - pictureBox2.Image.Width) / 2),
        (int)((pictureBox1.Image.Height - pictureBox2.Image.Height) / 2));
    g.Save();
    pictureBox1.Refresh();
}

It will draw 2 the image from pictureBox2 on the existing 1 image of pictureBox1.

Score: 2

For starters, set the BackColor property of PictureBox3 10 to Transparent. This should work in almost 9 all cases.

You should also use an image with 8 a transparent background instead of white 7 so you do not have the white borders around 6 your purple circle. (Recommended image format: PNG)


Update
Following 5 the replies I got, it appears setting the 4 BackColor to Transparent doesn't work. In that case, it's 3 best you handle the Paint event of the PictureBox 2 and do the painting of the new image yourself 1 as Albin suggested.

Score: 0

You might do some hack by overriding OnPaint 4 and stuff, example here.

But I'd recommend to 3 merge the pictures in pictureBox2 and 3 2 into a single image before displaying them 1 in a single pictureBox.

More Related questions