如何设置UWP应用中键盘Tab导航边框不覆盖其他UI？

嘿，这个问题我之前也踩过坑！UWP默认的控件焦点视觉元素其实是放在独立的Popup容器里的——这就是为啥它总能飘在UI最上层，完全不受宿主控件的ZIndex影响，哪怕控件本身被其他元素挡住，焦点边框照样能透出来。

要解决这个，咱们得把焦点边框整合到控件本身的视觉树里，替换掉系统默认的Popup实现。具体操作就是自定义控件模板，把焦点边框做成控件内部的一个元素，这样它就会和控件共享同一个ZIndex层级，被遮挡时也会跟着被挡住。

举个Button的例子，自定义模板实现需求 #

先复制Button的默认模板（可以在Blend里右键控件选“编辑模板”→“编辑副本”快速生成），然后修改焦点视觉的部分：

<Style TargetType="Button">
    <Setter Property="CornerRadius" Value="4"/>
    <Setter Property="Padding" Value="8,4"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                    <!-- 原有的内容展示元素 -->
                    <ContentPresenter x:Name="ContentPresenter"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      Margin="{TemplateBinding Padding}"
                                      AutomationProperties.AccessibilityView="Raw"/>
                    
                    <!-- 自定义焦点边框：替换默认的Popup，放在控件内部 -->
                    <Border x:Name="FocusVisualElement"
                            IsHitTestVisible="False"
                            Opacity="0"
                            BorderBrush="{ThemeResource SystemControlForegroundAccentBrush}"
                            BorderThickness="2"
                            CornerRadius="{TemplateBinding CornerRadius}"/>

                    <VisualStateManager.VisualStateGroups>
                        <!-- 保留原有的普通状态（Normal/PointerOver/Pressed/Disabled） -->
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        
                        <!-- 修改焦点状态的动画，控制自定义边框的显示 -->
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused"/>
                            <VisualState x:Name="PointerFocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

关键逻辑说明 #

• 我把原来默认的Popup类型的FocusVisualElement换成了控件内部的Border，这个Border属于Button的视觉树一部分，会完全继承Button的ZIndex层级。
• 通过FocusStates里的动画控制边框的透明度，获得焦点时显示，失去焦点时隐藏。
• 因为边框和Button的内容在同一个Grid里，当Button被其他元素（比如一个覆盖在它上面的Rectangle）遮挡时，焦点边框也会被同步挡住，完美符合你的需求。

ToggleButton的适配思路 #

ToggleButton继承自ButtonBase，模板结构和Button几乎一致，你只需要把Style的TargetType改成ToggleButton，然后保留它特有的Checked/Indeterminate等视觉状态即可，焦点边框的修改逻辑完全一样。

额外提醒 #

别想着用FocusVisualPrimaryThickness这类系统属性来改——这些属性只是修改默认Popup焦点视觉的样式，本质还是用Popup，解决不了ZIndex的问题，必须自定义模板才行。

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