CODEWITHSUNDEEP
c#wpf
Petr Bílek
Petr Bílek

Reputation: 21

WPF Style Triggers acting weird

I have a grid that changes its background gradient by tag property. When I set tag to "Enabled" the animation works fine but the problem is when I set tag to "Disabled" the animation does not start. From "Enabled" I can only display animation for tag "Prohibited" and then I can't go back to "Disabled" or "Enabled".

Am I missing something or doing something wrong? Thanks in advance

<Grid.Style>
<Style TargetType = "Grid"> 
    <Style.Triggers> 
        <Trigger Property = "Tag" Value = "Disabled">    
            <Trigger.EnterActions>    
                <BeginStoryboard>    
                    <Storyboard>    
                        <ColorAnimation
                            Storyboard.TargetProperty = "Background.GradientStops[0].Color"
                            From = "{x:Null}"
                            To = "{StaticResource disabled_1}" Duration = "0:0:1" />

                        <ColorAnimation
                            Storyboard.TargetProperty = "Background.GradientStops[1].Color"
                            From = "{x:Null}"                                
                            To = "{StaticResource disabled_2}" Duration = "0:0:1" />  
                    </Storyboard>  
                </BeginStoryboard>  
            </Trigger.EnterActions>  
        </Trigger>  
        <Trigger Property = "Tag" Value = "Enabled">     
                <Trigger.EnterActions>     
                    <BeginStoryboard>     
                        <Storyboard>     
                            <ColorAnimation
                                Storyboard.TargetProperty = "Background.GradientStops[0].Color"
                                From = "{x:Null}"
                                To = "{StaticResource enabled_1}" Duration = "0:0:1" />  
                            <ColorAnimation
                                Storyboard.TargetProperty = "Background.GradientStops[1].Color"
                                From = "{x:Null}"
                                To = "{StaticResource enabled_2}" Duration = "0:0:1" />  
                        </Storyboard>
                      </BeginStoryboard>  
                </Trigger.EnterActions>  
            </Trigger>  
            <Trigger Property = "Tag" Value = "Prohibited">     
                <Trigger.EnterActions>     
                    <BeginStoryboard>     
                        <Storyboard>
                            <ColorAnimation
                                Storyboard.TargetProperty = "Background.GradientStops[0].Color"
                                From = "{x:Null}"
                                To = "{StaticResource prohibited_1}" Duration = "0:0:1" />

                            <ColorAnimation
                                Storyboard.TargetProperty = "Background.GradientStops[1].Color"
                                From = "{x:Null}"
                                To = "{StaticResource prohibited_2}" Duration = "0:0:1" />  
                        </Storyboard>  
                    </BeginStoryboard>  
                </Trigger.EnterActions>  
            </Trigger>  
        </Style.Triggers>  
    </Style>  
</Grid.Style>

Upvotes: 2

Views: 53

Answers (1)

Tam Bui
Tam Bui

Reputation: 3048

You have defined the animations, but you also need to define how to stop the animations in order for other animations to start.

There are two ways to do this.

  1. Define ExitActions on all your Triggers.

Example:

<Trigger Property = "Tag" Value = "Enabled">
    <Trigger.EnterActions>
        <BeginStoryboard Name="enabledsb">
            // Removed for brevity
        </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <StopStoryboard BeginStoryboardName="enabledsb"/>
    </Trigger.ExitActions>
</Trigger>
  1. Define a StopStoryboard on your animations, before you animate something new.

Example:

<Trigger Property = "Tag" Value = "Disabled">
    <Trigger.EnterActions>
        <StopStoryboard BeginStoryboardName="enabledsb"/>
        <BeginStoryboard Name="disabledsb">
             // Removed for brevity
        </BeginStoryboard>
    </Trigger.EnterActions>
</Trigger>

Upvotes: 1

Related Questions