Restoring to the initial state via animation in ExitActions

StackOverflow https://stackoverflow.com/questions/13518099

  •  01-12-2021
  •  | 
  •  

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?

Was it helpful?

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top