Using the following code to edit the background of TabItems and Selected TabItems in a TabControl:

<TabControl.ItemContainerStyle>
            <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid>
                            <Border 
                                            Name="Border"
                                            Margin="0,0,-4,0" 
                                            Background="Transparent"
                                            BorderBrush="Silver" 
                                            BorderThickness="1,1,1,1">
                                <ContentPresenter x:Name="ContentSite"
                                                VerticalAlignment="Center"
                                                HorizontalAlignment="Center"                                                    
                                                ContentSource="Header"
                                                Margin="12,2,12,2"
                                                RecognizesAccessKey="True"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Panel.ZIndex" Value="100" />
                                <Setter TargetName="Border" Property="Background" Value="Transparent" />
                                <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.ItemContainerStyle>

It work great except that when I set the TabStripPlacement to Bottom on the TabControl, while the TabPanel is docked to the bottom, the TabItems still display as if they were on top. It makes for some weird Cosmetics:

CodePudding user response：

After playing around with it, I realized the issue was with the margin and border thickness, base and when selected. Instead of amargin 0,0,-4,0 at default, needs to be -4,0,0,0 and instead of 1,1,1,0 border thickness when selected it needs to be 1,0,1,1. I was thinking it was a transform that needed to happen, but adjusting the margins did the trick.

new code:

<TabControl.ItemContainerStyle>
        <Style TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border 
                                        Name="Border"
                                        **Margin="-4,0,0,0"** 
                                        Background="Transparent"
                                        BorderBrush="Silver" 
                                        BorderThickness="1,1,1,1">
                            <ContentPresenter x:Name="ContentSite"
                                            VerticalAlignment="Center"
                                            HorizontalAlignment="Center"                                                    
                                            ContentSource="Header"
                                            Margin="12,2,12,2"
                                            RecognizesAccessKey="True"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Panel.ZIndex" Value="100" />
                            <Setter TargetName="Border" Property="Background" Value="Transparent" />
                            <Setter TargetName="Border" Property="BorderThickness" **Value="1,0,1,1"** />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TabControl.ItemContainerStyle>