views:

37

answers:

0

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.