Controls with transparent background on top of video

Question

I am developing a project that needs to look like the attached screenshot.

I have a WinForm with VideoPanelCtl panel on top of it. The panel's handle is passed to the instantiated VLC component/control that results in video displayed on that panel.

I also tried to put another panel on top of the VideoPanelCtl at the upper end of the video panel and make it transparent and the controls that are sitting on top of this top panel also should have transparent background as shown in attached screenshot. However, my approach did not work despite that I used a a custom panel derived from panel control with bkg repainting (see code below) The panel that I was creating in code like this simply was obscured by the video...and if I had put controls on it (buttons and labels) they probably would be obscured too...

I call this from form's Load handler of the WinForm:

private void InitTopPanel()
    {
        mExtendedPanelTop = new ExtendedPanel();
        mExtendedPanelTop.Opacity = 50; // totally transparent

        videoPanelCtl.Controls.Add(mExtendedPanelTop);
        mExtendedPanelTop.BorderStyle = System.Windows.Forms.BorderStyle.Fixed3D; 
        mExtendedPanelTop.Dock = System.Windows.Forms.DockStyle.Top;
        mExtendedPanelTop.Location = new System.Drawing.Point(0, 0);
        mExtendedPanelTop.Name = "ExtendedPanelTop";
        mExtendedPanelTop.Size = new System.Drawing.Size(1090, 48);
        mExtendedPanelTop.TabIndex = 0;
        //mExtendedPanelTop.Paint += mExtendedPanelTop_Paint;
    }

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);
    }
}

How do I achieve the controls on top of video that sit on transparent panel and also have transparent background?
How do I achieve semi-transparent label on top of video with text (red label background) that says "Video Connection Lost"? (see attached)

Video ovelay is highly dependent on the video control part. The rest is best done by painting on a control but if that will work depends on the video part. Sometime the video is really overlaying everything and you just can't use regular controls or GDI drawing to paint over it.. — TaW

Leon Havin Leon Havin · Accepted Answer · 2016-07-22T23:51:57

I resolved it by using WPF control that contains the Canvas and the Canvas containing MediaElement and Label (or other controls). Then setting ZIndex of Label higher to cause visibility. Thus, I get visible label on running video (within MediaElement) with Label having transparent background.

Controls with transparent background on top of video

1 Answers