Xbox平台UWP应用XYFocus控制游戏手柄导航异常如何解决

问题原因 #

UWP的XY焦点导航默认会检索视觉树中所有可聚焦的元素作为候选，你遇到的跳转异常是因为TabView顶部的标签头本身属于可聚焦控件，视觉位置比btn1更靠左，导航时会被系统判定为更优的匹配目标，覆盖了你给按钮设置的XYFocus属性。

解决方案 #

按以下步骤修改代码即可解决：

• 给TabViewItem内直接嵌套的根Grid添加XYFocus.NavigationScope="True"属性，将Tab内容区域标记为独立的焦点导航范围，范围内的导航操作不会向外溢出到TabView头部标签。
• 给TabView控件添加IsTabStop="False"，如果不需要在内容区域操作时切换标签，可以额外添加XYFocus.NavigationModes="Disabled"彻底禁止内容区域的焦点导航到Tab头部。
• 如果你使用的是WinUI 2.x版本，将XYFocus绑定的{x:Bind 控件名}替换为{Binding ElementName=控件名}，避免旧版本x:Bind绑定不生效的兼容性问题。

修改后的核心代码示例 #

<uicontrols:TabView x:Name="TabView" IsTabStop="False">
    <uicontrols:TabViewItem Header="1"></uicontrols:TabViewItem>
    <uicontrols:TabViewItem Header="2">
        <!-- 给内容根Grid添加导航范围标记 -->
        <Grid XYFocus.NavigationScope="True">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Button x:Name="btn1" 
                    Grid.Column="0" 
                    Content="1" 
                    XYFocusRight="{Binding ElementName=btn2}"
                    XYFocusRightNavigationStrategy="Projection"/>
                <Button x:Name="btn2" 
                    Grid.Column="1" 
                    Content="2"
                    XYFocusLeft="{Binding ElementName=btn1}"
                    XYFocusRight="{Binding ElementName=btn3}"
                    XYFocusLeftNavigationStrategy="Projection"
                    XYFocusRightNavigationStrategy="Projection"/>
                <Button x:Name="btn3" 
                    Grid.Column="2" 
                    Content="3"
                    XYFocusLeft="{Binding ElementName=btn2}"
                    XYFocusDown="{Binding ElementName=lv}"
                    XYFocusRight="{Binding ElementName=lv}"
                    XYFocusLeftNavigationStrategy="Projection"
                    XYFocusDownNavigationStrategy="Projection"/>                     
            </Grid>
            <ListView x:Name="lv"></ListView>
        </Grid>
    </uicontrols:TabViewItem>
    <uicontrols:TabViewItem Header="3"></uicontrols:TabViewItem>
    <uicontrols:TabViewItem Header="4"></uicontrols:TabViewItem>
</uicontrols:TabView>

内容的提问来源于stack exchange，提问作者bex