Overlapping PicuresBox with transparent background - c#

I want make two or more overlapping PictureBox with transparent background but if I do this I see only one Image:
I create my PictureBoxes like this:
PictureBox pb1 = new PictureBox();
pb1.Size = new Size(32, 32);
pb1.Location = new Point(0,0);
pb1.Image = Image.FromFile("../Graphics/Grounds/ground.png");
pb1.Visible = true;
PictureBox pb2 = new PictureBox();
pb2.Size = new Size(32, 32);
pb2.Location = new Point(0,0);
pb2.Image = Image.FromFile("../Graphics/Grounds/human.png");
pb2.Visible = true;
Later I add those two PictureBoxes to my Panel:
panel1.Controls.Add(pb1);
panel1.Controls.Add(pb2);
So why does it only shows one PictureBox?

Try change panel1.Controls.Add(pb2); to pb1.Controls.Add(pb2);
Make sure you set the correct location as pb1 be the container

If your human.png has transparent background:
pb2.BackColor = Color.Transparent;

Related

How do I dynamically layer objects ontop of eachother in Windows Forms?

I'm using a FlowLayoutPanel to dynamically display an array of PictureBoxes and Labels. They're going in the order: PictureBox-Label-PictureBox-Label and so on. I need those labels to appear above each picture so they'll match, basically layring them ontop of picturebox margins. I tried using Controls.SetChildIndex(temp, 2); but it seem to just swap the postion of the picturebox. I also tried using temp.BringToFront(); but then all the pictureboxes being displayed at the top of the panel and all the labels are below (I need each label to match each picturebox above them). Here's the code:
public void RunMeta()
{
Label mostPickedLabel = new Label();
mostPickedLabel.Text = "Most picked heroes";
flowLayoutPanel1.Controls.Add(mostPickedLabel);
mostPickedLabel.Margin = new Padding(15, 0, 1000, 0);
mostPickedLabel.Font = new Font("Lucida Sans Unicode", 15);
mostPickedLabel.ForeColor = Color.DarkCyan;
mostPickedLabel.Size = new Size(200, 30);
foreach (var mostPickedHero in FetchDataFromDota2Site.MostUsedHeroesAndImages)
{
PictureBox temp = new PictureBox();
temp.ImageLocation = mostPickedHero.ImageSource;
temp.SizeMode = PictureBoxSizeMode.StretchImage;
temp.Left = temp.Width * flowLayoutPanel1.Controls.Count;
temp.Margin = new Padding(15, 30, 15, 30);
flowLayoutPanel1.Controls.Add(temp);
flowLayoutPanel1.AutoScroll = true;
Label heroName = new Label();
heroName.Text = mostPickedHero.MostPickedHeroName;
heroName.Font = new Font("Lucida Sans Unicode", 8);
heroName.ForeColor = Color.White;
flowLayoutPanel1.Controls.Add(heroName);
}
}

BackgroundImage layout to Bottom

I have a task, that can be easily completed with html/css, but I cant figure out how to do it with C# WindowsForms.
I need to create container with dinamic height and with 3 types of BackgroundImage's. To do so I created panel1 and set BackgroundImageLayout of "body.jpg" to tile.
Then I put panel2 and set BackgroundImageLayout of "top.jpg" to none.
So I need to create only one container with "bottom.jpg" but here is the problem.
Image is tall and it must have layout to bottom, but I cant set BackgroundImage of panel3 to Bottom and I cant dock PictureBox to bottom, because in that case it will prevent to set content overlay.
P.S. Sorry if you cant understand some of my explanations - my native language is Russian.
Here is what constuctor created for me:
//
// Charsheet_bg
//
this.Charsheet_bg.AutoSize = true;
this.Charsheet_bg.BackgroundImage = ((System.Drawing.Image)(resources.GetObject("Charsheet_bg.BackgroundImage")));
this.Charsheet_bg.Controls.Add(this.Charsheet_top);
this.Charsheet_bg.Dock = System.Windows.Forms.DockStyle.Left;
this.Charsheet_bg.Location = new System.Drawing.Point(0, 0);
this.Charsheet_bg.Margin = new System.Windows.Forms.Padding(0);
this.Charsheet_bg.MinimumSize = new System.Drawing.Size(285, 0);
this.Charsheet_bg.Name = "Charsheet_bg";
this.Charsheet_bg.Size = new System.Drawing.Size(285, 488);
this.Charsheet_bg.TabIndex = 30;
//
// Charsheet_top
//
this.Charsheet_top.BackColor = System.Drawing.Color.Transparent;
this.Charsheet_top.BackgroundImage = ((System.Drawing.Image)(resources.GetObject("Charsheet_top.BackgroundImage")));
this.Charsheet_top.BackgroundImageLayout = System.Windows.Forms.ImageLayout.None;
this.Charsheet_top.Dock = System.Windows.Forms.DockStyle.Fill;
this.Charsheet_top.Location = new System.Drawing.Point(0, 0);
this.Charsheet_top.MinimumSize = new System.Drawing.Size(285, 200);
this.Charsheet_top.Name = "Charsheet_top";
this.Charsheet_top.Size = new System.Drawing.Size(285, 488);
this.Charsheet_top.TabIndex = 31;
And screenshot will be in 5 mins.
Screenshot with tooltips

WinForms transparent picture box not working

I have been trying to lay an image in black/gray over a background, and I would like the background to show through on the transparent sections of the image. The image is definitely saved as a transparent png correctly. What is wrong with the code below?
this.pictureBox14.BackColor = System.Drawing.Color.Transparent;
this.pictureBox14.BackgroundImage = ((System.Drawing.Image)(resources.GetObject("pictureBox14.BackgroundImage")));
this.pictureBox14.BackgroundImageLayout = System.Windows.Forms.ImageLayout.None;
this.pictureBox14.Cursor = System.Windows.Forms.Cursors.Hand;
this.pictureBox14.Location = new System.Drawing.Point(486, 337);
this.pictureBox14.Name = "pictureBox14";
this.pictureBox14.Size = new System.Drawing.Size(69, 62);
this.pictureBox14.SizeMode = System.Windows.Forms.PictureBoxSizeMode.CenterImage;
this.pictureBox14.TabIndex = 18;
this.pictureBox14.TabStop = false;
this.pictureBox14.Click += new System.EventHandler(this.pictureBox14_Click);

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 animation on combobox

There is a lot of already answered question and examples about how to draw images within combobox. But I haven't found any examples how to draw animations within combobox.
The gif animation I use is (it's transparent):
And the result I want to achieve is somethink like this:
I'm using Windows Forms and .Net 3.5.
All ways of achieving that, I thought about, were:
1. Use Graphics.DrawImage in ComboBox's DrawItem handler. But the image was drawn statically, there was no anmation.
2. Use PictureBox to show animation and then somehow resize it and place over the ComboBox.
For second soultion I used the following code:
pictureBox1 = new PictureBox();
pictureBox1.Image = Resource.myImage;
pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
//3 is used just for try to fit image into "white" area of ComboBox
pictureBox1.ClientSize = new Size(comboBox1.Size.Height-3, comboBox1.Size.Height-3);
pictureBox1.BackColor = System.Drawing.Color.Transparent;
pictureBox1.Dock = DockStyle.Left;
pictureBox1.Parent = this.comboBox1;
pictureBox1.Enabled = true;
pictureBox1.Visible = true;
But in result I've got this:
It's animated, but picturebox is drawn on ComboBox edges and it looks bad.
So, can anyone give me an advice or some help to achive this?
Thank you.
EDIT:
My final solution that worked:
pictureBox1 = new PictureBox();
pictureBox1.Image = Resource1.myImage;
pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
pictureBox1.ClientSize = new Size(comboBox1.Size.Height - SystemInformation.Border3DSize.Height, comboBox1.Size.Height - (2 * SystemInformation.Border3DSize.Height));
pictureBox1.BackColor = System.Drawing.Color.Transparent;
pictureBox1.Location = new Point(SystemInformation.Border3DSize.Width, SystemInformation.Border3DSize.Height);
pictureBox1.Parent = this.comboBox1;
pictureBox1.Enabled = true;
pictureBox1.Visible = true;
Thank you all! You help me a lot!
Try this:
pictureBox1 = new PictureBox();
pictureBox1.Image = Resource.myImage;
pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
//2 is used just for try to fit image into "white" area of ComboBox
pictureBox1.ClientSize = new Size(comboBox1.Size.Height - 2, comboBox1.Size.Height - 2);
pictureBox1.BackColor = System.Drawing.Color.Transparent;
pictureBox1.Left = 1;
pictureBox1.Top = 1;
pictureBox1.Parent = this.comboBox1;
pictureBox1.Enabled = true;
pictureBox1.Visible = true;
remove the code that sets the "Dock" property. Setting this causes the layout manager to ignore size/location settings.
Instead, set the Size property and the Location property to specific values.
Something like:
pictureBox3.Size = new Size(comboBox1.Size.Height-3, comboBox1.Size.Height-3);
pictureBox3.Location = new Point(0, 3);
You may have to adjust these to get the extact position you need.
It might be then a tad too small, but it would fit, if you set the size of your combobox to pictureBox1.Size = new Size(comboBox1.ItemHeight, comboBox1.ItemHeight).
Or set the height and width to 2*SystemInformation.3DBorderSize

Categories