WPF Fade Out on a control WPF Fade Out on a control wpf wpf

WPF Fade Out on a control


The problem is that after your animation completes your control still has Visibility=Visible, so it cannot be entered again.
I would rather use animation that does the whole thing, first shows the control, then hides it.

<Storyboard x:Key="animate">    <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="Visibility">        <DiscreteObjectKeyFrame KeyTime="0">            <DiscreteObjectKeyFrame.Value>                <Visibility>Visible</Visibility>            </DiscreteObjectKeyFrame.Value>        </DiscreteObjectKeyFrame>    </ObjectAnimationUsingKeyFrames>    <DoubleAnimation BeginTime="0:0:0.0" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.2"/>    <DoubleAnimation BeginTime="0:0:5.0" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:0.5"/>    <ObjectAnimationUsingKeyFrames BeginTime="0:0:5.5" Storyboard.TargetProperty="Visibility">        <DiscreteObjectKeyFrame KeyTime="0">            <DiscreteObjectKeyFrame.Value>                <Visibility>Hidden</Visibility>            </DiscreteObjectKeyFrame.Value>        </DiscreteObjectKeyFrame>    </ObjectAnimationUsingKeyFrames></Storyboard>

And use it as follows:

((Storyboard)FindResource("animate")).Begin(someControl);


Liz is correct about Visibility still being Visible. alpha-mouse is also correct that you need to set it back to Hidden at some point. But it won't work if you set it back before the animation is completed like this:

MyControl.Visibility = System.Windows.Visibility.Visible;MyControl.Visibility = System.Windows.Visibility.Hidden;

because animations take higher precedence (MSDN)

You can set it back to Hidden in Storyboard.Completed event:

private void Show()    {        MyControl.Visibility = System.Windows.Visibility.Visible;        var a = new DoubleAnimation                    {                        From = 1.0,                        To = 0.0,                        FillBehavior= FillBehavior.Stop,                        BeginTime = TimeSpan.FromSeconds(2),                        Duration = new Duration(TimeSpan.FromSeconds(0.5))                    };        var storyboard = new Storyboard();        storyboard.Children.Add(a);        Storyboard.SetTarget(a, MyControl);        Storyboard.SetTargetProperty(a, new PropertyPath(OpacityProperty));        storyboard.Completed += delegate { MyControl.Visibility = System.Windows.Visibility.Hidden; };        storyboard.Begin();                }


Here is my work around. This fades a control in and back out again. Instead of playing around with the Visibility, I handled it by playing only with the Opacity.

Thanks to Kane from this post for the orginal code: Fade any control using a WPF animation

Storyboard storyboard = new Storyboard();TimeSpan duration = TimeSpan.FromMilliseconds(500); //DoubleAnimation fadeInAnimation = new DoubleAnimation()     { From = 0.0, To = 1.0, Duration = new Duration(duration) };DoubleAnimation fadeOutAnimation = new DoubleAnimation()    { From = 1.0, To = 0.0, Duration = new Duration(duration) };fadeOutAnimation.BeginTime = TimeSpan.FromSeconds(5);Storyboard.SetTargetName(fadeInAnimation, element.Name);Storyboard.SetTargetProperty(fadeInAnimation, new PropertyPath("Opacity", 1));storyboard.Children.Add(fadeInAnimation);storyboard.Begin(element);Storyboard.SetTargetName(fadeOutAnimation, element.Name);Storyboard.SetTargetProperty(fadeOutAnimation, new PropertyPath("Opacity", 0));storyboard.Children.Add(fadeOutAnimation);storyboard.Begin(element);