CODEWITHSUNDEEP
c#xamluwpfocus
Fernando Urkijo
Fernando Urkijo

Reputation: 3505

Limit tab navigation to a UI Element

I´m building a UWP app. I´m currently working making it more accessible so I´m only using it with the keyboard and navigating with the tab key.

Sometimes I show a UserControl with 2 buttons using all the screen, leaving the rest of the page elements at the background. But if I use tab to navigate to this 2 buttons, the focus quickly goes to the elements at the background and that´s what I´m trying to avoid.

I want tab to only focus on those 2 buttons from the user control I displayed.

I noticed that some framework elements like ContentDialog do this automatically, and I´d like the same behavior.

Any ideas on how can I limit the tab navigation inside a UserControl?

Upvotes: 3

Views: 1039

Answers (1)

André B
André B

Reputation: 1709

When you show the UserControl, you could trigger a modification on your layout by setting IsTabStop dependency property to false for the elements present in the background.

Either that or you can also disable the elements in the background, but that will also modify the appearance of the controls, something which might be undesired for your specific intentions.

  • In case there's a variety of elements which need to have its IsTabStop set to false, instead of defining an identifier attribute with x:Name and having to refer each single one in code-behind, I would suggest to loop through a Layout Children dependency property and modify the controls properties this way.

Update:

I had misunderstood your requirement completely. After re-reading, I understand what are your objectives, and those seem to be achievable based on the documentation!

Taking a look at Tab Navigation here and Control Group documentation, it is indicated that you can customize control navigation, by using the following properties of the API:

XYFocusKeyboardNavigation enables arrow key navigation between controls

TabFocusNavigation indicates whether there are multiple tab stops or single tab stop

FindFirstFocusableElement and FindLastFocusableElement sets focus on the first item with Home key and the last item with End key

Taking a look into the template, we see the following VisualState defined for the ContentDialog:

<VisualState x:Name="DialogShowing">
    <VisualState.Setters>
        <Setter Target="LayoutRoot.Visibility" Value="Visible" />
        <Setter Target="BackgroundElement.TabFocusNavigation" Value="Cycle" />
    </VisualState.Setters>
</VisualState>

This visual state occurs when the dialog is shown and it sets the TabFocusNavigation dependency property to Cycle meaning that all the children will receive focus once and the tab navigation will loop while the property is set this way.

In the links above the documentation is awesome and there's a graphical representation for each possible value that can be set for the TabFocusNavigation.

The reason why your UserControl was not working as expected, is because it's navigation behavior follows the conventions for the Local scenario.

Upvotes: 3

Related Questions