0

i'm trying to do an animation before the visibility changes to collapsed.

I'm trying to accomplish a fade in/fade out effect when the visibility is changed. I have no problem with fade in, because the visibility changes before my animation (which is good).

Here's my code right now:

private void LoginOverlay_OnIsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
{
    if (this.Visibility == Visibility.Visible)
    {
        //Fade in ... this is working
        Storyboard sb = new Storyboard();
        DoubleAnimation da = new DoubleAnimation();
        da.From = 0;
        da.To = 1;
        da.Duration = new Duration(TimeSpan.FromSeconds(1));
        sb.Children.Add(da);
        Storyboard.SetTargetProperty(da, new PropertyPath(OpacityProperty));
        Storyboard.SetTarget(da, this);
        sb.Begin();
    }
    else
    {
        //Fade out ... not working
        Storyboard sb = new Storyboard();
        DoubleAnimation da = new DoubleAnimation();
        da.From = 1;
        da.To = 0;
        da.Duration = new Duration(TimeSpan.FromSeconds(1));
        sb.Children.Add(da);
        Storyboard.SetTargetProperty(da, new PropertyPath(OpacityProperty));
        Storyboard.SetTarget(da, this);
        sb.Begin();
    }
}
daniele3004
  • 13,072
  • 12
  • 67
  • 75
Verendus
  • 1,026
  • 1
  • 13
  • 26
  • The control becomes collapsed/hidden by the time your fade out animation starts so you dont see any animation on the screen. Instead of onVisibileChanged, if you know when the control should be hidden/collapsed, you can run your animation first and then on the completed event for the storyboard you can actually hide/collapse your overlay. – Krishna Nov 14 '14 at 15:13
  • Try binding the visibility and doing it in the set. – paparazzo Nov 14 '14 at 15:20

1 Answers1

1

Before you start the Animation the visibility of the control has already changed to Collapsed or Hidden, this means that the opacity will animate but you won't be able to see it happen as the control is invisible.

One option you have is to change the control back to visible before starting the animation, then add a keyframe animation to the storyboard to set the visibility back to its intended value after 1 second (or the length of your fade animation)

ndonohoe
  • 9,320
  • 2
  • 18
  • 25
  • Can you explain how to do this? I'm new at animation, and finding it very hard to work out what to do. Some sample code would be a great help. – Avrohom Yisroel Nov 26 '14 at 18:53
  • I've had the same problem and I've tryed this solution. It does not work because you are modifying the visibility property inside the visibility changed function, so it calls itself in a recursive way and never ends. – Jose Oct 29 '15 at 10:55