How to create MaterialSingleLineTextField Controls dynamically

I would like to add MaterialSingleLineTextField dynamically to a Form.
I have used MaterialSkin NuGet package:

enter image description here

I am trying to create multiple MaterialSkin TextBoxes dynamically on Form.Load. But no Controls are displaying in the hosing Panel.

private void Form1_Load(object sender, EventArgs e)
{
    
    int n = 5;

    int pointX = 30;
    int pointY = 40;
    //panel1.Controls.Clear();
    for (int i = 0; i < n - 1; i++)
    {
        MaterialSingleLineTextField a = new MaterialSingleLineTextField();
        a.Text = (i + 1).ToString();
        a.Visible = true;
        a.Location = new Point(pointX, pointY);
        panel1.Controls.Add(a);
        panel1.Show();
        pointY += 20;
    }
}

This code block works perfectly fine for normal TextBoxes.
Is there any way to add MaterialSingleLineTextField dynamically?

Answer

A sample Form initialization with default Theme values.

  • The MaterialSkinManager is initialized in the Form Constructor, setting the Theme to MaterialSkinManager.Themes.LIGHT and default color scheme. The Form base Type is set to MaterialForm.
  • A specified number of MaterialSingleLineTextField controls is added to a parent container (a Panel), starting from a defined Location downwards. These Controls are anchored to the parent and the Height is set to Parent.Font.Height + 4.
    • It’s important that you specify the Size of these Controls, otherwise you’ll get a minimal size that prevents the Controls from showing their content.
  • As you can see in the AddTextFields() method, it’s important that you dispose of the previous Controls added to the Parent container, if you want to replace the existing with new ones. Even more important using this Library.
    Calling the Clear() method of a Control.Controls collection (as in the line you have commented out) doesn’t dispose of anything, those controls are still alive.
public partial class Form1 : MaterialForm
{
    private readonly MaterialSkinManager msManager = null;

    public Form1()
    {
        InitializeComponent();
        msManager = MaterialSkinManager.Instance;
        msManager.AddFormToManage(this);
        msManager.Theme = MaterialSkinManager.Themes.LIGHT;
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        AddTextFields(panel1, 5, new Point(30, 10), false);
    }

    private void AddTextFields(Control parent, int controlsCount, Point startPosition, bool ClearExisting)
    {
        if (clearExisting && parent.Controls.Count > 0) {
            for (int i = parent.Controls.Count - 1; i >= 0; i--) {
                parent.Controls[i].Dispose();
            }
        }

        int controlHeight = parent.Font.Height + 4;
        int yIncrement = 0;

        for (int i = 0; i < controlsCount; i++) {
            var textField = new MaterialSingleLineTextField() {
                Text = (i + 1).ToString(),
                Size = new Size(parent.ClientSize.Width - startPosition.X - 4, controlHeight),
                Location = new Point(startPosition.X, startPosition.Y + yIncrement),
                Anchor = AnchorStyles.Left | AnchorStyles.Top | AnchorStyles.Right
            };
            parent.Controls.Add(textField);
            yIncrement += (controlHeight + 10);
        }
    }

    private void matBtnChangeTheme_Click(object sender, EventArgs e)
    {
        msManager.Theme = MaterialSkinManager.Themes.DARK;
        msManager.ColorScheme = new ColorScheme(Primary.Blue600, Primary.Blue900, Primary.Blue500, Accent.LightBlue200, TextShade.WHITE);
    }

    private void matBtnAddControls_Click(object sender, EventArgs e)
    {
        AddTextFields(panel1, 7, new Point(30, 10), true);
    }
}

Sample functionality:

MaterialSkin Sample

Leave a Reply

Your email address will not be published. Required fields are marked *