Multiple style triggers not working

Question

The following style trigger works fine and fades in my control when I make it visible:

<UserControl.Style>
    <Style>
        <Style.Triggers>
            <Trigger Property="FrameworkElement.Visibility" Value="Visible">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:1.4"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Style>

Now I add another trigger to my style for it to fade out when I make it invisible:

<Trigger Property="FrameworkElement.Visibility" Value="Hidden">
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:1.4"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
</Trigger>

But this doesn't work and even corrupts the behavior of the first trigger too. What am I missing?

What do you mean by it does not work? are you expecting to see the control fade out when you just made it invisible, it wont fade if you cant see it. there are some good workarounds here: http://stackoverflow.com/questions/1013817/wpf-fade-animation — sa_ddam213, Aug 26 '13 at 02:29
@sa_ddam213: Thanks for the link. I'm trying Nock's method, but can't really make it work. Where do I add this style, and where does the dependency property go? — dotNET, Aug 26 '13 at 02:55
Then just add the DependacyProperty to that UserControl, and set the Style TargetType to that UserControl — sa_ddam213, Aug 26 '13 at 03:35

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

The comments you've got cover this answer well. However if you're still having trouble with the implementation of it, you can use

This sample download which is pretty much the exact implementation as shown here

In the example, MainWindow hosts a UserControl whose Visibility can be toggled via a Button from MainWindow which in-turn uses the IsOpen DP of the UserControl to give the fade in/out effect.

The Style mentioned is specified for the UserControl and after adding the DP to the UserControl, you pretty much use the IsOpen property to toggle Visibility xith Fade In/Out henceforth.

edited May 23 '17 at 11:57

Community

1
1

answered Aug 26 '13 at 08:39

Viv

17,170
4
51
71

That's a whole lot of help. I was able to take your work further and make my fade out animation "synchronous" in the sense that setting `IsOpen` to `false` will stop the code from moving to next line till the fade out is complete. Thanks a ton. – dotNET Aug 26 '13 at 16:08

Multiple style triggers not working

1 Answers1