Any trick to use opacity on a panel in Visual Studio Window Form?

Question

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 the Panel 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 a Picture Box but that too didn't have Opacity as a property. I avoided to use the regular Menuobject that visual studio offers because i wanted to add more design. Any ideas?

Answer 1

1. Create a class that inherits from Panel.
2. Set the ControlStyle.Opaque for control in constructor using SetStyle.

If true, the control is drawn opaque and the background is not painted.

2. Override CreateParams and set WS_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.

3. Create an Opacity property that accepts values from 0 to 100 that will be used as alpha channel of background.
4. Override OnPaint and fill the background using an alpha enabled Brush that is created from BackGroundColor and Opacity.

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

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

Answer 3

Set any color at the panel. For example, black, after which you just need to register the TransparencyKey shape and select the color you want to make transparent:

 public Form1()
        {
            InitializeComponent();
            panel1.BackColor = Color.Black; 
            this.TransparencyKey = Color.Black;
        }