C# WPF – text box is not editable?

In my current work in the c#/WPF environment, I’ve had a need to create a new pop-out window with a load of text boxes and labels programmatically depending on a previous input. However, when I ran the code, the text boxes were not selectable, editable or changeable in any way. They just sat there, visible, but unchanging. Googling the problem did not reveal a solution which worked for me, perhaps mainly because the problem was caused by the control creation, but in the interest of learning from mistakes, I thought I’d post here what I’d done and how I fixed the problem of the text boxes not being changeable so that, should it happen in the future, there’s a reference post for it.

Creating controls dynamically

I wanted to create a number of labels and text boxes depending on a numerical input on a previous screen. For the purpose of this demonstration, we’ll say I was adding two elements. I used a for loop to create my components and add them to the window, like so:

private void CreateElements(int numOfElements)
{
    for(int x = 0; x < numOfElements; x++)
    {
        Label l = new Label();
        l.Content = "MyLabel_" + x.ToString();
        l.Margin = new Thickness(5, ((5 * x) + 5), 0, 0);
        GridName.Children.Add(l);

        Textbox t = new Textbox();
        t.Text = "MyBox_" + x.ToString();
        t.Margin = new Thickness(55, ((5 * x) + 5), 0, 0);
        GridName.Children.Add(t);
    }
}

This produced a number of labels and text boxes on the window, however, when trying to edit the text in the text box, it couldn’t be selected, even with ‘IsEnabled’ set to true and ‘IsReadOnly’ set to false.

Set the width of things

To fix this, I realised that another component must be on top of the text box and stealing focus when clicked. Of course, with only two elements this was easy enough, but if you have more this might be tricky.

The way I would recommend debugging this if you have multiple elements is to either comment them out one by one until you have two which cause the conflict, or, assign a ‘mouse down’ event to each one (one by one) that gives you a pop-up message if it is clicked. Then click by your text box until you get the pop-up.

Anyway, moving back to the problem. I found the label control was taking the focus for most of the window. This was because it was spanning the width of the window. It seems that without a given width, the label control will span indefinitely (maybe someone reading this can confirm or deny that assumption in the comments?) and, despite being added before the text box, was capable of stealing mouse focus when attempting to focus on the text box.

By simply setting the width of the label control to the width it needed, it allowed the text box to be on top in its region, allowing it to be selectable and editable.

So, lesson learnt. If adding labels (or other controls) programmatically, make sure the width/height properties are set to avoid them potentially taking over the window!