WinForms, picturebox's image overlapping custom painted drawings

Question

I have a custom user control with a picture box on it. Then, draw a circle on the control in Paint event.

var size = TextRenderer.MeasureText(this.UnreadCount.ToString(), lblDisplayname.Font);
var rec = new Rectangle(0, 0, size.Width, size.Width);
var smallFont = new Font(lblDisplayname.Font.Name, lblDisplayname.Font.Size - 1);
StringFormat format = new StringFormat();
format.Alignment = StringAlignment.Center;
format.FormatFlags = StringFormatFlags.DirectionRightToLeft;
format.LineAlignment = StringAlignment.Center;

using (LinearGradientBrush b = new LinearGradientBrush(
    rec,
    Color.FromArgb(242, 37, 37),
    Color.FromArgb(178, 30, 30),
    45F))
{                    
    e.Graphics.FillEllipse(b, rec);                    
    e.Graphics.DrawString(this.UnreadCount.ToString(), smallFont, Brushes.White, rec, format);
}

Then, later in the implementation, I set the image of the control's picture box.

MyControl ctrl = new MyControl();
ctrl.picImage.Image = Image.FromFile(imagePath);
ctrl.Refresh();

The issue is that: the picture box's image overlap the drawn circle. current issue Requirement is that: The circle is needed to display fully overlapping the image. What might be causing my issue?

Have you tried overriding `CreateParams` in your parent custom control as described in the second snipped in [this question](https://stackoverflow.com/questions/16376567/reduce-flickering-by-turning-off-ws-clipchildren)? — Leandro, Jul 04 '17 at 03:25
Can you share the image how it should look like? I mean desired result. — Munawar, Jul 04 '17 at 03:42
In a blank user control ,add a panel (Panel1) and dock it to the parent control ,Add another panel (Panel2) on the previous panel ,In the panel2 paint event ,put your code.Change the background image of panel 1 in your code as required. -Another way to do it without picturebox — Shemeer BK, Jul 04 '17 at 03:49
https://drive.google.com/file/d/0ByrGVa9RXBZAYXJBdk1yTzhFQ0k/view?usp=sharing ,Is that your desired result? — Shemeer BK, Jul 04 '17 at 03:59
The problem lies in setting the parent ,your code draws the graphics perfectly for the controls background and the picturebox is added on top of that. that is why the picture box is always on top. Inorder for you bring the drawn circle over your picture box ,you will need another container on top of your picture box with the paint arguments .My preferred way is using a panel.And instead of the control background you need to draw on the top container.I will post a snippet as the answer as could not put it here. — Shemeer BK, Jul 04 '17 at 06:00

score 0 · Accepted Answer · answered Jul 04 '17 at 06:06

The following fuction will return a user control with your requirements ,Posting the code for you to understand the parent child relationship.

Either the graphics has to be drawn on top of the image container or on another transparent container that is on top of the image.

The below sample has 2 panels ,panel1 and panel2 where panel 2 is a child of panel. Panel1 is the background image and panel 2 has the graphics.Hope it helps.

    private UserControl create_MyControl( string  filenamepath)
    {
        //Create User Control

        UserControl MyControl = new UserControl();
        //Mention the size of control
        MyControl.Size = new Size(100, 100);
        //Create a panel to hold the background image that you wanted in the picture box
        Panel panel1 = new Panel();
        //dock the panel1 to fill the control background
        panel1.Dock = DockStyle.Fill;
        MyControl.Controls.Add(panel1);
        //Create another panel as overlay for panel1
        Panel panel2 = new Panel();
        //dock the panel2 to fill the panel1;
        panel2.Dock = DockStyle.Fill;
        //Add panel2 as child of panel1
        panel1.Controls.Add(panel2);
        //Set panel2 background as transparent 
        panel2.BackColor = Color.Transparent;
        // To replicate the variables that you have!
        Label lblDisplayname = new Label();
        lblDisplayname.Font = new Font("Arial", 24, FontStyle.Regular);
        lblDisplayname.Size = panel2.Size;
        lblDisplayname.TextAlign = ContentAlignment.TopCenter;
        lblDisplayname.Text = "25";
        lblDisplayname.Dock = DockStyle.Fill;
        panel2.Controls.Add(lblDisplayname);

        panel1.BackgroundImage = Image.FromFile(filenamepath);
        panel1.BackgroundImageLayout = ImageLayout.Stretch;

        //In Panel2 paint event put your code for stuff
        panel2.Paint += (s, e) =>
        {

            var size = TextRenderer.MeasureText("Hello", lblDisplayname.Font);
            var rec = new Rectangle(0, 0, size.Width, size.Width);

            var smallFont = new Font(lblDisplayname.Font.Name, lblDisplayname.Font.Size - 1);
            StringFormat format = new StringFormat();
            format.Alignment = StringAlignment.Center;
            format.FormatFlags = StringFormatFlags.DirectionRightToLeft;
            format.LineAlignment = StringAlignment.Center;

            using (System.Drawing.Drawing2D.LinearGradientBrush b = new System.Drawing.Drawing2D.LinearGradientBrush(
                rec,
                Color.FromArgb(242, 37, 37),
                Color.FromArgb(178, 30, 30),
                45F))
            {
                e.Graphics.FillEllipse(b, rec);
                e.Graphics.DrawString("Hello", smallFont, Brushes.White, rec, format);
            }
        };

        return MyControl;
    }

WinForms, picturebox's image overlapping custom painted drawings

1 Answers1