Any trick to use opacity on a panel in Visual Studio Window Form?
Solution 1
- Create a class that inherits from
Panel
. - Set the
ControlStyle.Opaque
for control in constructor usingSetStyle
.
If true, the control is drawn opaque and the background is not painted.
- Override
CreateParams
and setWS_EX_TRANSPARENT
style for it.
Specifies that a window created with this style is to be transparent. That is, any windows that are beneath the window are not obscured by the window. A window created with this style receives WM_PAINT messages only after all sibling windows beneath it have been updated.
- Create an
Opacity
property that accepts values from 0 to 100 that will be used as alpha channel of background. - Override
OnPaint
and fill the background using an alpha enabledBrush
that is created fromBackGroundColor
andOpacity
.
Complete Code
public class ExtendedPanel : Panel
{
private const int WS_EX_TRANSPARENT = 0x20;
public ExtendedPanel()
{
SetStyle(ControlStyles.Opaque, true);
}
private int opacity = 50;
[DefaultValue(50)]
public int Opacity
{
get
{
return this.opacity;
}
set
{
if (value < 0 || value > 100)
throw new ArgumentException("value must be between 0 and 100");
this.opacity = value;
}
}
protected override CreateParams CreateParams
{
get
{
CreateParams cp = base.CreateParams;
cp.ExStyle = cp.ExStyle | WS_EX_TRANSPARENT;
return cp;
}
}
protected override void OnPaint(PaintEventArgs e)
{
using (var brush = new SolidBrush(Color.FromArgb(this.opacity * 255 / 100, this.BackColor)))
{
e.Graphics.FillRectangle(brush, this.ClientRectangle);
}
base.OnPaint(e);
}
}
Screenshot
Solution 2
To make a control "transparent", you should paint the right area of its parent onto the control. That's what the Button
does before it draws its content so the rounded corners will be transparent.
To mimic semi-transparency, you can paint the form onto the panel, and then draw something with Alpha:
private void panel1_Paint(object sender, PaintEventArgs e)
{
PaintTransparentBackground(panel1, e);
using (Brush b = new SolidBrush(Color.FromArgb(128, panel1.BackColor)))
{
e.Graphics.FillRectangle(b, e.ClipRectangle);
}
}
private static void PaintTransparentBackground(Control c, PaintEventArgs e)
{
if (c.Parent == null || !Application.RenderWithVisualStyles)
return;
ButtonRenderer.DrawParentBackground(e.Graphics, c.ClientRectangle, c);
}
Please note that the ButtonRenderer.DrawParentBackground
does not paint the controls of the form, which overlap with the panel, but only the background of the form.
Lio Chon
Updated on June 17, 2020Comments
-
Lio Chon almost 4 years
I recently started exploring Visual Studio. I was trying to create a slide menu. More specifically, when the user would press the button a submenu would pop up to the right. To achieve that i have placed a
Panel
to resize itself. Apart from functionality i wanted to add a bit more design and make thePanel
appear a bit faded.I know that
Panels
in Visual studio do not have opacity, but i was thinking if anyone knows a way-trick-idea about how it can be achieved. I tried aPicture Box
but that too didn't have Opacity as a property. I avoided to use the regularMenu
object that visual studio offers because i wanted to add more design. Any ideas? -
TaW over 8 yearsIf there are controls to be overlapped you can still get the target in a bitmap with drawtobitmap. The animation will look like shite in winforms, though..
-
ChrisB over 7 yearsNice solution. I implemented it with a timer so the opacity would start at 100 and go down to 0. However it is flickering like crazy. Any idea how to get a smooth animation?
-
Reza Aghaei over 7 years@ChrisB I'll check it using a timer, but maybe you find this post useful.
-
Reza Aghaei over 7 years@ChrisB By the way, I used this solution for a case which I needed a semi-transparent overlay in windows forms. (It may sounds irrelevant, but using a Form as an overlay is a more reliable solution in some cases.)
-
user276648 almost 7 yearsThis doesn't seem to work above a
SplitPanel
unfortunately. -
Tobias Knauss over 6 yearsWorks in general, but when I put the cursor over the not-overlayed part of the "button on form", the button is brought into the foreground and stays there. How can I fix that? It should return into the background automatically when then mouse leaves it.
-
Reza Aghaei over 6 years@TobiasKnauss That's why I included the picture. I'll take another look at it to find out if there is a workaround or not.
-
Chud37 over 5 yearsI can't get this to work when I run the app, It displays in the design view, but not when I run the application?
-
shooky over 4 yearsJust want to add a few notes about using the above code block. 1) Any control behind that is foregrounded needs manually backgrounded and may require a Form.Refresh(); to force a repaint of the form and all its children.