Fading out a window

Question

I am currently developing a wpf c# application. I have added to event triggers to the xaml of the form to fade in when the window loads and fades out when the window closes.

The fading in works perfectly without any problems but the fading out is not working.

I have it set up so the window fades in when it loads, has a timer to last 5 seconds, and then calls the form fade out event.

However, the window doesn't fade out it just closes straight away no animation. Below is the code I have for the fade in and fade out events

<Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard Name="FormFade">
                    <DoubleAnimation Name="FormFadeAnimation"
                                     Storyboard.TargetProperty="(Window.Opacity)"
                                     From="0.0" To="1.0" Duration="0:0:1"
                                     AutoReverse="False" RepeatBehavior="1x" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Window.Unloaded">
            <BeginStoryboard>
                <Storyboard Name="FormFadeOut" Completed="FormFadeOut_Completed">
                    <DoubleAnimation Name="FormFadeOutAnimation"
                                     Storyboard.TargetName="FormFadeOut"
                                     Storyboard.TargetProperty="(Window.Opacity)"
                                     From="1.0" To="0.0" Duration="0:0:1"
                                     AutoReverse="False" RepeatBehavior="1x" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>

Thanks for any help you can offer.

Solution 1

Unloaded is not a suitable event for this, i'm not sure if this event can even occur for windows. You need to handle Closing, prevent it from actually closing, start an animation and close it when the Completed event of the animation occurs.

e.g.

<Window ...
        Closing="Window_Closing">

private void Window_Closing(object sender, CancelEventArgs e)
{
    Closing -= Window_Closing;
    e.Cancel = true;
    var anim = new DoubleAnimation(0, (Duration)TimeSpan.FromSeconds(1));
    anim.Completed += (s, _) => this.Close();
    this.BeginAnimation(UIElement.OpacityProperty, anim);
}

Solution 2

just try this sample

<Window x:Class="FadeInAndOutWindow.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300" Closing="Window_Closing" x:Name="winHelp">
<Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
        <BeginStoryboard>
            <Storyboard Name="FormFade">
                <DoubleAnimation  Name="FormFadeAnimation"
                                  Storyboard.TargetName="winHelp"
                                  Storyboard.TargetProperty="(Window.Opacity)"
                                  From="0.0"
                                  To="1.0"
                                  Duration="0:0:1"
                                  AutoReverse="False"
                                  RepeatBehavior="1x" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="Window.Unloaded">
        <BeginStoryboard>
            <Storyboard Name="FormFadeOut"
                        Completed="FormFadeOut_Completed">
                <DoubleAnimation  Name="FormFadeOutAnimation"
                                  Storyboard.TargetName="winHelp"
                                  Storyboard.TargetProperty="(Window.Opacity)"
                                  From="1.0"
                                  To="0.0"
                                  Duration="0:0:1"
                                  AutoReverse="False"
                                  RepeatBehavior="1x" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Window.Triggers>    
<Grid>

</Grid>

namespace FadeInAndOutWindow
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private bool closeCompleted = false;


        private void FormFadeOut_Completed(object sender, EventArgs e)
        {
            closeCompleted = true;
            this.Close();
        }

        private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
        {

            if (!closeCompleted)
            {
                FormFadeOut.Begin();
                e.Cancel = true;
            }
        }

    }
}

Comments

[Boardy]

I have tried what you have suggested and it is now coming up with an exception saying 'Window.Closing value cannot be assigned to property 'RoutedEvent of object System.Windows.EventTrigger

[H.B.]

Can you see the code? This is not inside of the EventTriggers at all.

[Boardy]

Sorry I misread your code, works perfectly, thanks for the help

[H.B.]

You're welcome, but please take more care to look around on SO first next time as this question has a duplicate which should not have been hard to find.

[Chris]

Where to define Double Animation?

[H.B.]

@Chris: I do not understand your question.

[Chris]

Solved my problem. DoubleAnimation is defined in System.Windows.Media.Animation.DoubleAnimation

[Travis Tubbs]

This is perfect for me! is there an opposite of this to make a popup fad IN?

[H.B.]

@TravisTubbs: You probably can set the opacity to 0 before opening the window/by default and then start an animation in Loaded in a similar way.