We Keep Coding

C# Layering transparent images

I'm fairly new to working with c#, so I am sure there is a way to accompish this, but I have been unable to find an answer that works.
I am making a simple game where you create a pizza (similar to dominoes interactive ordering system). The user selects the toppings from a list and they appear on the pizza image. I planned to simply change the visibility of the topping .pngs when the items are selected, however, the last .png to appear covers up all previous ones.
I have tried using picture boxes and panels.
When using picture boxes, only the top visible image shows. I have the .pngs backgrounds set to transparent, and while they do show the form's background color, they mask the other .pngs.
When I used the panels, I had problems with the upper images parenting with the lower ones, so if I changed the visibility of the bottom one, all ones above it were hid as well.
I appreciate any help and advice.

Mix images at runtime and add it to your picturebox:
Bitmap bmp = (Bitmap)Bitmap.FromFile("pizza.png"); //or get it from any other source
Bitmap bmp2 = (Bitmap)Bitmap.FromFile("over.png"); //or get it from any other source
Bitmap bmpdest = new Bitmap(bmp.Width, bmp.Height);
Graphics g = Graphics.FromImage(bmpdest);
g.DrawImage(bmp, new Point(0, 0));
g.DrawImage(bmp2, new Point(0, 0));
PictureBox1.Image = (Image)bmpdest;

DrawToBitmap returning blank image

I have a problem on creating bitmap image out of my winform application.
Situation:
I have a UserControl named as "CanvasControl" that accepts OnPaint method acting as canvas for my Draw Pad application. Inside this user control I have a function "PrintCanvas()" that will create a screenshot image of the UserControl into PNG file. Below is the PrintCanvas() function:
public void PrintCanvas(string filename = "sample.png")
{
Graphics g = this.CreateGraphics();
//new bitmap object to save the image
Bitmap bmp = new Bitmap(this.Width, this.Height);
//Drawing control to the bitmap
this.DrawToBitmap(bmp, new Rectangle(0, 0, this.Width, this.Height));
bmp.Save(Application.StartupPath +
#"\ExperimentFiles\Experiment1" + filename, ImageFormat.Png);
bmp.Dispose();
}
This user control (CanvasControl) is called out inside my main form where user will draw something and have an option to save afterwards using a save button. The save button will call out the "PrintCanvas()" function of the UserControl.
I get the output image file as expected, but the problem is it was a blank image.
What I have tried so far:
To test that it is not a syntax issue, I tried to transfer the PrintCanvas() function into my main form and surprisingly I get an image of the whole main form on file but the UserControl is not visible there.
Is there any other setup i missed out to make a winform UserControl printable?
UPDATE: (DRAWING ROUTINES)
User control acting as canvas - code here

The code in the question gave a first hint but the code in the link showed the source of the problem: You use a 'wrong' instance of the Graphics object for drawing:
protected override void OnPaint(PaintEventArgs e)
{
// If there is an image and it has a location,
// paint it when the Form is repainted.
Graphics graphics = this.CreateGraphics();
..
This is one of the most common mistakes with winforms graphics! Never use CreateGraphics ! You always should draw onto the control surface with the Graphics object in a Paint or DrawXXX event. These events have a parameter e.Graphics which is the only one that can draw persistent graphics.
Persistent means that it will always be refreshed when necessary, not just when you trigger it. This is a nasty error because everything seems to work until you come upon a situation when an outside event makes redrawing necessary:
Minimizing and then maximizing the form
Moving it off the screen and back again
Calling DrawToBitmap
...
Note that all will only really work if you use the valid and current Graphics object from the PaintEventArgs e parameter.
So, the solution is simple:
protected override void OnPaint(PaintEventArgs e)
{
// If there is an image and it has a location,
// paint it when the Form is repainted.
Graphics graphics = e.Graphics(); // << === !!
..
But what is the CreateGraphics good for? It is only good for luring newbies into that error??
Not quite; here are some uses for it:
Drawing non-persistent graphics like a rubber-band rectangle or a special mouse cursor
Measuring text sizes without actually drawing it with a TextRenderer or the MeasureString method
Querying the screen or Bitmap resolution with Graphics.DpiX/Y
and probably some others I can't think of at the moment..
So for normal drawing onto controls always use the e.Grapahics object! You can pass it on to subroutines to make the code more structured, but do not try to cache it; it needs to be current!

C# user control's background image

I have a custom control that I'm inheriting from Control. I need to display an icon so I'm using the available properties (BackgroundImage and BackgroundImageLayout).
I select an image and set the layout to None. However, I don#t want that the image is draw in the top-left corner of the control, but in another location that I specify.
Is this possible?

Try something like this inside your OnPaint();
Image myBackgroundImage = Image.FromFile("xyz.jpg");
e.Graphics.DrawImage(myBackgroundImage, myX, myY, new Rectangle(0, 0, myBackgroundImage.Width, myBackgroundImage.Height), GraphicsUnit.Pixel);
You're telling the Graphics object to draw your image at the specific location of myX and myY. The rectangle is the portion of the image to draw, in this case the whole image.

Draw offscreen portion of form to bitmap

I have a program that's goal is to digitally fill out a paper form, the users fill out the Windows form which takes all that data and fills in textboxes placed over a full size image of the form. My goal is to have it capture that entire form with all the values placed on it and store it as an image.
The problem is the form is to large for most screens and the bottom portion of it goes off-screen so when it's captured it's missing the bottom portion. I've tried screenshotting it and am currently using the follow code to draw it directly to a bitmap with no luck.
using (var bitmap = new Bitmap(this.Width, this.Height))
{
this.DrawToBitmap(bitmap, new Rectangle(0, 0, bitmap.Width, bitmap.Height));
bitmap.Save(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData) + "\\imagetest.jpeg");
}
I'm at a point I may consider another solution to fill out the form such as capturing the remaining portion and splicing it with the top but I feel like their must be a better way about it.
Any suggestions on capturing a form that's not drawn?

It sounds like you are trying to almost screen cap the filled out form values on top of the form as an image background? (Correct me if I'm wrong). That is not the best way to go about it, what you would want to do is have the user fill out all the required fields of the form and when they hit the submit button, save all of the form values as strings.
Then you would want to load the image of the form into memory in the form of a Bitmap object. Then just use the DrawString method to draw the strings from the form at the correct x,y coordinates on the image in memory.

Save Image in PictureBox with overlapping Controls

I am developing an application in which user can select an image in a picture box.
After that he can right click on the image and add a user control which will again display an Image along with some text. This user control can be added any number of times.
User can also re-position the user controls as per need.
All this functionality has been implemented and is working fine.
Now, the requirement is to save the Image along with the user control.
Above you can see the complete image which needs to be saved. Back image is the picture box image and the user control (small images with text).
When user will click on save button the image should get saved on his disk as a single image.
This is a windows application developed in C#.
I want to know that whether this functionality can be achieved or not. If yes, then please guide me in the right direction.

If you create a copy of the bitmap then with the Graphics.DrawImage() you can draw those images onto it. You need to calculate the position of those controls.
Look here for DrawImage: http://msdn.microsoft.com/en-us/library/42807xh1.aspx
example:
Bitmap copy = new Bitmap(OriginalBitmap);
Graphics g = Graphics.FromImage(copy);
g.DrawImage(arrowBitmap, new Point(..));
copy.Save(...);

A very simple and straight forward solution exists, has been thought of by Microsoft and includes these steps:
Instead of PictureBox use a Panel and instead of using the Image property of the PictureBox use the BackgroundImage property of the Panel
note: By using also the BackgroundImageLayout property you can quite easily instruct the Panel to stretch, center or zoom the image (I'm presuming the default value which is tile is not a good option in your case)
Instead of placing the other user controls at higher Z order but alongside the previous PictureBox place them inside the Panel
Use the Control.DrawToBitmap method like so:
private void button1_Click(object sender, EventArgs e) {
var bmp = new Bitmap(this.panel1.Width, this.panel1.Height);
this.panel1.DrawToBitmap(bmp, new Rectangle(Point.Empty, bmp.Size));
bmp.Save(#"D:\test.png", ImageFormat.Png);
}
That will result in your controls begin rendered along with the picture:
Furthermore, and if your scenario allows it, you could simply use the DrawToBitmap method with any control which contains all of the actors you wish to render, for instance the actual Form.