Focus on TextBox in DataTemplate

Question

Hi,

I have DataTemplate containing TextBox. I'm setting this template to listbox item on a selection.

I'm unable to set focus to textbox in the template. I tried to call MyTemplate.FindName, but it ends with Invalid Operation Exception: This operation is valid only on elements that have this template applied.

How can I access it?

Answer 1

Since you know the name of the TextBox you want to focus, this becomes relatively easy. The idea is to get hold of the template as it's applied to the ListBoxItem itself.

First thing you want to do is get the selected item:

var item = listBox1.ItemContainerGenerator.ContainerFromItem(listBox1.SelectedItem) as ListBoxItem;

Then you can pass that into this little helper function which focuses a control based on its name:

public void FocusItem(ListBoxItem item, string name)
{
    if (!item.IsLoaded)
    {
        // wait for the item to load so we can find the control to focus
        RoutedEventHandler onload = null;
        onload = delegate
        {
            item.Loaded -= onload;
            FocusItem(item, name);
        };
        item.Loaded += onload;
        return;
    }

    try
    {
        var myTemplate = FindResource("MyTemplateKey"); // or however you get your template right now

        var ctl = myTemplate.FindName(name, item) as FrameworkElement;
        ctl.Focus();
    }
    catch
    {
        // focus something else if the template/item wasn't found?
    }
}

I guess the tricky bit is making sure you wait for the item to load. I had to add that code because I was calling this from the ItemContainerGenerator.StatusChanged event and sometimes the ListBoxItem hadn't been fully initialized by the time we entered the method.

Answer 2

Thank you,

your way is very interesting.

I implemented ItemContainerGenerator.StatusChanged and as you said, ListBoxItem isn't sometimes initialized.

Thank you very much.

Answer 3

i tried the above and get a null for "item" when i try this

var item = listBox1.ItemContainerGenerator.ContainerFromItem(listBox1.SelectedItem) as ListBoxItem;

Answer 4

I know this is old, but I ran across this issue today and in the end came up with this resolution:

Since the TextBox is only being loaded when an item is selected, and that is when you want focus to be set, you can simply handle the TextBox.Load event and call Focus().

There are two ways to achieve this.

1. Replace the TextBox in the DataTemplate with an AutoFocusTextBox.

public class AutoFocusTextBox : TextBox
{
    public AutoFocusTextBox()
    {
        Loaded += delegate { Focus(); }; 
    }
}

Don't forget you'll need to reference the namespace in which AutoFocusTextBox is defined in your .xaml file.

2. Add a handler in the codebehind of the file where the DataTemplate is defined.

SomeResourceDictionary.xaml

<TextBox Text="{Binding Something, Mode=TwoWay}" Style={StaticResource ...
        Loaded="FocusTextBoxOnLoad" />

SomeResourceDictionary.xaml.cs

    private void FocusTextBoxOnLoad(object sender, RoutedEventArgs e)
    {
        var textbox = sender as TextBox;
        if(textbox == null) return;
        textbox.Focus();
    }

With either option, you can always add other behaviour in the handler, such as selecting all text.

Answer 5

Jay's 2nd suggestion is neat - and can be more generalised by using UiElement rather than TextBox so that any control can easily be made the default:

private void FocusControlOnLoad(object sender, RoutedEventArgs e)
{
    var uiElement = sender as UiElement;
    if(uiElement == null) return;
    uiElement.Focus();
}