We Keep Coding

Removing the button's background?

Based on my previous question (Making the panel transparent?), I wished to create a button with transparent background around it:
internal class TransparentButton : Button
{
protected override CreateParams CreateParams
{
get
{
CreateParams cp = base.CreateParams;
cp.ExStyle |= 0x20; // WS_EX_TRANSPARENT
return cp;
}
}
public TransparentButton()
{
SetStyle(ControlStyles.Opaque | ControlStyles.SupportsTransparentBackColor, true);
}
}
Now, when I add this button to my form:
I wish it to have transparent background, i.e. to not draw the gray border on top of the black background.
Can I do it with my TransparentButton class, without major changes (like drawing the text and background, and border manually)?
This is my desired goal to reach, so the button itself shall stay as is, but the rectangular background with the color of "Control" shall be transparent:

This edited TransparentButton improves on my previous answer and no longer overrides OnPaint. It requires no custom drawing. Instead, it uses Graphics.CopyFromScreen to make a screenshot of the rectangle behind the button and sets its own Button.BackgroundImage to the snipped bitmap. This way it's effectively camouflaged and appears transparent while still drawing as a Standard styled button.
Requirements:
Create a button with transparent background.
Do it without drawing the background manually in OnPaint.
Keep the Button.FlatStyle as FlatStyle.Standard.
Do not disturb the rounded edges of the standard button.
class TransparentButton : Button
{
public TransparentButton() => Paint += (sender, e) =>
{
// Detect size/location changes
if ((Location != _prevLocation) || (Size != _prevSize))
{
Refresh();
}
_prevLocation = Location;
_prevSize = Size;
};
Point _prevLocation = new Point(int.MaxValue, int.MaxValue);
Size _prevSize = new Size(int.MaxValue, int.MaxValue);
public new void Refresh()
{
if (!DesignMode)
{
bool isInitial = false;
if ((BackgroundImage == null) || !BackgroundImage.Size.Equals(Size))
{
isInitial = true;
BackgroundImage = new Bitmap(Width, Height);
}
if (MouseButtons.Equals(MouseButtons.None))
{
// Hide button, take screenshot, show button again
Visible = false;
BeginInvoke(async () =>
{
Parent?.Refresh();
if (isInitial) await Task.Delay(250);
using (var graphics = Graphics.FromImage(BackgroundImage))
{
graphics.CopyFromScreen(PointToScreen(new Point()), new Point(), Size);
}
Visible = true;
});
}
else
{
using (var graphics = Graphics.FromImage(BackgroundImage))
graphics.FillRectangle(Brushes.LightGray, graphics.ClipBounds);
}
}
else base.Refresh();
}
protected override void OnMouseUp(MouseEventArgs mevent)
{
base.OnMouseUp(mevent);
Refresh();
}
/// <summary>
/// Refresh after a watchdog time delay. For example
/// in response to parent control mouse moves.
/// </summary>
internal void RestartWDT(TimeSpan? timeSpan = null)
{
var captureCount = ++_wdtCount;
var delay = timeSpan ?? TimeSpan.FromMilliseconds(250);
Task.Delay(delay).GetAwaiter().OnCompleted(() =>
{
if (captureCount.Equals(_wdtCount))
{
Debug.WriteLine($"WDT {delay}");
Refresh();
}
});
}
int _wdtCount = 0;
}
Design Mode Example
Main form BackgroundImage to main form with a Stretch layout. Then overlay a TableLayoutPanel whose job it is to keep the button scaled correctly as the form resizes. TransparentButton is now placed in one of the cells.
Test
Here's the code I used to test the basic transparent button as shown over a background image:
public partial class MainForm : Form
{
public MainForm() => InitializeComponent();
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
buttonTransparent.ForeColor = Color.White;
buttonTransparent.Click += onClickTransparent;
}
private void onClickTransparent(object? sender, EventArgs e)
{
MessageBox.Show("Clicked!");
buttonTransparent.RestartWDT();
}
protected override CreateParams CreateParams
{
get
{
const int WS_EX_COMPOSITED = 0x02000000;
// https://stackoverflow.com/a/36352503/5438626
CreateParams cp = base.CreateParams;
cp.ExStyle |= WS_EX_COMPOSITED;
return cp;
}
}
}
Revision 2.0 Demo
I've uploaded a demo to my GitHub repo that has a draggable, clickable transparent button over a RichTextBox control.

Transparent background showing up black

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).

Making a control transparent

I am currently developing a simple image editing tool using Winforms and .NET 3.5 (work environment).
I have a requirement that when the user clicks a select tool button, a square (rectangle in C#) will appear that they can scale between 100x100 and 400x400. I have this bit fixed - the issue comes with making the background of the rectangle transparent.
I'm a little unclear on if transparency is supported in .NET 3.5, I've tried the following:
SetStyle(ControlStyles.SupportsTransparentBackColor, true);
pnlSelectArea.BackColor = Color.Transparent;
pnlSelectArea.ForeColor = Color.Transparent;
selectArea1.BackColor = Color.Transparent;
selectArea1.ForeColor = Color.Transparent;
But this has no effect - any advice would be appreciated.

This is my special Control which contains an opacity property, it 100% works:
using System;
using System.Collections;
using System.ComponentModel;
using System.ComponentModel.Design;
using System.Drawing;
using System.Windows.Forms;
using System.Windows.Forms.Design;
public class TranspCtrl : Control
{
public bool drag = false;
public bool enab = false;
private int m_opacity = 100;
private int alpha;
public TranspCtrl()
{
SetStyle(ControlStyles.SupportsTransparentBackColor, true);
SetStyle(ControlStyles.Opaque, true);
this.BackColor = Color.Transparent;
}
public int Opacity
{
get
{
if (m_opacity > 100)
{
m_opacity = 100;
}
else if (m_opacity < 1)
{
m_opacity = 1;
}
return this.m_opacity;
}
set
{
this.m_opacity = value;
if (this.Parent != null)
{
Parent.Invalidate(this.Bounds, true);
}
}
}
protected override CreateParams CreateParams
{
get
{
CreateParams cp = base.CreateParams;
cp.ExStyle = cp.ExStyle | 0x20;
return cp;
}
}
protected override void OnPaint(PaintEventArgs e)
{
Graphics g = e.Graphics;
Rectangle bounds = new Rectangle(0, 0, this.Width - 1, this.Height - 1);
Color frmColor = this.Parent.BackColor;
Brush bckColor = default(Brush);
alpha = (m_opacity * 255) / 100;
if (drag)
{
Color dragBckColor = default(Color);
if (BackColor != Color.Transparent)
{
int Rb = BackColor.R * alpha / 255 + frmColor.R * (255 - alpha) / 255;
int Gb = BackColor.G * alpha / 255 + frmColor.G * (255 - alpha) / 255;
int Bb = BackColor.B * alpha / 255 + frmColor.B * (255 - alpha) / 255;
dragBckColor = Color.FromArgb(Rb, Gb, Bb);
}
else
{
dragBckColor = frmColor;
}
alpha = 255;
bckColor = new SolidBrush(Color.FromArgb(alpha, dragBckColor));
}
else
{
bckColor = new SolidBrush(Color.FromArgb(alpha, this.BackColor));
}
if (this.BackColor != Color.Transparent | drag)
{
g.FillRectangle(bckColor, bounds);
}
bckColor.Dispose();
g.Dispose();
base.OnPaint(e);
}
protected override void OnBackColorChanged(EventArgs e)
{
if (this.Parent != null)
{
Parent.Invalidate(this.Bounds, true);
}
base.OnBackColorChanged(e);
}
protected override void OnParentBackColorChanged(EventArgs e)
{
this.Invalidate();
base.OnParentBackColorChanged(e);
}
}

You will need to use Opacity property and set it to zero to make form invisible.
If you want to make a control Transparent, as you have tried in your example, See this article
How to: Give Your Control a Transparent Background
It say the code you have written, must be in constructor of the control. Hence, I guess, you will need to create a custom control derived from your pnlSelectArea 's type most probaably a button. In in that custom control's constructor you can write code to set its style and color.

Here is what worked for me with because the other solutions did not work.
This is with transparent UserControl added to ListView/TreeView Control Collection
I know it says ButtonRenderer but it should work for any controls.
In the UserControl:
protected override void OnPaint(PaintEventArgs e)
{
ButtonRenderer.DrawParentBackground(e.Graphics, this.ClientRectangle, this);
}
in the Parent control:
protected override void WndProc(ref Message m)
{
if(m.Msg == 0xF)
foreach(Control c in this.Controls) { c.Invalidate(); c.Update(); }
base.WndProc(ref m);
}

great!!
I finally managed to draw transparent shapes.
I've added a virtual method
Draw(g);
right before
bckColor.Dispose();
g.Dispose();
base.OnPaint(e);
and at the end the declaration of the virtual method
protected virtual void Draw(Graphics g){ }
Now I can continue creating my own Transparent shapes, graphics etc ...

There is one simple workaround for this. You can create an image with a transparent background (PNG) and add it for the Image property of the icon. This works fine as information does not have much flexibility in styling. Sometime this might not be suitable for everyone. Remember this is only a workaround.
PS:
Add where ever the text on the image and keep blank for the text property.

.NET Custom UserControl's contents are disappearing when the parent is resized

I have derived the .NET UserControl, to make my own PictureList class.
However, when I resize the parent of the control, the contents of the control disappear. No Resize event is issued or whatever. I left out code not relevant to the question.
public ImageList(int width, int height)
{
ClientSize = new Size(width, height);
ResizeRedraw = true;
}
// Ensure background transparency will be handled corretly.
protected override CreateParams CreateParams
{
get {
CreateParams cp = base.CreateParams;
cp.ExStyle |= 0x20; // WS_EX_TRANSPARENT
return cp;
}
}
protected override void OnPaint(PaintEventArgs e)
{
MessageBox.Show("This messagebox is only shown upon the first drawing, but not after the magically disappearing of the contents");
img = /*the image to draw*/
rect = /*the size of the image*/
e.Graphics.DrawImage(img, rect);
}

Do you need to enable AutoRedraw?

Transparent Controls In VSTO

I'm trying to add some windows forms controls to a worksheet using vsto. I'd like them to be transparent though (so that the actual content in Excel is visible).
My winforms user control constructor looks like this:
public Tag()
{
InitializeComponent();
this.SetStyle(ControlStyles.SupportsTransparentBackColor, true);
BackColor = Color.Transparent;
}
I'm adding the control like this:
void Application_WorkbookOpen(Excel.Workbook Wb)
{
var nativeSheet = Wb.ActiveSheet as Excel.Worksheet;
if (nativeSheet != null)
{
var tag = new Tag();
var vstoSheet = nativeSheet.GetVstoObject();
var range = nativeSheet.Range["A1", missing];
vstoSheet.Controls.AddControl(tag, range, Guid.NewGuid().ToString());
}
}
If there's some content cell A1, it will be covered by the control (the cell will just appear as plain white).
Anybody have any ideas on this?

As mentioned over at MSDN:
When a Windows form control are hosted on Office document, the control
is not directly embedded in the document. An ActiveX control called
the Windows Forms control host is added to document surface first and
the control host acts as a host for each Windows Form control added
too the document.
You can see for yourself:
var btn = new ImageButton();
btn.Name = "link1";
btn.Text = controlText;
btn.Click += new EventHandler(btn_Click);
vstoWorksheet.Controls.AddControl(pic, nativeWorksheet.Range[address], controlText);
public class ImageButton : Control, IButtonControl
{
public ImageButton()
{
SetStyle(ControlStyles.SupportsTransparentBackColor, true);
SetStyle(ControlStyles.Opaque, true);
SetStyle(ControlStyles.ResizeRedraw, true);
this.BackColor = Color.Transparent;
}
protected override void OnPaint(PaintEventArgs pevent)
{
Graphics g = pevent.Graphics;
g.DrawRectangle(Pens.Black, this.ClientRectangle);
}
protected override void OnPaintBackground(PaintEventArgs pevent)
{
// don't call the base class
//base.OnPaintBackground(pevent);
}
protected override CreateParams CreateParams
{
get
{
const int WS_EX_TRANSPARENT = 0x20;
CreateParams cp = base.CreateParams;
cp.ExStyle |= WS_EX_TRANSPARENT;
return cp;
}
}
// rest of class here...
}