Fading out a wpf window on close

Question

I want to fade a window in/out in my application.
Fading in occurs on Window.Loaded and I wanted to fade out on close (Window.Closed or Window.Closing). Fading in works perfectly, but Window.Closing is not allowed value for RoutedEvent property.
What RoutedEvent should I be using for Close?

    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2" FillBehavior="HoldEnd" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Window.Closing">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:2" FillBehavior="HoldEnd" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>

I get a error on , Value 'Window.Closing' cannot be assigned to property 'RoutedEvent'. Invalid event name.

Thomas Levesque · Accepted Answer · 2010-08-20T20:09:19.773

33

Closing is not a routed event, so you can't use it in an EventTrigger. Perhaps you could start the storyboard in the handler of the ClosingEvent in the code-behind and cancel the event... something like that :

private bool closeStoryBoardCompleted = false;

private void Window_Closing(object sender, CancelEventArgs e)
{
    if (!closeStoryBoardCompleted)
    {
        closeStoryBoard.Begin();
        e.Cancel = true;
    }
}

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

edited Aug 20 '10 at 20:09

answered May 15 '09 at 12:04

Thomas Levesque

286,951
70
623
758

Where do you define the storyboard then? – Aaron Powell May 26 '09 at 12:20
You can define it in the resources (but then you can't access it directly in code-behind, you have to get it with FindResource – Thomas Levesque May 27 '09 at 10:44
5

Dont forget to add to the closing storyboard. – Nikos Tsokos Jun 18 '09 at 09:42
2

If you get an error saying the storyboard needs a target, pass `this` to the `closeStoryBoard.Begin();`. – Pyritie Jan 29 '15 at 16:52

score 9 · Answer 2 · answered Sep 17 '12 at 15:23

I thought I'd add another solution of doing this, using behaviors from the Expression SDK and combining it with the solution from @Thomas. Using that, we can define a "CloseBehavior" that handles the code behind of starting a storyboard and closing the window when it's done.

using System.ComponentModel;
using System.Windows;
using System.Windows.Interactivity;
using System.Windows.Media.Animation;

namespace Presentation.Behaviours {
    public class CloseBehavior : Behavior<Window> {
        public static readonly DependencyProperty StoryboardProperty =
            DependencyProperty.Register("Storyboard", typeof(Storyboard), typeof(CloseBehavior), new PropertyMetadata(default(Storyboard)));

        public Storyboard Storyboard {
            get { return (Storyboard)GetValue(StoryboardProperty); }
            set { SetValue(StoryboardProperty, value); }
        }

        protected override void OnAttached() {
            base.OnAttached();
            AssociatedObject.Closing += onWindowClosing;
        }

        private void onWindowClosing(object sender, CancelEventArgs e) {
            if (Storyboard == null) {
                return;
            }
            e.Cancel = true;
            AssociatedObject.Closing -= onWindowClosing;

            Storyboard.Completed += (o, a) => AssociatedObject.Close();
            Storyboard.Begin(AssociatedObject);
        }
    }
}

The behavior defines a storyboard as a dependency property, so we can set it in xaml and when the AssociatedObject (the window where we define the behavior) is closing, this storyboard is started using Storyboard.Begin(). Now, in xaml we simply add the behavior to the window using the following xaml

<Window x:Class="Presentation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:behave="clr-namespace:Presentation.Behaviours"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        x:Name="window">
    <Window.Resources>
        <Storyboard x:Key="ExitAnimation">
            <DoubleAnimation Storyboard.Target="{Binding ElementName='window'}"
                             Storyboard.TargetProperty="(Window.Opacity)"
                             Duration="0:0:1" From="1" To="0"/>
        </Storyboard>
    </Window.Resources>

    <i:Interaction.Behaviors>
        <behave:CloseBehavior Storyboard="{StaticResource ExitAnimation}"/>
    </i:Interaction.Behaviors>

    <Grid>
    </Grid>
</Window>

Note the xml namespace i from the System.Windows.Interactivity dll, and also that the window is referenced, so it has to have a x:Name assigned. Now we simply add the behavior to every window on which we wish to execute a storyboard before closing the application, instead of copying the logic to every code-behind in each window.

very nice , working fine with no code behind - this is the better answer imo — Zakos, Nov 21 '13 at 10:13
Nicely done. Is it possible for the behavior to attach and detach without the window closing? — Tim Sylvester, Jan 27 '19 at 00:14
@TimSylvester You mean with for instance a toggle? Sure, you can use another dependency property and bind it to your viewmodel for instance, and hook up the event when that property changes. I'm sure there are other ways too, depending on your need — Patrick, Jan 27 '19 at 12:37

score 1 · Answer 3 · answered May 15 '09 at 11:50

I'm not an expert on WPF but I believe that unless you cancel the initial Closing event the window will be gone before the animation is even started.

Upon receiving the Window.Closing event, you should cancel the event and start the animation. When the animation is done you can close the window.

score 0 · Answer 4 · answered Oct 19 '16 at 01:00

This is even simpler and shorter. Add a behavior as follows:

public class WindowClosingBehavior : Behavior<Window>
    {
        protected override void OnAttached()
        {
            AssociatedObject.Closing += AssociatedObject_Closing;
        }

        private void AssociatedObject_Closing(object sender, System.ComponentModel.CancelEventArgs e)
        {
            Window window = sender as Window;
            window.Closing -= AssociatedObject_Closing;
            e.Cancel = true;
            var anim = new DoubleAnimation(0, (Duration)TimeSpan.FromSeconds(0.5));
            anim.Completed += (s, _) => window.Close();
            window.BeginAnimation(UIElement.OpacityProperty, anim);
        }
        protected override void OnDetaching()
        {
            AssociatedObject.Closing -= AssociatedObject_Closing;
        }
    }

Then in your window add a reference :

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:wt="clr-namespace:Desktop.Themes.WindowTask;assembly=Desktop.Themes"

Insert the behavior:

<i:Interaction.Behaviors>
     <wt:WindowClosingBehavior />
</i:Interaction.Behaviors>

score -2 · Answer 5 · answered Sep 18 '14 at 19:01

-2

Set AutoReverse To "True"

<Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" AutoReverse="True" From="0" To="1" Duration="0:0:0.5" FillBehavior="HoldEnd" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>

answered Sep 18 '14 at 19:01

nadjibnet

54
8

This is not what the OP asked for and does not work. This reverses as soon as the animation of the loaded event finishes. – Yokomoko Aug 15 '17 at 12:26

Fading out a wpf window on close

5 Answers5

Linked