Transparency Problem by Overlapped PictureBox's at C#

Question

Hi to all,

I'm displaying in a panel pictureboxs overlapped, because each picturebox is used as a layer. First time a picturebox is defined and added to panel its backgroundcolor is transparent, and its images are empty.

The problem is, the bottom layer can not be seen, the transparent image, shows the panel's ground. Excepted is that the bottom pictureBox's image is seen.

I have tried to it with other controls like label. The problem could not be solved :(

Thanks.

Answer 1

This is because, if I remember correctly, setting a background color of Transparent (its actual value is null, right?) isn't really transparent. What Windows does is it looks at the control's parent container's background color and sets the controls background color to that.

You can see this happen especially with panels. Without contents, panels set to Transparent should let you see behind them, right? Wrong. If you put a panel on top of a bunch of, say, textbox controls and set the panel to Transparent, you won't be able to see the textboxes behind it.

Instead, to get real transparency, you have to overload OnPaintBackground for the control in question and, essentially, do absolutely nothing (DONT'T call the base.OnPainBackground either!)... There's more to it than that, probably, but here is an example of a working TransparentPanel control we use here:

public class TransparentPanel : System.Windows.Forms.Panel
{
    [Browsable(false)]
    protected override CreateParams CreateParams
    {
        get
        {
            CreateParams cp = base.CreateParams;
            cp.ExStyle |= 0x20;
            return cp;
        }
    }
    protected override void OnPaintBackground(PaintEventArgs e)
    {
        // Do Nothing
    }
}

We've used this class successfully to create truly transparent panels in past Windows Forms apps. We used it as a hack to fix the "right-click context menu appears on top of button controls" problem.

Answer 2

This is my take on it:

class TransPictureBox : Control
{
    private Image _image = null;

    public Image Image
    {
        get
        {
            return _image;
        }
        set
        {
            _image = value;
        }
    }
    public TransPictureBox()
    {
    }

    protected override void OnPaintBackground(PaintEventArgs pevent)
    {
    }

    protected override void OnPaint(PaintEventArgs pe)
    {
        if(Image != null)
            pe.Graphics.DrawImage(Image, 0, 0);
    }
    protected override CreateParams CreateParams
    {
        get
        {
            CreateParams cp = base.CreateParams;
            cp.ExStyle |= 0x20;
            return cp;
        }
    }
}

You should add some more logic for positioning the image as you wish and edit the OnPaint method accordingly.

Answer 3

You should do

pe.Graphics.DrawImage(Image, 0, 0, Image.Width, Image.Height);

so your Image won't be streched