Question

I’m having issues with keyboard navigation in my wpf application.
Simplified I have a horizontal stackpanel with a list of menu items which takes up about a quater of the width of the screen.

Directly under that I have a content control that takes the entire width of the screen.

The content control will change the loaded usercontrol based on the menu item highlighted. All the user controls are setup in the form of

<Grid>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" />
        <Grid Grid.Column="1" />
    </Grid>
</Grid>

The problem is that when I press the down key from the stackpanel it attempts to give focus to the inner grid column directly below it. The first column contains focusable items but the second does not.
This works fine for the first couple of menu items in the stackpanel that are directly above the first column but eventually I get to menu items that are directly over the second column and at this point I am unable to navigate down.

I added the outer grid as shown in the above xaml but this did not help. Why does the focus not move to the first focusable element available in the grid (or inner grid) and how can I force focus into column 1?

I guess I can do this in my viewmodel but I have a significant number of pages all suffering from similar issues so was hoping for an easier solution than having to completely rewrite and control all keyboard navigation.

Any help would be greatly appreciated.

UPDATE: If I set focuasable to true on the first grid the navigation works and ends up in column 1 but obviously the first press of key down “Appears” to do nothing as focus is being given to a grid. I want a similar behaviour but for the navigation to jump the grid straight into column 1.

Answer 1

No answers to this question so I’ll post my solution. I’m still not happy with it as it seems a bit of a hack but until something better comes along…..
As mentioned above the keyboard navigation seems to work with a grid around it but I don’t want the grid to have focus.
What I’ve done is create a custom control that extends grid.
I override getting keyboard focus then look at the uielement that last had focus and check it is outside the grid (I.E I am navigating into the grid).
If that is the case then I look at what direction the focus is likely to have come from. I say likely as PredictFocus could come from an up and a left key press for example, which is why I think this solution is a little hacky.
If a direction is found then I simply move focus once again in that direction. Focusable must be true on the grid for this to work.

protected override void OnGotKeyboardFocus(KeyboardFocusChangedEventArgs e)
    {
        UIElement previousFocus = (UIElement)e.OldFocus;
        if (previousFocus != null)
        {
            if (!previousFocus.IsDescendantOf(this))
            {
                if (previousFocus.PredictFocus(FocusNavigationDirection.Up).Equals(this))
                {
                    this.MoveFocus(new TraversalRequest(FocusNavigationDirection.Up));
                }
                else if (previousFocus.PredictFocus(FocusNavigationDirection.Down).Equals(this))
                {
                    this.MoveFocus(new TraversalRequest(FocusNavigationDirection.Down));
                }
                else if (previousFocus.PredictFocus(FocusNavigationDirection.Left).Equals(this))
                {
                    this.MoveFocus(new TraversalRequest(FocusNavigationDirection.Left));
                }
                else if (previousFocus.PredictFocus(FocusNavigationDirection.Right).Equals(this))
                {
                    this.MoveFocus(new TraversalRequest(FocusNavigationDirection.Right));
                }
            }
        }
        base.OnGotKeyboardFocus(e);
    }