How to create dynamically C# panels

Question

I create a contact manager. The user can already enter some and they are stored in a file and re-opened when the program is started. Each contact is an object of my Person class.

When launching the program (in Load()) I created a for loop until all contacts have been explored (contacts are stored when opened in a Person table)

So now I come to my problem:

I have a panel that is scrollable (I have enabled the option) and I would like every 50 pixels in height, that a new panel is created with name, first name, email and phone number of my contacts and a pictureBox.

Except, I would like to be able to do it dynamically instead of creating the same thing more than 50 times and repeating the same code 50 times

Because for the moment I have done this:

for(int i = 0; i < contacts.Count; i++) //Afficher les contacts
        {
            if(!panel_contact1.Visible)
            {
                panel_contact1.Visible = true;
                label_prenom_nom1.Text = contacts[i].Prenom + " " + contacts[i].Nom;
                label_email1.Text = contacts[i].mail;
                label_tel1.Text = contacts[i].tel;
                pictureBox1.Image = Image.FromFile(contacts[i].pathImage);

            }
            else if(!panel_contact2.Visible)
            {
                panel_contact2.Visible = true;
                label_prenom_nom2.Text = contacts[i].Prenom + " " + contacts[i].Nom;
                label_email2.Text = contacts[i].mail;
                label_tel2.Text = contacts[i].tel;
                pictureBox2.Image = Image.FromFile(contacts[i].pathImage);

            }
                    
        }

It's the code only for the first two contacts and I don't want to repeat it up to 100 times.

So my question is: How to create panels, with in each of the labels and a pictureBox, every 50px in a panel.

Thank you for reading, if you just have advice said always the same if you all have the code I'm a taker especially since I think it should be easy to do because the content of the labels are already dynamically teaching.

Thank you.

Answer 1

On WinForms, you can use this:

int x = 0;
int y = 0;
int delta = 10;
for ( int i = 0; i < contacts.Count; i++ )
{
  // Create picture box
  var picture = new PictureBox();
  picture.Image = Image.FromFile(contacts[i].pathImage);
  picture.Location = new Point(x, y);
  picture.Size = new Size(picture.Image.Width, picture.Image.Height);
  int dx = picture.Width + delta;
  // Create name label
  var labelName = new Label();
  labelName.AutoSize = true;
  labelName.Location = new Point(x + dx, y);
  labelName.Font = new Font(labelName.Font, FontStyle.Bold);
  labelName.Text = contacts[i].Prenom + " " + contacts[i].Nom;
  // Create mail label
  var labelMail = new Label();
  labelMail.AutoSize = true;
  labelMail.Location = new Point(x + dx, y + labelName.Height);
  labelMail.Text = contacts[i].mail;
  // Create phone label
  var labelPhone = new Label();
  labelPhone.AutoSize = true;
  labelPhone.Location = new Point(x + dx, y + labelName.Height + labelMail.Height);
  labelPhone.Text = contacts[i].tel;
  // Add controls
  panel.Controls.Add(picture);
  panel.Controls.Add(labelName);
  panel.Controls.Add(labelMail);
  panel.Controls.Add(labelPhone);
  // Iterate
  int dy1 = labelName.Height + labelMail.Height + labelPhone.Height;
  int dy2 = picture.Height;
  y += Math.Max(dy1, dy2) + delta;
}

But you may prefer create a custom control where you put a picture box and three labels designed as you want with colors, font size, bolding, margin, borderstyle and so on, with Height at 50.

Add new user custom control with Project > Add > User control and choose a file name like PersonControl.

public partial class PersonControl : UserControl
{
  public PersonControl()
  {
    InitializeComponent();
  }
  public PersonControl(Person person) : this()
  {
    pictureBox.Image = Image.FromFile(person.pathImage);
    labelName.Text = person.Prenom + " " + person.Nom;
    labelMail.Text = person.mail;
    labelPhone.Text = person.tel;
  }
}

int x = 0;
int y = 0;
for ( int i = 0; i < contacts.Count; i++ )
{
  var control = new PersonControl(contacts[i]);
  control.Location = new Point(x, y);
  panel.Controls.Add(control);
  y += control.Height;
}

You should take care of the file image size that must be the same for all and the same as the picture box else you need to manage that by resizing for example.

How to resize an Image C#

Answer 2

If you're using windows forms, create a user control with a constructor using the Person object, set the labels and picture boxes to the info of that person. In the main loop you posted, create a new instance of this and set it's position to 0, i * 50 to place it under the previous one.

Example:

for(int i = 0; i < contacts.Count; i++)
    {
      YourUserControl u1 = new YourUserControl(pass the person object);
      Panel1.Controls.Add(u1);
      u1.Location = new Point(0, i * 50);
    }

Answer 3

This depends on the display technolgy you are using (WinForms, WPF/UWP, ASP.NET, other).

In Windows Forms you just create the elements and add them to the container. The designer wroks on it's own part of the partial class. The designer code is run with InitializeComponents() in the constructor. Anything it can do, you can do. And you can easily look at it.

In WPF/UWP stuff is a bit more complicated. The designer does not work on code, but on XAML, a dedciated markup language. You are not supposed to manually add anything to the UI from the code. WPF/UWP and XAML were designed with the MVVM pattern in mind. And dealing with lists of things is what it does best. While you can use other patterns, generally that looses 90% of it's power and runs into issues at every other corner.

For ASP.Net it would depend on wich pattern you use. While not originally designed for it, MVC has been extremely popular with WebApplication. So much so, it is almost synonimous with WebApplications and ASP.NET. However this does not look like a web Application.