从焦点 TabItem 中删除边框底部

Question

点击一个 tabitem 后，我想删除底部的边框。 目前我有这个：

现在我想删除标记的边框。

我搜索了很多，发现了这个：

Tab Item and Tab Control Border Style

Get rid of the line under that tab of the tab control

这两种方法我尝试了很长时间..但都没有成功。

我的代码：

<Style x:Key="MainMenu" TargetType="{x:Type TabControl}">
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Padding" Value="0"/>

        <Setter Property="Template">
            <Setter.Value>

                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid KeyboardNavigation.TabNavigation="Local">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <TabPanel x:Name="HeaderPanel" 
                                  Grid.Row="0" 
                                  Panel.ZIndex="1" 
                                  IsItemsHost="True" 
                                  KeyboardNavigation.TabIndex="1" 
                                  Background="Transparent" />

                        <Border x:Name="Border"
                                Grid.Row="1"
                                BorderThickness="0 1 0 0"
                                BorderBrush="Red"
                                Background="LightGray"
                                KeyboardNavigation.TabNavigation="Local"
                                KeyboardNavigation.DirectionalNavigation="Contained"
                                KeyboardNavigation.TabIndex="2">

                            <ContentPresenter x:Name="PART_SelectedContentHost"
                                          ContentSource="SelectedContent" />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="MainMenuItem" TargetType="{x:Type TabItem}">
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="FontSize" Value="13px"/>
        <Setter Property="Cursor" Value="Hand"/>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border 
                            Name="Border"
                            Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
                            BorderBrush="Black" 
                            Padding="10px"
                            Margin="10 10 10 0"
                            BorderThickness="1,1,1,0">
                            
                            <ContentPresenter x:Name="ContentSite"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        ContentSource="Header"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="True" >
                            <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True" >
                            <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True" >
                            <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

要从唯一选定的 TabItem 中删除红线，请将样式更新为：

    <Style x:Key="MainMenuItem" TargetType="{x:Type TabItem}">
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="FontSize" Value="13px"/>
        <Setter Property="Cursor" Value="Hand"/>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border 
                    Name="Border"
                    Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
                    BorderBrush="Black" 
                    Padding="10px"
                    Margin="10 10 10 0"
                    BorderThickness="1,1,1,0">

                            <ContentPresenter x:Name="ContentSite"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                ContentSource="Header"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="True" >
                            <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True" >
                            <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True" >
                            <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
                            <Setter Property="Margin" TargetName="Border" Value="10,10,10,-1" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我所做的是在选择选项卡时添加一个设置器并仅修改该选项卡项的边距