C# User generated Label, that can be selected and its properties changed

Question

I am trying to develop a software for designing and generating batches of IDs for schools etc. On the design part, a user would be able to create any number of text fields, select them, drag them around and/or nudge them with the arrow keys and edit their properties like text, font, size, and location. What I am trying to achieve is a much simpler version of the Visual Studio form designer. Here is a screenshot of my UI

So far, I have created a User Control called 'UserLabel' that inherits the Label class (I like Label because I can set the background transparent). A new UserLabel can be created by clicking the 'Add Text' button and can be dragged around the picture box.

public partial class UserLabel : Label
{
    private System.Drawing.Point StartPoint;
    private bool IsMouseDown = false;

    public UserLabel()
    {
        InitializeComponent();
        this.Text = "New Item";
        this.AutoSize = true;
        this.BackColor = System.Drawing.Color.Transparent;
        this.Font = new System.Drawing.Font("Arial", 12);
        this.Location = new System.Drawing.Point(5, 5);
        this.Size = new System.Drawing.Size(50, 20);
    }

    protected override void OnMouseDown(System.Windows.Forms.MouseEventArgs e)
    {
        if (e.Button == System.Windows.Forms.MouseButtons.Left)
        {
            IsMouseDown = true;
            this.BringToFront();
            StartPoint = e.Location;
        }
    }

    protected override void OnMouseUp(System.Windows.Forms.MouseEventArgs e)
    {
        IsMouseDown = false;
    }

    protected override void OnMouseMove(System.Windows.Forms.MouseEventArgs e)
    {
        if (IsMouseDown)
        {
            this.Left = e.X + this.Left - StartPoint.X;
            this.Top = e.Y + this.Top - StartPoint.Y;
        }
    }
}

But since Label is not selectable, I have no clue how to proceed from here. I have tried adding a BorderStyle when the item is selected (see below) to give visual cues to the user which item is selected. But this does not achieve anything as far as being able to edit the properties. And I couldn't even manage to remove the BorderSyle to indicate a loss of focus.

protected override void OnMouseDown(System.Windows.Forms.MouseEventArgs e)
{
    if (e.Button == System.Windows.Forms.MouseButtons.Left)
    {
        IsMouseDown = true;
        this.BringToFront();
        StartPoint = e.Location;
        this.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;
    }
}

Can anyone please point me in the right direction as to how I can override the CanFocus property (or Selectable property, I have no clue) or any other suggestion on how to achieve this? I am also open to any other approach to achieve my goal.

NOTE: I have tried a different approach where there will be a set number of items that are hidden and can be set visible by user like this. But I don't like this as it is repetitive and even though 10 items seem plenty, I can never know if a user might need more than this.

Answer 1

You do not have to hide/show any static number of rows, it is a bad design choice. All you need is use a DataGridView and a Button to add rows to the DataGridView. This way users can type anything they want into your textboxes and select from combobox of the row whatever they want to choose, also use a submit button to push code to db/render it on ui wherever you want to. Sample code might look like this-

        private void button1_Click(object sender, EventArgs e)
    {
        DataGridViewColumn dataGridViewColumn = new DataGridViewColumn(new DataGridViewTextBoxCell()) ;
        this.dataGridView1.Columns.Add(dataGridViewColumn);
        DataGridViewColumn dataGridViewColumn2 = new DataGridViewColumn(new DataGridViewComboBoxCell());
        this.dataGridView1.Columns.Add(dataGridViewColumn2);
        
        DataGridViewRow dataGridViewRow = new DataGridViewRow();
        dataGridViewRow.Cells.Add(new DataGridViewTextBoxCell());
        this.dataGridView1.Rows.Add(new DataGridViewRow());
    }