Transparent background showing up black - c#

I'm trying to make an image appear on top of another and still show the image underneath via a transparent background. I've got it so the new image appears on top of the other however setting BackColor to Color.Transparent just results in a black background.
Full Code:
public partial class frm_airportApplication : Form
{
PictureBox PicBox;
public frm_airportApplication()
{
InitializeComponent();
}
protected override CreateParams CreateParams
{
get
{
CreateParams cp = base.CreateParams;
cp.ExStyle |= 0x000000200;
return cp;
}
}
private void button1_Click(object sender, EventArgs e)
{
AllowTransparency = true;
plane p = new plane();
p.getPB().Parent = pb_airport;
this.Controls.Add(p.getPB());
this.Update();
}
protected void InvalidateEx()
{
if (Parent == null)
return;
Rectangle rc = new Rectangle(this.Location, this.Size);
Parent.Invalidate(rc, true);
}
protected override void OnPaintBackground(PaintEventArgs pevent)
{
//do not allow the background to be painted
}
private void button2_Click(object sender, EventArgs e)
{
AllowTransparency = true;
ResourceManager resourceManager = new ResourceManager("Airport_Application.Properties.Resources", GetType().Assembly);
PicBox = new PictureBox();
PicBox.BackColor = Color.Transparent;
PicBox.Image = (Bitmap)resourceManager.GetObject("plane_icon");
PicBox.Top = 100;
PicBox.Width = 120;
PicBox.Height = 120;
PicBox.Left = 10;
PicBox.SizeMode = PictureBoxSizeMode.Zoom;
PicBox.Parent = pb_airport;
Controls.Add(PicBox);
PicBox.BringToFront();
}
}
public class plane
{
PictureBox pb;
Bitmap image;
ResourceManager resourceManager;
public plane()
{
resourceManager = new ResourceManager("Airport_Application.Properties.Resources", GetType().Assembly);
image=(Bitmap)resourceManager.GetObject("plane_icon");
pb = new PictureBox();
pb.Image = image;
pb.Top = 500;
pb.Width = 100;
pb.Height = 100;
pb.Left = 50;
pb.SizeMode = PictureBoxSizeMode.Zoom;
pb.BackColor = Color.Transparent;
}
public PictureBox getPB()
{
return pb;
}
}
I've found a lot of people who have had similar issues but none of the solutions helped.

It has been awhile but I think you have to set your form to Allow Tranparencies
this.AllowTransparency = true;
or
YourForm.AllowTransparency = true;
that would get rid of the black

I had the same issue but I had just a Panel which should've been transparent so I could see everything underneath it.
The problem was with DoubleBuffered property, it should be set to false.
this.DoubleBuffered = false;
No blackness anymore.

You can create an irregularly shaped form easily by setting its "Region" property. Here's an example:
Irregularly shaped form
As for truly transparent Controls, here's an excellent resource with step-by-step instructions:
Transparent Controls

In simple words, you cannot easily achieve transparency using the default PictureBox control in Windows Forms.
Either you switch to WPF, which by default supports transparency in every bits, or you use a custom control. Once I created such a control called AppIcon, but it is released under GPL, not commercial friendly,
http://mymobilepack.codeplex.com/SourceControl/changeset/view/39314#512415

For forms you can try this:
this.BackColor = System.Drawing.Color.XXX;
this.TransparencyKey = System.Drawing.Color.XXX;
You can try to solve it on the bitmap level:
Make a image in bitmap format and make the backgroundcolor transparant with this method:
bm.MakeTransparent(Color.XXX);
I seemed to solve a similar problem with my splashscreen bij setting a timer every 100ms,
and call DoEvents in it:
private void timer1_Tick(object sender, EventArgs e)
{
//BringToFront();
Application.DoEvents();
}
Hope this helps

If you want to overlay images over images (and not images over form), this would make the trick:
overImage.Parent = backImage;
overImage.BackColor = Color.Transparent;
overImage.Location = thePointRelativeToTheBackImage;
Where overImage and backImage are PictureBox with png (with transparent background).

Related

How to Bring the Border of a Picturebox to Front?

I am making a border around a picture box by simply drawing a rectangle around it. However since there is a panel behind the picturebox, I cannot see the border around the picturebox (despite the fact that I have drawn the border around the picture. Here's the code:
private void Form1_Load(object sender, EventArgs e)
{
this.WindowState = FormWindowState.Maximized;
Graphics objGraphics = null;
objGraphics = this.CreateGraphics();
objGraphics.Clear(SystemColors.Control);
objGraphics.DrawRectangle(Pens.Blue,
ileriresmi.Left - 1, ileriresmi.Top - 1,
ileriresmi.Width + 1, ileriresmi.Height + 1);
objGraphics.Dispose();
}
you may try this..but it will draw inside the picture box
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawRectangle(new Pen(Color.Red, 2f),0,0,pictureBox1.Size.Width-2, pictureBox1.Size.Height-2);
}
Complete solution will be like this.
add this class into your application and build application.
public class PicExt : PictureBox
{
private Color _borderColor;
private int _borderWidth;
[Browsable(true)]
public Color BorderColor {
get { return _borderColor; }
set { _borderColor = value; this.Invalidate(); }
}
[Browsable(true)]
public int BorderWidth {
get { return _borderWidth; }
set { _borderWidth = value; this.Invalidate(); }
}
public PicExt()
{
_borderColor = Color.Red;
_borderWidth = 3;
}
protected override void OnPaint(PaintEventArgs pe)
{
base.OnPaint(pe);
pe.Graphics.DrawRectangle(new Pen(BorderColor, BorderWidth), BorderWidth, BorderWidth, this.Size.Width - (BorderWidth*2), this.Size.Height - (BorderWidth*2));
}
}
after building application you will see new control "PicExt" in your toolbox.
replace pictureBox with PicExt Control
and subscribe the click event like this.
private void button1_Click(object sender, EventArgs e)
{
//set the color here
picExt1.BorderColor = Color.Red;
//and frame width
picExt1.BorderWidth = 5;
}
it should work like exactly you want.
There are a couple things wrong here. First, you're doing your drawing on the form, which is covered by the panel you mention, and second, you're only drawing the border once, in the Load event, rather than every time the form receives a WM_PAINT message.
See here for an explanation of why the latter is wrong.
As for getting the border drawn in the right place, why not just set the BackColor of the panel that holds the PictureBox to Color.Blue and give that panel a nonzero value for Padding? (Or, if the panel contains other controls, add an intermediate panel just for the border.)

How to make picturebox transparent?

I am making an application in C# .NET. I have 8 picture boxes in it. I used PNG images with transparent background but in my form it is not transparent when it comes above another image.
I am using Visual Studio 2012. This is a screenshot of my form:
One way to do this is by changing the parent of the overlapping picture box to the PictureBox over which it is lapping. Since the Visual Studio designer doesn't allow you to add a PictureBox to a PictureBox, this will have to be done in your code (Form1.cs) and within the Intializing function:
public Form1()
{
InitializeComponent();
pictureBox7.Controls.Add(pictureBox8);
pictureBox8.Location = new Point(0, 0);
pictureBox8.BackColor = Color.Transparent;
}
Just change the picture box names to what ever you need. This should return:
GameBoard is control of type DataGridView;
The image should be type of PNG with transparent alpha channel background;
Image test = Properties.Resources.checker_black;
PictureBox b = new PictureBox();
b.Parent = GameBoard;
b.Image = test;
b.Width = test.Width*2;
b.Height = test.Height*2;
b.Location = new Point(0, 90);
b.BackColor = Color.Transparent;
b.BringToFront();
Try using an ImageList
ImageList imgList = new ImageList;
imgList.TransparentColor = Color.White;
Load the image like this:
picturebox.Image = imgList.Images[img_index];
I've had a similar problem like this.
You can not make Transparent picturebox easily such as picture that shown at top of this page, because .NET Framework and VS .NET objects are created by INHERITANCE! (Use Parent Property).
I solved this problem by RectangleShape and with the below code I removed background,
if difference between PictureBox and RectangleShape is not important and doesn't matter, you can use RectangleShape easily.
private void CreateBox(int X, int Y, int ObjectType)
{
ShapeContainer canvas = new ShapeContainer();
RectangleShape box = new RectangleShape();
box.Parent = canvas;
box.Size = new System.Drawing.Size(100, 90);
box.Location = new System.Drawing.Point(X, Y);
box.Name = "Box" + ObjectType.ToString();
box.BackColor = Color.Transparent;
box.BorderColor = Color.Transparent;
box.BackgroundImage = img.Images[ObjectType];// Load from imageBox Or any resource
box.BackgroundImageLayout = ImageLayout.Stretch;
box.BorderWidth = 0;
canvas.Controls.Add(box); // For feature use
}
One fast solution is set image property for image1 and set backgroundimage property to imag2, the only inconvenience is that you have the two images inside the picture box, but you can change background properties to tile, streched, etc. Make sure that backcolor be transparent.
Hope this helps
Just use the Form Paint method and draw every Picturebox on it, it allows transparency :
private void frmGame_Paint(object sender, PaintEventArgs e)
{
DoubleBuffered = true;
for (int i = 0; i < Controls.Count; i++)
if (Controls[i].GetType() == typeof(PictureBox))
{
var p = Controls[i] as PictureBox;
p.Visible = false;
e.Graphics.DrawImage(p.Image, p.Left, p.Top, p.Width, p.Height);
}
}
you can set the PictureBox BackColor proprty to Transparent

Drawing on PictureBox inside of Panel - C#

The question I have here is sort of a 2 parter.
I have a picturebox that is positioned inside of a panel. When I open an image, the picturebox is resized to the size of the image, while the panel stays the same size. The panel just has scrollbars to see the whole image.
There are 2 things going wrong with this.
When I resize the picturebox, for some reason I can only draw in the previous portion of the picturebox. Ex. The imagebox starts out by default as 200x200. I open an image that is 500x400. And I can only still draw in the 200x200 portion of the image.
The second issue that I am having is that when I do draw in that selective portion of the picturebox, when I scroll to where my painting is out of view, and come back, the image that i painted gone. I know there is some sort of picturebox.invalidate() that I need. I am just not sure how to use it.
Here is my code to get a good grasp on what I'm doing.
public Form1()
{
InitializeComponent();
DrawArea = new Bitmap(pictureBox1.Size.Width, pictureBox1.Size.Height );
pictureBox1.Image = DrawArea;
objGraphics = this.pictureBox1.CreateGraphics();
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
drawImage(e);
}
public void drawImage(MouseEventArgs e)
{
Rectangle rDraw = new Rectangle();
if (e.Button == MouseButtons.Left)
{
rDraw.X = e.X;
rDraw.Y = e.Y;
rDraw.Width = 3;
rDraw.Height = 3;
objGraphics.DrawEllipse(System.Drawing.Pens.Black, rDraw);
}
}
private void openToolStripMenuItem_Click(object sender, EventArgs e)
{
try
{
OpenFileDialog open = new OpenFileDialog();
open.Filter = "Image Files(*.jpg; *.bmp)|*.jpg; *.bmp";
if (open.ShowDialog() == DialogResult.OK)
{
Bitmap bit = new Bitmap(open.FileName);
pictureBox1.Size = bit.Size;
DrawArea = bit;
pictureBox1.Image = bit;
}
}
catch (Exception)
{
throw new ApplicationException("Failed loading image");
}
}
Thanks Alot!
You need to draw in the picturebox's Paint event.
You should (almost) never draw on CreateGraphics().

C# - Transparent modal form on a window

I want to use fully transparent Modal form in my application, with being able to fill it with partially-transparent image; For this, I used to remove all visible elements from the form and got the code below.
class WinScreenshotWindow : Form
{
public WinScreenshotWindow()
{
// Create from without erasing background with a color
// Going not to use transparent form instead, it will produce context menu bugs in textboxes for child form
this.SuspendLayout();
this.MaximizeBox = false;
this.MinimizeBox = false;
this.ShowIcon = false;
this.ShowInTaskbar = false;
this.FormBorderStyle = FormBorderStyle.None;
this.StartPosition = FormStartPosition.Manual;
this.ControlBox = false;
this.Visible = false;
this.Size = new Size(100, 100);
this.Location = new Point(200, 200);
this.ResumeLayout();
}
protected override void OnPaintBackground(PaintEventArgs e)
{
// Erase Background Windows message:
}
protected override void OnPaint(PaintEventArgs e)
{
Rectangle clientRect = e.ClipRectangle;
e.Graphics.FillRectangle(Brushes.Transparent, clientRect);
}
}
static void Main()
{
Form form = new Form();
form.Size = new Size(400, 400);
form.Show();
var ww = new WinScreenshotWindow();
ww.ShowDialog(form);
}
But the result is something strange:
When I remove filling in OnPaint(), it is not visible at all.
The question is - why does this happen? If the background is transparent why do it shows the form in such way? And what can be done in this situation?
Any help appreciated.
Wouldn't it be easier to open a borderless form with a red backcolor and set the TransparencyKey = red?

C# WinForms problem with draw image

class OriginalImage: Form
{
private Image image;
private PictureBox pb;
public OriginalImage()
{
pb = new PictureBox {SizeMode = PictureBoxSizeMode.CenterImage};
pb.SizeMode = PictureBoxSizeMode.StretchImage;
Controls.Add(pb);
image = Image.FromFile(#"Image/original.jpg");
this.Width = image.Width;
this.Height = image.Height;
this.Text = "Original image";
this.Paint += new PaintEventHandler(Drawer);
}
public virtual void Drawer(object source, PaintEventArgs e)
{
Graphics g = pb.CreateGraphics();
g.DrawImage(image,0,0);
}
I call this create object OriginalImage in other form on button click, but image is not draw? Where is problem?
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void button1_Click(object sender, EventArgs e)
{
var oi = new OriginalImage();
oi.Show();
}
}
You're creating a PictureBox and adding it to your controls, but you never actually use it (you're drawing the image manually in the Paint event). Why? This control is likely obscuring the drawing area of the form, as any controls go on top of whatever you draw in the Paint event.
In addition, you're getting the Graphics object by calling CreateGraphics on the PictureBox rather than the Form itself. This is wrong, as the PictureBox's Paint event will fire after this code, erasing whatever you draw.
I would recommend changing your OriginalForm code to the following:
class OriginalImage: Form
{
private Image image;
private PictureBox pb;
public OriginalImage()
{
pb = new PictureBox();
pb.SizeMode = PictureBoxSizeMode.StretchImage;
pb.Dock = DockStyle.Fill; // this will make the PictureBox occupy the
// whole form
Controls.Add(pb);
image = Image.FromFile(#"Image/original.jpg");
this.ClientSize = new Size(image.Width, image.Height); // this allows you to
// size the form while
// accounting for the
// border
this.Text = "Original image";
pb.Image = image; // use this instead of drawing it yourself.
}
}

Categories