Disable border and background change on TabItem selected wpf

Question

In my WPF document I have this:

<Window.Resources>
    <Style x:Key="SidebarTab" TargetType="TabItem">

        <Setter Property="Foreground"  Value="#303030"></Setter>
        <Setter Property="BorderBrush"  Value="Transparent"></Setter>
        <Setter Property="BorderThickness"  Value="0"></Setter>
        <Setter Property="Background"  Value="#151515"></Setter>

        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Foreground" Value="{StaticResource PrimaryHueMidBrush}"></Setter>
                <Setter Property="BorderBrush"  Value="Transparent"></Setter>
                <Setter Property="BorderThickness"  Value="0"></Setter>
                <Setter Property="Background"  Value="#151515"></Setter>
            </Trigger>
        </Style.Triggers>

    </Style>
</Window.Resources>

<Border Background="#151515" CornerRadius="20">
    <Grid Margin="23,47,0,0">
        <TabControl TabStripPlacement="Left" Style="{DynamicResource SidebarTabControl}">
            <TabItem Style="{DynamicResource SidebarTab}">
                <TabItem.Header>
                    <materialDesign:PackIcon Kind="EmoticonLol" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                </TabItem.Header>
            </TabItem>
            <TabItem Style="{DynamicResource SidebarTab}">
                <TabItem.Header>
                    <materialDesign:PackIcon Kind="EmoticonLol" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                </TabItem.Header>
            </TabItem>
            <TabItem Style="{DynamicResource SidebarTab}">
                <TabItem.Header>
                    <materialDesign:PackIcon Kind="EmoticonLol" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                </TabItem.Header>
            </TabItem>
            <TabItem Style="{DynamicResource SidebarTab}">
                <TabItem.Header>
                    <materialDesign:PackIcon Kind="EmoticonLol" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                </TabItem.Header>
            </TabItem>
            <TabItem Style="{DynamicResource SidebarTab}">
                <TabItem.Header>
                    <materialDesign:PackIcon Kind="EmoticonLol" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                </TabItem.Header>
            </TabItem>
        </TabControl>
    </Grid>
</Border>

And it looks like this:

I get the desired effect of the icon changing color on the TabItem, but the Background and BorderBrush (as well as BorderThickness) are still being changed to kind of "link up" to the content inside the header and this is what I want to remove:

I added the things inside the style like so:

 <Style.Triggers>
    <Trigger Property="IsSelected" Value="True">
        <Setter Property="Foreground" Value="{StaticResource PrimaryHueMidBrush}"></Setter>
        <Setter Property="BorderBrush"  Value="Transparent"></Setter>
        <Setter Property="BorderThickness"  Value="0"></Setter>
        <Setter Property="Background"  Value="#151515"></Setter>
    </Trigger>
</Style.Triggers>

But it still doesn't work. Does anyone have any suggestions on how to do this?

Answer 1

I tried with your styles and I am also able to get the border. The reason for this is actually the default Template of TabItem has the border color and thickness which your properties when you define your colors still does not get applied to them.

So what you need to do is actually to re-define the control template for your tab item.

I have made basic changes by overriding the Template property of TabItem and added some stuff and bind the BorderThickness, BorderBrush and Background.

<Style x:Key="SidebarTab" TargetType="TabItem">

        <Setter Property="Foreground"  Value="#303030"></Setter>
        <Setter Property="BorderBrush"  Value="Red"></Setter>
        <Setter Property="BorderThickness"  Value="1"></Setter>
        <Setter Property="Background"  Value="White"></Setter>

        <!--I have added this START-->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                    <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}">
                        <ContentPresenter ContentSource="Header" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
       <!--I have added this END-->

        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Foreground" Value="Blue"></Setter>
                <Setter Property="BorderBrush"  Value="Transparent"></Setter>
                <Setter Property="BorderThickness"  Value="0"></Setter>
                <Setter Property="Background"  Value="Yellow"></Setter>
            </Trigger>
        </Style.Triggers>

    </Style>

Note:- I have change the property values of Foreground, Background, Border thickness in the above code for test purpose and as I could not find the static resources. You have to change back to your keys.

I hope I have made a point for you to proceed further. Give a try and if you find any issues let me know.