Place a grid of labels on a form

Question

I'm trying to place a grid of labels on my winforms app. First, I'm populating a list of label objects of size (200 x 50) and then trying to place them so that when x reaches the width of the form (581), I increment y by 50 + 1

Here is my code:

private List<Label> _labels;
    private int xOffset = 10;
    private int yOffset = 10;

    public Form1()
    {
        InitializeComponent();

        _labels = new List<Label>();
        for(var i = 0; i <= 20; i++)
            _labels.Add(new Label() { Name = "lbl" + i, Height = 50, Width = 200, MinimumSize = new Size(200, 50), BorderStyle = System.Windows.Forms.BorderStyle.Fixed3D, Text = "Label "+i});

        // 581, 517
        var x = 0;
        var y = 0;

        foreach (var lbl in _labels)
        {
            if (x >= 580)
            {
                x = 0;
                y = y + lbl.Height + 2;
                lbl.Location = new Point(x, y);
            }

            this.Controls.Add(lbl);
            x += x + lbl.Width;
        }
    }

It's only placing the even labels from the list on new lines. I'm not sure what I'm doing wrong.

I'm trying to place all of the labels in a grid like design. When one row is full, go to the next row and continue placing labels from the list on that new "row"

Sorry, I forgot to add that part. See my edit. I'm trying to draw all of them on the form in a grid (so rows and columns) — user, Sep 20 '14 at 15:03
why you dont use the FlowLayoutPanel and set the Orientation to Horizental?? — Mehdi Khademloo, Sep 20 '14 at 15:07
I'm sure all Labels get added, but some may sit on top of each other.. — TaW, Sep 20 '14 at 15:10
Right now the list is set to 20 for testing, I wont know how many labels will be in the list when I start using the real data. — user, Sep 20 '14 at 15:12

score 1 · Answer 1 · edited Sep 20 '14 at 17:58

1

The problematic part is here

x += x + lbl.Width; //+= x

change it to

x += lbl.Width;

Get the

lbl.Location = new Point(x, y);

out of the if statement

if (x >= 580)
  {
        x = 0;
        y = y + lbl.Height + 2;
        //lbl.Location = new Point(x, y);
  }
  lbl.Location = new Point(x, y);
  this.Controls.Add(lbl);
  x += lbl.Width;

edited Sep 20 '14 at 17:58

John Saunders

160,644
26
247
397

answered Sep 20 '14 at 15:06

γηράσκω δ' αεί πολλά διδασκόμε

7,172
2
21
35

Now it's just drawing 0, 3, 6, 9, 12, 15, 18 – user Sep 20 '14 at 15:07

score 1 · Accepted Answer · answered Sep 20 '14 at 15:16

1

You need to move the Location setting code out of the resetting loop:

    foreach (var lbl in _labels)
    {
        if (x >= 580)
        {
            x = 0;
            y = y + lbl.Height + 2;
       }

         lbl.Location = new Point(x, y);
         this.Controls.Add(lbl);
        x +=  lbl.Width;
    }

answered Sep 20 '14 at 15:16

TaW

53,122
8
69
111

yup, it's a rat race ;-) – TaW Sep 20 '14 at 15:20
Wow, I didn't realize that. That's exactly what I was looking for! I didn't want to use a FlowLayoutPanel or TableLayoutPanel – user Sep 20 '14 at 15:20

score 0 · Answer 3 · answered Sep 20 '14 at 15:13

Try this using a Docked FlowLayoutPanel:

public partial class Form1 : Form
{
    List<Label> labels;
    public Form1()
    {
        InitializeComponent();

        this.labels=new List<Label>();

        AddLabelsToFrom(20);
    }

    void AddLabelsToFrom(int count)
    {
        for (int i=0; i<count; i++)
        {
            var lbl=new Label() { Name="lbl"+i, Height=50, Width=200, MinimumSize=new Size(200, 50), BorderStyle=System.Windows.Forms.BorderStyle.Fixed3D, Text="Label "+i };
            labels.Add(lbl);
            flowLayoutPanel1.Controls.Add(lbl);
        }
    }
}

SCR

score 0 · Answer 4 · answered Sep 20 '14 at 15:19

void SetGridLabel()
{
    for (int i = 0; ; i++)
    {
        for (int j = 0; ; j++)
        {
            Label L = new Label();
            L.TextAlign = ContentAlignment.MiddleCenter;
            L.AutoSize = false;
            L.Size = new Size(70, 70);
            L.Text = "Test_" + j + "_" + i;
            L.Location = new Point(j * L.Size.Width, i * L.Size.Height);

            if ((i + 1) * L.Size.Height > this.Size.Height)
                return;
            if ((j + 1) * L.Size.Width > this.Size.Width)
                break;
            this.Controls.Add(L);
        }

    }

}

enter image description here

score 0 · Answer 5 · answered Sep 20 '14 at 15:31

 private List<Label> _labels;
    public Form1()
    {
        InitializeComponent();

        _labels = new List<Label>();
        for (var i = 0; i <= 20; i++)
            _labels.Add(new Label()
            {
                Name = "lbl" + i, Height = 50,Width = 200,
                Size = MinimumSize = new Size(200, 50),
                Location = new Point(i * 200 % 600, 50 * (i * 200 / 600)),
                BorderStyle = System.Windows.Forms.BorderStyle.Fixed3D,
                Text = "Label " + i
            });
        foreach (var lbl in _labels) this.Controls.Add(lbl);
    }

Place a grid of labels on a form

5 Answers5