In UWP, how to skip tab key navigation for an UserControl and all of its child element?

Question

In UWP, I want to handle and skip the tab key navigation for particular set of controls dynamically.

For e.g., I've two user controls (Both have lot of children which will be added dynamically) in my main page and want to skip tab key navigation for one usercontrol dynamically on specific scenario for a moment.

So I've tried to set "IsTabStop" as false to that UserControl. But which is not effective on its child controls. Still tab key focus moved inside the children of that UserControl.

Note: If I set "IsEnabled" as false, then its working. But I don't want to use because it affects Visual appearance.

Thanks in advance.

Answer 1

There is no IsTabStop property in StackPanel class. The IsTabStop property is defined in Windows.UI.Xaml.Controls.Control class, and the StackPanel class is not inherited from Control class, either directly or indirectly. You can not use IsTabStop property to set a StackPanel instance.

Therefore, if you want to skip tab key navigation for one stackpanel, you need to set the IsTabStop property to False in each control in the stackpanel.

Update:

By testing, the child elements in a UserControl can not inherit the value of IsTabStop property. Therefore, you cannot skip tab key navigation for all the child elements in a UserControl by setting the IsTabStop property to False.

You could use a method defind in your UserControl class to set IsTabStop to false for every item in your UserControl.

For example:

MyUserControl.cs

public void SetIsTabStop(bool flag)
{
    var result = VisualTreeFindAll<Control>(this);
    foreach (var item in result)
    {
        item.IsTabStop=flag;
    }
}
private IList<T> VisualTreeFindAll<T>(DependencyObject element)
            where T : DependencyObject
{
    List<T> retValues = new List<T>();
    var childrenCount = VisualTreeHelper.GetChildrenCount(element);
    for (var i = 0; i < childrenCount; i++)
    {
        var child = VisualTreeHelper.GetChild(element, i);
        var type = child as T;
        if (type != null)
        {
            retValues.Add(type);
        }
        retValues.AddRange(VisualTreeFindAll<T>(child));
    }
    return retValues;
}

Use the name of a UserControl instance to call the SetIsTabStop(bool flag) method with False.

userControlName.SetIsTabStop(false);

Update:

Maybe you could try the following workaround.

Add the KeyDown event handler for the UserControl in your Page.

 private void UserControl_KeyDown (object sender, KeyRoutedEventArgs e)
    {
        if (e.Key == Windows.System.VirtualKey.Tab)
        {
            e.Handled = true;
            button1.Focus(FocusState.Keyboard);
        }
    }

You need to let the first control except the UserControl and all its child controls get the focus, then the key navigation will skip the child controls in the UserControl except the first child control in the UserControl.