Organize a pair of label-textbox within a FlowLayoutPanel

Question

I am trying to programmatically organize from top to down a pair of label-textbox using a flowlayoutpanel. What I am trying to get is similar to the following image:

modscan example

so I have implemented below code (I need to create 254 label-textbox pair):

Dim lbl As Label
Dim txt As TextBox
Dim flowLayout As FlowLayoutPanel

For i As Integer = 0 To 253
    lbl = New Label
    lbl.Text = i.ToString("000") + ":"
    lbl.Padding = New Padding(0)
    lbl.Margin = New Padding(0)

    txt = New TextBox
    txt.Text = "<" + i.ToString.PadLeft(3, " ") + ">"
    txt.MaxLength = 5
    txt.Margin = New Padding(0)
    txt.Size = New Size(39, 20)

    flowLayout = New FlowLayoutPanel
    flowLayout.FlowDirection = FlowDirection.LeftToRight
    flowLayout.Controls.Add(lbl)
    flowLayout.Controls.Add(txt)
    flowLayout.Padding = New Padding(0)
    flowLayout.Margin = New Padding(0)

    Me.FlowLayoutPnl.Controls.Add(flowLayout)
Next

but using above code I am getting below:

my flowlayoutpanel

Any ideas?

Set the Height of the FLP you create to 24 or so. You probably need to enable AutoScroll on a panel or maybe the form because 254 take a lot of room. You might also try a TableLayoutPanel in place of the FLP created in code and set some sizes and alignment — Ňɏssa Pøngjǣrdenlarp, Mar 06 '16 at 23:35

Saeid · Answer 1 · 2016-03-07T00:26:48.090

1

If I understand what you're looking for, this code should give you expected result.

    Dim flowLayout As New FlowLayoutPanel
    flowLayout.AutoScroll = True

    For i = 0 To 253
        Dim label As New Label
        label.AutoSize = True
        label.Padding = New Padding(10, 5, 5, 10)
        label.Text = i.ToString("000 ") + ":"

        Dim txt As New TextBox
        txt.Text = "Input " + i.ToString
        txt.MaxLength = 5

        flowLayout.Controls.Add(label)
        flowLayout.Controls.Add(txt)
    Next

    Controls.Add(flowLayout)
    flowLayout.Dock= DockStyle.Fill

This is what I get when I run this code:

By the way, the desired picture you posted shows a pair of labels, not label/TextBox. About the code, you have to create the main container (FlowLayoutPanel) first, then while you make itterationm you have to add each element to your container. Finally, you need to add the FlowLayoutPanel to your form controls to be shown on the form.

edited Mar 07 '16 at 00:26

answered Mar 06 '16 at 23:48

Saeid

1,573
3
19
37

Your code puts txt under label. I want txt next to label. – Willy Mar 07 '16 at 00:21
I just uploaded a screenshot. I think it shows what you exactly explained. – Saeid Mar 07 '16 at 00:27
It's weird, I have copied exactly your code and I am not getting this result. In my case flowlayoutpanel (in your code, flowlayout) is created in design time, not in run time, maybe this is affecting... I know what is the problem, you organize from left to right, and I am organizing from top to down, so your code in case of top to down is not working, only from left to right. – Willy Mar 07 '16 at 00:45
In your original code, you instantiated a FlowLayoutPanel on each iteration and added a new instance to your main FlowLayoutPanel. I think this is redundant. All you need to do is add each control to your main FlowLayoutPanel and set the FlowDirection to LeftToRight. Anyhow, I hope it helps. – Saeid Mar 07 '16 at 01:10

Willy · Answer 2 · 2016-03-07T09:18:03.883

I have solved it by using below code:

Private Sub PopupForm_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
Handles Me.Load
    Dim lbl As Label
    Dim txt As TextBox
    Dim flowLayout As FlowLayoutPanel
    Dim g As Graphics


    For i As Integer = 0 To 253
        lbl = New Label
        lbl.Text = i.ToString("000") + ":"
        lbl.Anchor = AnchorStyles.None
        lbl.AutoSize = True


        txt = New TextBox
        txt.Text = "<" + i.ToString.PadLeft(3, " ") + ">"
        txt.MaxLength = 5
        txt.Anchor = AnchorStyles.None
        txt.ReadOnly = True
        g = txt.CreateGraphics
        txt.Width = g.MeasureString(txt.Text, txt.Font).Width + 5
        g.Dispose()

        flowLayout = New FlowLayoutPanel
        flowLayout.FlowDirection = FlowDirection.LeftToRight
        flowLayout.AutoSize = True
        flowLayout.Anchor = AnchorStyles.None
        flowLayout.Margin = New Padding(0)
        flowLayout.Padding = New Padding(0)

        flowLayout.Controls.Add(lbl)
        flowLayout.Controls.Add(txt)

        Me.FlowLayoutPnl.Controls.Add(flowLayout)
    Next
End Sub

and the result is this

Notes:

My FlowLayoutPnl is created in design time with below properties (others to default):

AutoSize to true
AutoScroll to true
Dock to fill
FlowDirection to TopDown

Organize a pair of label-textbox within a FlowLayoutPanel

2 Answers2