Restoring to the initial state via animation in ExitActions

Question

I made a template for the tab control. What it does is takes the background of the border and animates on mouseover.

When the mouse leaves it should read the current value from the Background property and set them accordingly.

<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsSelected" Value="false"/>
        <Condition Property="IsMouseOver" Value="true"/>
    </MultiTrigger.Conditions>
    <MultiTrigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="Bd" 
                                Storyboard.TargetProperty="Background.GradientStops[0].Color" To="#003372" 
                                Duration="0:0:0.2"/>
                <ColorAnimation Storyboard.TargetName="Bd" 
                                Storyboard.TargetProperty="Background.GradientStops[1].Color" To="#025092" 
                                Duration="0:0:0.2"/>
                <ColorAnimation Storyboard.TargetName="Bd" 
                                Storyboard.TargetProperty="Background.GradientStops[2].Color" To="#003372" 
                                Duration="0:0:0.2"/>
            </Storyboard>
        </BeginStoryboard>
    </MultiTrigger.EnterActions>
    <MultiTrigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="Bd" 
                                Storyboard.TargetProperty="Background.GradientStops[0].Color" To="{TemplateBinding Background.GradientStops[0].Color}" 
                                Duration="0:0:0.2"/>
                <ColorAnimation Storyboard.TargetName="Bd" 
                                Storyboard.TargetProperty="Background.GradientStops[1].Color" To="{TemplateBinding Background.GradientStops[1].Color}" 
                                Duration="0:0:0.2"/>
                <ColorAnimation Storyboard.TargetName="Bd" 
                                Storyboard.TargetProperty="Background.GradientStops[2].Color" To="{TemplateBinding Background.GradientStops[2].Color}" 
                                Duration="0:0:0.2"/>
            </Storyboard>
        </BeginStoryboard>
    </MultiTrigger.ExitActions>
</MultiTrigger>

The problem is

To="{TemplateBinding Background.GradientStops[0].Color}" part is not working. What should I write there?

Answer 1

Don't use any To property for your animations in ExitActions block. The target property should then animate back to it's original value.