从关注的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> 

我所做的就是添加选项卡被选中并修改了该选项卡项目的边距