Prevent TabItem event from triggering WPF - wpf

Question

<TabControl x:Name="tabControl" TabStripPlacement="Top" BorderBrush="White" FontSize="14" Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="98" Margin="0,2,0,0" VerticalAlignment="Top" Width="992" FontFamily="Segoe UI">
<TabControl.Resources>
<Style TargetType="TabItem">
<Style.Triggers>
<Trigger Property="TabItem.IsSelected" Value="True">
<Setter Property="TabItem.Foreground" Value="#FF0090D3"/>
<Setter Property="TabItem.FontSize" Value="14"/>
<Setter Property="TabItem.FontFamily" Value="Segoe Ui SemiBold"/>
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="0,0,0,0" BorderBrush="White" Background="White" CornerRadius="13,13,13,13" Margin="1,0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ParallelTimeline>
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.Background).Color" From="White" To="LightGray" Duration="0:0:0.2"/>
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ParallelTimeline>
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.Background).Color" From="LightGray" To="White" Duration="0:0:0.2"/>
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Width="190" Visibility="Hidden" />
<TabItem Height="25" IsSelected="True" Width="63" Header="Home">
<Canvas>
<Rectangle x:name="rect1" Fill="#FFF4F4F5" Height="59" Width="58" Canvas.Top="3" Canvas.Left="1">
<Rectangle.Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Fill.Color" To="LightGray" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Fill.Color" To="White" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</Canvas>
</TabItem>
<TabItem Width="63" Header="Tools"/>
<TabItem Width="76" Header="Add-ons" />
</TabControl>
The code allows me to change the tab header color when the mouse is over the header.However,the problem is....when mouse is over a content inside a tabitem,the MouseEnter event of both the TabItem and the content fires.Which results in : If i hover over a content(eg. a rectangle that i'm using),the MouseEnter event of the content/control is fired.But it also fires the 'MouseEnter' event of the tabItem...So the tabItem/TabHeader chages it's color even when i don't hover over the header/TabItem rather when i hover over a control/content inside the tabitem...How do i prevent this ?
Update
I found this code :
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true" />
<Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
<Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/>
from here.But where should i put it ?

Answer 1

Damn!! It was reallllyyy easy! Just changed :
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
To :
<ControlTemplate.Triggers>
<EventTrigger SourceName="ContentSite" RoutedEvent="MouseEnter">