Panel having label position and border issue

Question

Panel having label position and border issue

Rishabh aggarwal 40

I am being tried to create a panel which looks exactly like the same .

User's image

but i found out that the default panel control doesn't fit my requirements . Any expert here, can please help me creating a panel in which the upper border is slightly bold and the below border is slim . another problem is how to place labels at a fixed positions just at above . i would be highly thankful to the expert as i am very poor in gdi+ and new to visual studio environment

KOZ6.0 6,655 Reputation points

2023-11-10T00:57:45.8233333+00:00

There's no need to think too hard. Just draw a rectangle with slim lines and draw a bold line.
For text, simply place the label on top of the panel.If you find layout troublesome, use TableLayoutPanel.

Rishabh aggarwal 40

@KOZ6.0 , i though that it would create problems for me in placing the labels and lines in appropriate places in the form . so i decided to create a usercontrol . doesn't know if it is a good idea or not . moving on . below is the code I tried but it generates only one bold line not the slim one . Also i found that controls inside tablelayout behave just like we are dragging controls on old asp.net web forms . they just stuck to left side . After hours , i just managed to middle the date label . Another problem is regarding the position of lines .

    private void UserControl1_Paint(object sender, PaintEventArgs e)
        {
            int topBorderThickness = 3; // Set the thickness of the top border  //
            int bottomBorderThickness = 1; // Set the thickness of the bottom border//
            // Create a Graphics object
            Graphics g = e.Graphics;


            // Create a Pen with a bold line
            using (Pen boldPen = new Pen(Color.Black, topBorderThickness))
            {
                // Create a Pen with slim lines
                using (Pen slimPen = new Pen(Color.Black, bottomBorderThickness))
                    g.DrawLine(slimPen, 50, 200, 250, 200);

                g.DrawLine(boldPen, 50, 200, 250, 200);

            }
        }

Accepted answer

0 additional answers

Your answer

KOZ6.0 6,655 Reputation points

2023-11-10T00:57:45.8233333+00:00

There's no need to think too hard. Just draw a rectangle with slim lines and draw a bold line.
For text, simply place the label on top of the panel.If you find layout troublesome, use TableLayoutPanel.
Rishabh aggarwal 40 Reputation points

2023-11-10T07:08:17.9666667+00:00

@KOZ6.0 , i though that it would create problems for me in placing the labels and lines in appropriate places in the form . so i decided to create a usercontrol . doesn't know if it is a good idea or not . moving on . below is the code I tried but it generates only one bold line not the slim one . Also i found that controls inside tablelayout behave just like we are dragging controls on old asp.net web forms . they just stuck to left side . After hours , i just managed to middle the date label . Another problem is regarding the position of lines .

private void UserControl1_Paint(object sender, PaintEventArgs e) { int topBorderThickness = 3; // Set the thickness of the top border // int bottomBorderThickness = 1; // Set the thickness of the bottom border// // Create a Graphics object Graphics g = e.Graphics; // Create a Pen with a bold line using (Pen boldPen = new Pen(Color.Black, topBorderThickness)) { // Create a Pen with slim lines using (Pen slimPen = new Pen(Color.Black, bottomBorderThickness)) g.DrawLine(slimPen, 50, 200, 250, 200); g.DrawLine(boldPen, 50, 200, 250, 200); } }

Answer 1

Hi @Rishabh aggarwal , Welcome to Microsoft Q&A, You can use borderline and flowlayoutpanel to achieve your needs. Then put the label in it. The simplified code is as follows:

using System.Windows.Forms;

namespace _11_10_x
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            InitializeCustomComponents();
        }
        private void InitializeCustomComponents()
        {
            //Create panel
            Controls.Add(new Panel
            {
                BorderStyle = BorderStyle.None,
                Dock = DockStyle.Fill,
                Controls =
{
     // top border
     new Label
     {
         BackColor = System.Drawing.Color.Black,
         Dock = DockStyle.Top,
         Height = 1
     },
     // FlowLayoutPanel
     new FlowLayoutPanel
     {
         Dock = DockStyle.Top,
         Height = 30,
         FlowDirection = FlowDirection.LeftToRight,
         Padding = new Padding(10),
         Controls =
         {
             // tag 1
             new Label
             {
                 Text = "Label 1",
                 Anchor = AnchorStyles.Top
             },
             // tag 2
             new Label
             {
                 Text = "Label 2",
                 Anchor = AnchorStyles.Top
             },
             // tag 3
             new Label
             {
                 Text = "Tag 3",
                 Anchor = AnchorStyles.Top
             }
         }
     },
     // bottom border
     new Label
     {
         BackColor = System.Drawing.Color.Black,
         Dock = DockStyle.Top,
         Height = 3
     }
}
            });
        }
    }
}

enter image description here

Best Regards,

Jiale

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

Panel having label position and border issue

0 additional answers

Your answer