Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi!

I created a few PNGs in photoshop and uploaded them to my windows form. I want to place one picture over the other to create a picture with multiple layers. I'm making a super simple pizza maker program so when you select a box with a topping selection the topping appears onto of the base of the pizza.

For some reason though I can't get the transparency to work. When I set the background color of each picturebox to transparent it "works" by just taking the forms background color (if i didnt have multiple layers this would be fine) but when I try and put each image on top of each other it doest work and each topping image has a box around it matching the background color!

I also tried setting it manually like below but no luck! PLEASE HELP!!

p.s I am new and very beginner at Visual Studio so please go easy on me!

What I have tried:

public Pizza_Form()
{
InitializeComponent();
pizzabase.BackColor = Color.Transparent;
pepperoni.BackColor = Color.Transparent;
spinach.BackColor = Color.Transparent;
pineapple.BackColor = Color.Transparent;
}
Posted
Updated 14-Sep-22 20:56pm
Comments
Sergey Alexandrovich Kryukov 15-May-16 19:45pm    
Transparency support for System.Windows.Forms.Control is... well, not something you can rely on.
Please explain what exactly you want to achieve; most likely, I'll help you.
You have to understand that "transparency" is just a metaphor; effectively, all pixels just have it's values, that's all. In other word, "transparency" is something which allows to see some graphics behind some layer. If there is no a background layer, the concept of "transparency" makes no sense. If you explain how exactly you want to render what, logically, the problem will be solved.
—SA
Member 12525162 15-May-16 20:07pm    
Hi, thank you for responding so quickly. I have pepperoni, pineapple and spinach as "toppings". I created each topping image in photoshop as a png without background, so when they are placed on top of each other ontop of a pizza base in the windows form they create a full image. On the form I want there to be the pizza base image which is the crust and cheese, and then when someone clicks a box selecting their toppings, for the individual topping to show up - so the essentially in your terms when say the pepperoni topping image is shown, the "background pixels" would be the pizza base and whatever other toppings was selected before, if any.

I successfully put the pepperoni on the pizza base by making the pepperoni image's parent the pizza base image. Now my problem is, how do i make the pizza base image a parent to multiple differant images?

What i have right now is:

public Pizza_Form()
{
InitializeComponent();
pizzabase.Controls.Add(pepperoni);
pepperoni.Location = new Point(0, 0);
pepperoni.BackColor = Color.Transparent;

pizzabase.Controls.Add(spinach);
spinach.Location = new Point(0, 0);
spinach.BackColor = Color.Transparent;

pizzabase.Controls.Add(pineapple);
pineapple.Location = new Point(0, 0);
pineapple.BackColor = Color.Transparent;

}

but it is only working to show the pepperoni, not the other toppings.
Thank you!
Sergey Alexandrovich Kryukov 15-May-16 20:09pm    
You made it clearer, thank you, but before you did, I realized that I probably could understand that from your original description. So, please see my Solution 1.
—SA
Member 12525162 15-May-16 20:15pm    
Ok thank you so much! It makes more sense now, I still have a question though. I did create the PNG files with the background pixels as transparent, so is there another way to put an image in my windows form without using Picturebox? That may be a really stupid question!! Also about the quality and stuff, I dont mind at all, its meant to be a very very basic program so that doesnt matter to me! I just want to show each image :)
Sergey Alexandrovich Kryukov 15-May-16 21:24pm    
This is explained in my answer, please see referenced past answers. You do it in OnPaint method of your own control... In this method, you use the instance of Graphics (passed in evenArgs parameter) and use its DrawImage methods...
—SA

Please see my comment to the question. Probably, I actually can understand what you want to achieve.

The solution, in its basic form, is extremely easy. The problem is: you are using such thing as PictureBox. By some reason, this near-useless control also became the most misused control in Forms. It was designed just to do the simplest work: showing static images. But a lot of misunderstanding created an impression that the sole purpose of this control is to block the attempts to solve the problems like yours. As soon as some try to superimpose some graphical elements, introduce some motion or interactive behavior, this control, instead of helping, starts adding most ridiculous hassles. At the same time, all such problems are solved very quickly when you do simple thing: get rid of this control.

How? Please see my past answers:
Append a picture within picturebox[^],
How do I clear a panel from old drawing[^],
draw a rectangle in C#[^].

More answers on graphics rendering:
What kind of playful method is Paint? (DataGridViewImageCell.Paint(...))[^],
capture the drawing on a panel[^],
Drawing Lines between mdi child forms[^].

Now, back to your case. Now you know how to render graphics. Your layers are created in a simple way: you first render the lower layer, and then top layer. To avoid flicker, use optimized double buffering. Here is the key: when you create a PNG for a topping element, you have to use "transparent" pixels in the parts where the background is shown. Every non-nonsense graphics editor can do it (even Photoshop :-)). Forget control BackColor; this is totally irrelevant.

Now, why did I say in its basic form. Because doing this trick in a quality way is very difficult, on the level we discuss — just impossible. Every experience expert or artist will spot the fake in no time. Only very detailed 3D modeling can achieve high-quality results, but this is extremely expensive technology. I can give you an idea why.

When you photograph some olives on white plate, or brown cutting board, the background will leave color reflexes on each olive fruit, and each olive fruit will leave color reflexes on the plate/board, where there will be also the reflexes from some surrounding objects. When you cut out (make transparent) some background pixels, you will create visible pixellation. In original image, each pixel carries colors from both background and foreground and smooths pixels, but you will destroy it. If you use fuzzy selection to smooth it, you will let some background colors on the boundary pixels. And, no matter what you do, background reflexes will be visible on each fruit. And then you move it to the pizza background, "foreign" to the background used in original image. Forget about photo-realistic image.

Let's hope that hungry pizza eaters won't care too much when they order pizza. :-)

—SA
 
Share this answer
 
It's all about the quality , try to release your image from photoshop as a transparent image then use it.
 
Share this answer
 
set this in your form_load()

picturename.Parent= pictureBox1;
picturename.BackColor = Color.Transparent;
 
Share this answer
 
Comments
Dave Kreskowiak 15-Sep-22 8:37am    
Yeah, about this... Transparent does NOT make any control transparent. It just tells the control to take on the background properties of the control that contains the control you're setting as Transparent.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900