Arrow Keys with Pivot Page in app with a Navigation Menu don't initially work

Question

I know you want to see code, but the easiest way to show this problem is to create a new project after installing the new Windows Template Studio Extension. Note: if you create a project with a Navigation menu another way, the problem still exists.

I created a new Windows Template Studio Project named "Test".

For "Project Type": choose Navigation Pane (default).

For "Framework": choose Code Behind (default).

After clicking "Next"

For "Pages (9) - Add Multiple" : choose Tabbed, keep default name "Tabbed".

Click the "Create" button.

Run the project and navigate to the "Tabbed" page.

Use the Right and Left Arrow keys: nothing happens (Item 1 doesn't change to Item 2).

If you click on a PivotItem Header, or on the blank page first the arrow keys will then work.

Note if you use the "Tab" key it will select and underline the first PivotItem Header and the arrow keys will also work.

The Microsoft News app is an example of a Pivot page and Navigation menu working correctly.

Answer 1

This is most likely because when you first navigate to the Tabbed page, the Pivot control is not on focus. So you can try setting it whenever it's first loaded.

public MainPage()
{
    InitializeComponent();

    MyPivot.Loaded += (s, e) => MyPivot.Focus(FocusState.Programmatic);
}