WPF MVVM Trigger Animation on MainWindow close

Question

I'm using trying to implement MVVM in my app. I have a MainWindow.xaml and a MainWindowViewModel. I'm in the process of removing all of the code-behind code from the MainWindow.xaml but I'm stuck on one final piece.

In my pre-MVVM setup I started an animation in the MainWindow.xaml.cs that would fade out the form before closing it. Since Closing is not a RoutedEvent, I had to use code-behind to get this to work.

My VM has the following two properties that can be bound: ClosingWindow and CloseWindow. My goal was to bind a DataTrigger in my MainWindowStyle to the ClosingWindow property of the VM. When ClosingWindow was set to True, it would start an animation using the following XAML:

<DataTrigger Binding="{Binding ClosingWindow}" Value="True">                
    <DataTrigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:2"/>
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.EnterActions>
</DataTrigger>

Somehow (insert magic here) I was going to set CloseWindow on the VM, via Binding, to True when the animation completed, which would then use an AttachedBehavior to Close the Window. The AttachedBehavior works perfectly when I just set CloseWindow directly using the following XAML:

<DataTrigger Binding="{Binding CloseWindow}" Value="True">
    <Setter Property="ab:WindowCloseBehavior.Close" Value="True"/>
</DataTrigger>

...but I want to reproduce the form fade before the form actually closes.

So there are two issues that I've run into: First, the animation doesn't work. I enter the trigger correctly (I've taken out the animation and put a Setter statement in there that changes the Title of the MainWindow to "Closing" and it changes correctly when ClosingWindow = True) but the DoubleAnimation never does anything. Second, there's no way to set the value of CloseWindow once the animation is complete. I looked at Marlon Grech's animation code but that won't work on DataTriggers. I can't publish a RoutedEvent because my VM doesn't descend from UIElement, and I've been Googling all day trying to come up with a clever, MVVM-friendly way to do this with no luck.

So any ideas why that animation doesn't do anything? And more importantly, how would you solve the entire problem of animating a form fade on close from the VM? I don't doubt that my entire solution to this problem might be whacked so I'm open to just about anything.

Answer 1

I am new to WPF, but have an idea (hope it's not stupid).

Why not simply add a booleanAnimation that will start after two seconds and set ab:WindowCloseBehavior.Close" Value to true"True"

some thing like this:

<DataTrigger Binding="{Binding ClosingWindow}" Value="True">                
<DataTrigger.EnterActions>
    <BeginStoryboard>
        <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:2"/>
    <BooleanAnimationUsingKeyFrames 
            Storyboard.TargetName="myAnimatedButton" Storyboard.TargetProperty="ab:WindowCloseBehavior.Close"
            Duration="0:0:4" FillBehavior="HoldEnd">
            <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:2" />
          </BooleanAnimationUsingKeyFrames>
        </Storyboard>
    </BeginStoryboard>
</DataTrigger.EnterActions>

Again, I'm no expert, just a thought.