WPF: TabItem Header Styling of TabControl usin WPF and C# - wpf

Question

I'm new to WPF,
I'm trying to style a TabControl and I'm having difficulty styling the actual TabItems:
I'm sure it's probably not that difficult, but I just can't figure it out so any help would be most appreciated!
Here's the XAML for the TabControl so far:
<Window x:Class="FunctionalFun.UI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:gc="clr-namespace:FunctionalFun.UI"
mc:Ignorable="d"
Title="mY Application" Height="800" Width="1080" ResizeMode="NoResize">
<StackPanel>
<Grid>
<TabControl Name="TabControl1" TabStripPlacement="Left" Margin="-6,46,-14,-453">
<TabItem>
<TabItem.Header>
<Image Height="35" Width="35" Source="check-form_logo3.png"/>
</TabItem.Header>
<TabItem.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="10"/>
</Style>
</TabItem.Resources>
<Canvas>
</Canvas>
</TabItem>
<TabItem >
<TabItem.Header>
<Image Height="35" Width="35" Source="calendar-icon_logo1.png"/>
</TabItem.Header>
<TabItem.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="10"/>
</Style>
</TabItem.Resources>
<Canvas>
</Canvas>
</TabItem>
<TabItem >
<TabItem.Header>
<Image Width="35" Height="35" Source="table_logo4.png"/>
</TabItem.Header>
<Canvas>
</Canvas>
</TabItem>
</TabControl>
</Grid>
</StackPanel>
</Window>

Answer 1

One option is to copy the default style of tab item, then make your changes of its border corner radius, background, etc. then give it a key, then apply your style to your actual control, like so:
<StackPanel>
<Grid>
<Grid.Resources>
<Style x:Key="CustomTabItem" TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid x:Name="Root"
Background="AntiqueWhite">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{DynamicResource ControlPressedColor}" />
</ColorAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)"
Storyboard.TargetName="Border">
<EasingThicknessKeyFrame KeyTime="0"
Value="1,1,1,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{DynamicResource DisabledControlDarkColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.BorderBrush).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{DynamicResource DisabledBorderLightColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
Margin="0,0,-4,0"
BorderThickness="1,1,1,1"
CornerRadius="10">
<Border.BorderBrush>
<SolidColorBrush Color="Black" />
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource ControlLightColor}"
Offset="0.0" />
<GradientStop Color="{DynamicResource ControlMediumColor}"
Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<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" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<TabControl Name="TabControl1" TabStripPlacement="Left" Margin="-6,46,-14,-453">
<TabItem Style="{StaticResource CustomTabItem}">
<TabItem.Header>
<TextBlock Text="A" />
</TabItem.Header>
<Canvas>
</Canvas>
</TabItem>
<TabItem Style="{StaticResource CustomTabItem}">
<TabItem.Header>
<TextBlock Text="B" />
</TabItem.Header>
<Canvas>
</Canvas>
</TabItem>
<TabItem Style="{StaticResource CustomTabItem}">
<TabItem.Header>
<TextBlock Text="C" />
</TabItem.Header>
<Canvas>
</Canvas>
</TabItem>
</TabControl>
</Grid>
</StackPanel>