在面板内的列中动态创建控件

Question

I have a panel where I create Labels and NumericUpDown fields dinamically like:

        List<string> Labels = new List<string>();
        public List<Label> DeliveryBreakdownLabelsModel = new List<Label>();
        public List<NumericUpDown> DeliveryBreakdownNumericUpDownModel = new List<NumericUpDown>();


    private void SetDeliveryBreakdownAmountForm_Load(object sender, EventArgs e)
        {
           var rModel = //List data from database
            AddRow(rModel);
            Arrange();
        }




      private void AddRow(IList<DeliveryBreakdownGetViewModel> rModel)
        {
            for (int i = 0; i < rModel.Count; i++)
            {
                Labels.Add(rModel[i].DesignGroupName);
                var label = new Label
                {
                    AutoSize = true, // make sure to enable AutoSize
                    Name = "label" + Labels.Count,
                    Text = rModel[i].DesignGroupName,
                    Location = new Point(12, YPos)
                };
                this.Controls.Add(label);
                pnlDeliveryBreakdown.Controls.Add(label);
                DeliveryBreakdownLabelsModel.Add(label);


                var numericUpDown = new NumericUpDown
                {
                    Name = "numericUpDown" + Labels.Count,
                    Text = rModel[i].ContractedAmount.ToString(),
                    Location = new Point(12, YPos),
                    Size = new Size(60, 19),
                    DecimalPlaces = 2,
                    Maximum = decimal.MaxValue
                };
                this.Controls.Add(numericUpDown);
                this.Controls.Add(numericUpDown);
                pnlDeliveryBreakdown.Controls.Add(numericUpDown);
                DeliveryBreakdownNumericUpDownModel.Add(numericUpDown);


                YPos += 25;
            }
        }





         void Arrange()
        {
            // Determine the widest label sized by the AutoSize 
            var maxLabelX = 0;
            for (int i = 0; i < Labels.Count; i++)
            {
                maxLabelX = Math.Max(maxLabelX, DeliveryBreakdownLabelsModel[i].Location.X + DeliveryBreakdownLabelsModel[i].Size.Width);
            }

            // Move all the text boxes a little to the right of the widest label
            var maxNumericX = 0;
            for (int i = 0; i < Labels.Count; i++)
            {
                maxNumericX = Math.Max(maxNumericX, DeliveryBreakdownNumericUpDownModel[i].Location.X + DeliveryBreakdownNumericUpDownModel[i].Size.Width);
                DeliveryBreakdownNumericUpDownModel[i].Location = new Point(maxLabelX + 10, DeliveryBreakdownNumericUpDownModel[i].Location.Y);
            }

            //Set total wi
            this.Width = maxNumericX + maxLabelX + 60;
        }

So it looks like:

My question is, how can I modify my code in order to create more than one column. I want to do that because sometimes I can have alot of data so shows only in vertical may be a problem in future. Expected result: IE

Answer 1

I suggest using a TableLayoutPanel with a UserControl that contains exactly one label and one numeric box.

Even in the designer, this looks neat.

All you have to do is expose the properties you want from the numeric box in your user control.

In the example above, I am using the following code:

// Fixed height user control
// Some code taken from: https://stackoverflow.com/a/4388922/380384
[Designer(typeof(MyControlDesigner))]
public partial class LabelNumeric : UserControl
{
    public LabelNumeric()
    {
        InitializeComponent();
    }

    protected override void SetBoundsCore(int x, int y, int width, int height, BoundsSpecified specified)
    {
        base.SetBoundsCore(x, y, width, 24, specified);
    }
    [DefaultValue("Label")]
    public string Caption
    {
        get => label1.Text;
        set => label1.Text = value;
    }
    [DefaultValue(0)]
    public decimal Value
    {
        get => numericUpDown1.Value;
        set => numericUpDown1.Value =value;
    }
    [DefaultValue(0)]
    public int DecimalPlaces
    {
        get => numericUpDown1.DecimalPlaces;
        set => numericUpDown1.DecimalPlaces = value;
    }
    [DefaultValue(100)]
    public decimal MaxValue
    {
        get => numericUpDown1.Maximum;
    }
    [DefaultValue(0)]
    public decimal MinValue
    {
        get => numericUpDown1.Minimum;
    }
}
internal class MyControlDesigner : ControlDesigner
{
    MyControlDesigner()
    {
        base.AutoResizeHandles = true;
    }
    public override SelectionRules SelectionRules
    {
        get
        {
            return SelectionRules.LeftSizeable | SelectionRules.RightSizeable | SelectionRules.Moveable;
        }
    }
}

You can access all the controls from the tableLayoutPanel1.Controls property and check their position in the table like this:

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);

        foreach (var item in tableLayoutPanel1.Controls.OfType<LabelNumeric>())
        {
            var pos = tableLayoutPanel1.GetCellPosition(item);
            item.Caption = $"Row{pos.Row}Col{pos.Column}";
        }
    }
}

So at runtime it is as follows:

The trick is to have one extra row on the bottom autosized, and all the other rows that contain the controls be of fixed height of 24pt .