uwp xbox app XYNavigation in Pivot Control

Question

I am an experienced uwp developer but a beginner for uwp xbox platform. I am trying to set the XY Navigation for my app and trying to test it with keyboard (as I don't own a xbox myself).

I am using a Pivot view and I can easily navigate between the pivot items with right and left arrow keys, which makes sense. but when my settings page is selected with pivot option (settings pivot header is focused and settings pivot item is in view) then I try to shift my focus vertically downwards to the first control in the settings page (radio buttons) but I am not able to do it the focus remains on settings header and doesn't shift downward on the page.

So how can I shift the focus downwards from a pivot header to the 1st control within the page on pressing down, and vice versa i.e : when 1st control is focused I should move up to go back to the header of the pivot of that page, because I think that is the traditional navigation with pivot control on uwp xbox right?

Secondly the docs and the xbox app dev videos I watched recommended to set the focus on an element which makes sense, when the app loads, should that be done with this.Focus() method or is there a more efficient way to do it with xaml?

Code:

Pivot.xaml

<Grid x:Name="MainGrid">
    <Pivot x:Uid="PivotPage" x:Name="MainPivot" >
        <PivotItem x:Uid="PivotItem_OnNow">
            <Frame>
                <views:OnNowPage/>
            </Frame>
        </PivotItem>
        <PivotItem x:Uid="PivotItem_Guide">
            <Frame>
                <views:GuidePage/>
            </Frame>
        </PivotItem>
        <PivotItem x:Uid="PivotItem_Settings">
            <Frame>
                <views:SettingsPage/>
            </Frame>
        </PivotItem>
    </Pivot>
</Grid>

Settings.xaml

<Grid>
    <Grid Margin="{StaticResource MediumLeftRightMargin}">
        <Grid.RowDefinitions>
            <RowDefinition Height="48"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TextBlock
            Grid.Row="0"
            x:Uid="Settings_Title"
            x:Name="TitlePage"
            Style="{StaticResource PageTitleStyle}" />

        <StackPanel Grid.Row="1">
            <TextBlock
                x:Uid="Settings_Personalization"
                Style="{StaticResource SubtitleTextBlockStyle}" />

            <StackPanel Margin="{StaticResource SettingsSubheaderMargin}">
                <TextBlock
                    x:Uid="Settings_Theme"
                    Style="{StaticResource BodyTextStyle}" />

                <StackPanel Margin="{StaticResource EightTopMargin}">
                    <RadioButton
                        x:Uid="Settings_Theme_Light"
                        GroupName="AppTheme"
                        IsChecked="{x:Bind ViewModel.ElementTheme, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Light, Mode=OneWay}"
                        Command="{x:Bind ViewModel.SwitchThemeCommand}">
                        <RadioButton.CommandParameter>
                            <xaml:ElementTheme>Light</xaml:ElementTheme>
                        </RadioButton.CommandParameter>
                    </RadioButton>
                    <RadioButton
                        x:Uid="Settings_Theme_Dark"
                        GroupName="AppTheme"
                        IsChecked="{x:Bind ViewModel.ElementTheme, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Dark, Mode=OneWay}"
                        Command="{x:Bind ViewModel.SwitchThemeCommand}">
                        <RadioButton.CommandParameter>
                            <xaml:ElementTheme>Dark</xaml:ElementTheme>
                        </RadioButton.CommandParameter>
                    </RadioButton>
                    <RadioButton
                        x:Uid="Settings_Theme_Default"
                        GroupName="AppTheme"
                        IsChecked="{x:Bind ViewModel.ElementTheme, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Default, Mode=OneWay}"
                        Command="{x:Bind ViewModel.SwitchThemeCommand}">
                        <RadioButton.CommandParameter>
                            <xaml:ElementTheme>Default</xaml:ElementTheme>
                        </RadioButton.CommandParameter>
                    </RadioButton>
                </StackPanel>
            </StackPanel>

            <TextBlock
                    x:Uid="Settings_About"
                    Style="{StaticResource SubtitleTextBlockStyle}"/>

            <StackPanel Margin="{StaticResource EightTopMargin}">
                <TextBlock
                    Text="{x:Bind ViewModel.VersionDescription, Mode=OneWay}" />
                <TextBlock
                    x:Uid="Settings_AboutDescription"
                    Margin="{StaticResource EightTopMargin}" />

                <HyperlinkButton
                    x:Uid="Settings_PrivacyTermsLink"
                    Margin="{StaticResource EightTopMargin}" />
            </StackPanel>
        </StackPanel>
    </Grid>
</Grid>

Answer 1

The MSDN has listed several scenarios that XY navigation might not work the way you expect:

1. The IsTabStop or Visibility property is set wrong.
2. The control getting focus is actually bigger than you think—XY navigation looks at the total size of the control (ActualWidth and ActualHeight), not just the portion of the control that renders something interesting.
3. One focusable control is on top of another—XY navigation doesn't support controls that are overlapped.

If XY navigation is still not working the way you expect after fixing these issues, you can manually point to the element that you want to get focus using the method described in Overriding the default navigation.

Please first check these scenarios, after that, if you still could not solve this issue. Please provide a Minimal, Complete, and Verifiable example. I will help you diagnose it on my side.