Restoring to the initial state via animation in ExitActions

animation, templatebinding, wpf

Solution

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

Problem

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?

Original source