How to make a diagonal line divide two panels in C# WinForms?

Question

this is my form and I'm trying to make it so the diagonal line in the middle divides the left and the right parts of my form evenly . The line is drawn in a separate panel, with a script instructing it where to position the line (also, the background of this panel was set to transparent). The left part of my form is another panel as well as the black part in the upper right corner. The login elements (the email and password fields, the register and sign-in buttons, etc) are attached to the form itself.

Image of the form when I run it

Image of the form in the editor

I tried adding other lines in the same place in the other panels but it still didn't look as I wanted it to because those panels were still overlapping despite the transparent background of the original panel with the line.

I don't know what to do, so help would be much appreciated;)

Answer 1

I would put this into an own user control. Afterwards you could set everything through ForeColor , BackgroundColor , Thickness and RightToLeft :

public class DiagonalSeparator : UserControl
{
    private int thickness = 3;

    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);
        using (Graphics g = e.Graphics)
        {
            g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
            g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

            var p = new Pen(ForeColor, thickness);
            var point1 = RightToLeft == RightToLeft.No ? new Point(0, 0) : new Point(Width, 0);
            var point2 = RightToLeft == RightToLeft.No ? new Point(Width, Height) : new Point(0, Height);
            g.DrawLine(p, point1, point2);
        }
    }

    [DefaultValue(3)]
    [Description("The thickness of the drawn line"), Category("Appearance")]
    [Browsable(true), EditorBrowsable(EditorBrowsableState.Always)]
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
    public int Thickness
    {
        get
        {
            return thickness;
        }

        set
        {
            thickness = value;
            Invalidate();
        }
    }
}

This control can then be used as any other control within the designer and you can check if the visualization works as expected.

Answer 2

If you want to divide the left and the right parts of the form evenly with the diagonal line in the middle, you can refer to the following code:

private void panel3_Paint(object sender, PaintEventArgs e)
{
    base.OnPaint(e);
    using (Graphics g = e.Graphics)
    {
        g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
        g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
        g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
        g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

        var p = new Pen(Color.Red, 3);
        var point1 = new Point(0, 0);
        var point2 = new Point(panel3.Width, panel3.Height);
        g.DrawLine(p, point1, point2);
    }
}

You can change the color and size of the diagonal line in the code.