Fade out animation keeps repeating, possibly triggers itself?

Question

I'm trying to create a very simple fade out effect that should happen whenever the user control's visibility changes to hidden.

To do this I created a storyboard that is triggered whenever the visibility of the user control changes to Hidden. It then first changes the visibility to visible again so I can animate it. It then changes the opacity over time, and finally changes the visibility to hidden. However this causes the animation to repeat forever.

When changing the control from visible to collapsed in the final frame it does work once, but then the user control will never become visible again (I listen for the IsVisibleChanged event and it never gets triggered after it has collapsed once, even though I literally have the code control.Visibility = Visibility.Visible; at the end of that event handler.

So how do I make sure the animation is only triggered once, preferably without code behind so I can just add this fadeout control in a nice resource dictionary and it will always work. I've seen a few questions related to this on SO especially this one but I cant get it to work.

The code I have so far:

<UserControl.Style>
        <Style TargetType="{x:Type UserControl}">
            <Style.Triggers>
                <Trigger Property="Visibility" Value="Hidden">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:3" FillBehavior="Stop"/>
                                <ObjectAnimationUsingKeyFrames BeginTime="0:0:3.5" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Hidden</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>                                
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </UserControl.Style>

I'm already using EnterAction, and when putting the last part in an ExitAction I trigger an infinite loop because the trigger gets immediately called again — Roy T.

Shlomo Shlomo · Accepted Answer · 2013-03-13T17:17:34

Would it work fine if you just removed the ObjectAnimation that sets the Visibility to Hidden? So the control is technically visible, but with opacity 0?

Fade out animation keeps repeating, possibly triggers itself?

1 Answers