Good day!
I have a TabControl with TabItems that have been customized via a control template. This control template specifies a trigger whereby on mouseover, the content of tab header grows slightly.
<ControlTemplate>
<Storyboard x:Key="TabHeaderGrow">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TabName" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TabName" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource TabHeaderGrow}"/>
</EventTrigger>
When I mouseover any of the tabs they work as expected, however the trigger also fires when I mouseover any of the elements in the tab body. I know that I need to migrate the control styling to a tabHeader controlTemplate, but I am unsure how to do that. I can't seem to do template binding for the content of the tabheader. Any help would be appreciated.