如何移除WPF TabItem获焦时的默认蓝色背景？

我创建了一个包含两个TabItem的TabControl，并定义了名为newStyle的样式。现在遇到一个问题：未选中的TabItem获得焦点时，背景会出现蓝色（如图所示）。我尝试通过设置BorderBrush为透明来解决，但没有效果，相关代码如下：

<TabControl Style="{StaticResource newStyle}">
    <TabItem Header="Tab 1">
        <TabItem.Style>
            <Style TargetType="TabItem">
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter Property="BorderBrush" Value="Transparent"/>
                    </Trigger>
                    <Trigger Property="IsSelected" Value="false">
                        <Setter Property="BorderBrush" Value="Transparent"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TabItem.Style>
    </TabItem>
    <TabItem Header="Tab 2">
        <TabItem.Style>
            <Style TargetType="TabItem">
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter Property="BorderBrush" Value="Transparent"/>
                    </Trigger>
                    <Trigger Property="IsSelected" Value="false">
                        <Setter Property="BorderBrush" Value="Transparent"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TabItem.Style>
    </TabItem>
</TabControl>

newStyle 样式：

<Style TargetType="{x:Type TabControl}" x:Key="newStyle">
    <Setter Property="Background" Value="#FFFFFFFF" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="FontFamily" Value="Trebuchet MS" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition x:Name="ColumnDefinition0" />
                        <ColumnDefinition x:Name="ColumnDefinition1" Width="0" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" x:Name="RowDefinition0" />
                        <RowDefinition Height="*" x:Name="RowDefinition1" />
                    </Grid.RowDefinitions>
                    <Border Background="Transparent" CornerRadius="0,0,0,0" x:Name="border" Margin="5" Panel.ZIndex="1">
                        <TabPanel x:Name="HeaderPanel" IsItemsHost="true" Panel.ZIndex="1" KeyboardNavigation.TabIndex="1" Width="Auto" Height="Auto" Margin="4,0,0,0">
                        </TabPanel>
                    </Border>
                    <Border Grid.Row="1" x:Name="ContentPanel" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" >
                        <ContentPresenter Margin="4" x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" />
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="TabStripPlacement" Value="Bottom">
                        <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0" />
                        <Setter Property="Height" TargetName="RowDefinition0" Value="*" />
                        <Setter Property="Height" TargetName="RowDefinition1" Value="Auto" />
                        <Setter Property="Grid.Row" TargetName="border" Value="1" />
                        <Setter Property="CornerRadius" TargetName="ContentPanel" Value="2,2,0,0" />
                        <Setter Property="CornerRadius" TargetName="border" Value="0,0,2,2" />
                        <Setter Property="Margin" TargetName="HeaderPanel" Value="4,-2.5,0,0" />
                        <Setter Property="Margin" TargetName="border" Value="0,0,0,0" />
                    </Trigger>
                    <Trigger Property="TabStripPlacement" Value="Left">
                        <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0" />
                        <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0" />
                        <Setter Property="Grid.Column" TargetName="ContentPanel" Value="1" />
                        <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto" />
                        <Setter Property="Width" TargetName="ColumnDefinition1" Value="*" />
                        <Setter Property="Height" TargetName="RowDefinition0" Value="*" />
                        <Setter Property="Height" TargetName="RowDefinition1" Value="0" />
                        <Setter Property="Grid.Column" TargetName="border" Value="0" />
                        <Setter Property="Margin" TargetName="border" Value="0,0,0,0" />
                        <Setter Property="Margin" TargetName="ContentPanel" Value="0,0,0,0" />
                        <Setter Property="CornerRadius" TargetName="border" Value="0,2,2,0" />
                        <Setter Property="CornerRadius" TargetName="ContentPanel" Value="0,2,2,0" />
                        <Setter Property="Margin" TargetName="HeaderPanel" Value="4,0,-2.5,0" />
                    </Trigger>
                    <Trigger Property="TabStripPlacement" Value="Right">
                        <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0" />
                        <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0" />
                        <Setter Property="Grid.Column" TargetName="ContentPanel" Value="0" />
                        <Setter Property="Width" TargetName="ColumnDefinition0" Value="*" />
                        <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto" />
                        <Setter Property="Height" TargetName="RowDefinition0" Value="*" />
                        <Setter Property="Height" TargetName="RowDefinition1" Value="0" />
                        <Setter Property="Grid.Column" TargetName="border" Value="1" />
                        <Setter Property="CornerRadius" TargetName="ContentPanel" Value="2,0,0,2" />
                        <Setter Property="CornerRadius" TargetName="border" Value="0,2,2,0" />
                        <Setter Property="Margin" TargetName="HeaderPanel" Value="-3,0,0,0" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="Transparent" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

你遇到的蓝色背景是TabItem默认模板中的焦点视觉效果，和BorderBrush无关，所以设置BorderBrush透明不会生效。以下是几种可行的解决方法：

方法1：移除焦点视觉样式（最简单） #

直接给TabItem设置FocusVisualStyle="{x:Null}"，彻底移除焦点时的蓝色高亮：

<TabItem Header="Tab 1" FocusVisualStyle="{x:Null}">
    <!-- Tab内容 -->
</TabItem>

如果要统一应用到所有TabItem，在TabItem的样式中添加Setter：

<Style TargetType="TabItem">
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <!-- 你的其他样式设置 -->
</Style>

方法2：通过触发器覆盖焦点状态背景 #

在现有TabItem样式中添加IsFocused触发器，强制设置背景为透明：

<Style TargetType="TabItem">
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Background" Value="Transparent"/>
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="true">
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Background" Value="#E0E0E0"/> <!-- 自定义选中时的背景 -->
        </Trigger>
        <Trigger Property="IsSelected" Value="false">
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Background" Value="Transparent"/>
        </Trigger>
        <!-- 新增焦点状态触发器 -->
        <Trigger Property="IsFocused" Value="True">
            <Setter Property="Background" Value="Transparent"/>
        </Trigger>
    </Style.Triggers>
</Style>

方法3：重写TabItem的ControlTemplate（完全自定义） #

如果需要完全控制TabItem的所有视觉状态（选中、悬停、焦点等），可以重写它的模板：

<Style TargetType="TabItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabItem">
                <Border x:Name="TabBorder" 
                        Background="Transparent" 
                        Padding="6,2"
                        BorderThickness="0">
                    <ContentPresenter x:Name="HeaderContent"
                                      VerticalAlignment="Center"
                                      HorizontalAlignment="Center"
                                      ContentSource="Header"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="TabBorder" Property="Background" Value="#E0E0E0"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="TabBorder" Property="Background" Value="#F0F0F0"/>
                    </Trigger>
                    <!-- 自定义焦点状态样式 -->
                    <Trigger Property="IsFocused" Value="True">
                        <Setter TargetName="TabBorder" Property="Background" Value="Transparent"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

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