Question

In my C# program I have a Picturebox in which i want to show a stream of video (consecutive frames). I receive raw data, that I then transform into Bitmap or Image. I can show one image at a time without a problem (to reproduce the video stream).

Now my issue is that I want to merge 2 or more bitmaps (like layers) with the same size and alpha values (ARGB) and show it on the picturebox.

I have read lots of websites and posts here on SO, but many use the Graphics class, and I just can’t draw it on my application (very likely because i’m new to C#! and already have my program setup, so I didn’t want to change the structure).

What i need (to know):

1. How to overlay two or more Bitmaps with alpha values;
2. NO pixel manipulation please, can’t afford that cost in performance.

Thank you so much in advance!

NOTE: I think this question shouldn’t be marked (or closed) as duplicate, because everything i found in SO is done either with pixel manipulation or through the Graphics class. (but I might be wrong!)

EDIT: Possible workaround (NOT the solution to the question)
In
A PictureBox Problem, the 4th answer (from user comecme) tells me to have 2 picturebox, one on top of the other. The only (extra) thing I had to do to make it work with this approach was:

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

Where pictureBox2 will be the one on top.

I won’t consider this an answer to this problem, because I consider it a workaround (specially because having more than 10 pictureboxes doesn’t seem ideal! lol). That’s why I will leave this question opened waiting for a real answer to my question.

EDIT: Resolved! check my answer.

Answer 1

Here is the real answer to my problem.
1) Use a List<Bitmap> to store all the images you want to blend;
2) Create a new Bitmap to hold the final image;
3) Draw each image on top of the final image’s graphics using the using statement.

The code:

List<Bitmap> images = new List<Bitmap>();  
Bitmap finalImage = new Bitmap(640, 480);

...

//For each layer, I transform the data into a Bitmap (doesn't matter what kind of
//data, in this question) and add it to the images list
for (int i = 0; i < nLayers; ++i)
{
    Bitmap bitmap = new Bitmap(layerBitmapData[i]));
    images.Add(bitmap);
}

using (Graphics g = Graphics.FromImage(finalImage))
{
    //set background color
    g.Clear(Color.Black);

    //go through each image and draw it on the final image (Notice the offset; since I want to overlay the images i won't have any offset between the images in the finalImage)
    int offset = 0;
    foreach (Bitmap image in images)
    {
        g.DrawImage(image, new Rectangle(offset, 0, image.Width, image.Height));
    }   
}
//Draw the final image in the pictureBox
this.layersBox.Image = finalImage;
//In my case I clear the List because i run this in a cycle and the number of layers is not fixed 
images.Clear();

Credits go to Brandon Cannaday in this tech.pro webpage.