如何等待调用故事板的任务

Question

I want to use a storyboard animation to gradually turn a WPF element's visibility to hidden, and wait for it to complete before proceeding in the code. However, I don't want to use a Storyboard.Completed property to go to a different function because it would require a parameter passed to it, plus it would increase the complexity.

I imagine it working like so:

ListBoxItem itemToRemove = sender as ListBoxItem;    
FadeOut(itemToRemove);      // this needs to wait until animation is completed
ListBox.Items.Remove(item); // because this line will remove it immediately

This is my storyboard:

    <Storyboard x:Key="fadeOut">
        <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" Duration="0:0:0.5" From="1" Storyboard.TargetProperty="Opacity" To="0" />
    </Storyboard>

And I call it like so:

((Storyboard)FindResource("fadeOut")).Begin(item);

However, I want to wait until the storyboard completes before proceeding.

I tried this:

((Storyboard)FindResource("fadeOut")).Completed += FadeOut_Completed;
((Storyboard)FindResource("fadeOut")).Begin(item);

However, I couldn't pass the parameter item to FadeOut_Completed to remove it from the ListBox .

So I tried this:

 FadeOut(item).Wait();

Where

 public Task FadeOut(ListBoxItem item)
 {
      var tcs = new TaskCompletionSource<bool>();
      ((Storyboard)FindResource("fadeOut")).Begin(item);
      ((Storyboard)FindResource("fadeOut")).Completed += (s, e) => tcs.SetResult(true);
      return tcs.Task;
 }

But that got stuck. I'm new to threading and async stuff. Could someone point out where I'm going wrong or suggest an alternative?

Answer 1

Just a simple way to get item in Completed event handler is using closure.

var storyborard = (Storyboard)FindResource("fadeOut");
storyborard.Completed += (s,e) => ListBox.Items.Remove(item);
storyborard.Begin(item);

Answer 2

I recently ran into a situation where the Completed event wasn't firing on time, or sometimes not firing at all, even if I set the event handler prior to calling Begin() (that was the culprit on most other related posts I found). So I was looking for a way to wait for the animation to end, then continue on in the same method. I ended up creating the below static method that takes the storyboard you want to await as the parameter (plus a FrameworkElement for your scenario).

public async static Task RunStoryboard(Storyboard Story, FrameworkElement item)
{
    Story.Begin(item);
    while (Story.GetCurrentState() == ClockState.Active && Story.GetCurrentTime() < Story.Duration)
    {
        await Task.Delay(100);
    }
}

I added the second condition because, during those situations where the Completed event never fired, the ClockState would always appear as active, even after the animation finished. As such, this requires setting the Storyboard's duration explicitly, but it's been working well for me so far.

So in your case, you would just call the static method like so.

var storyboard = (Storyboard)FindResource("fadeOut");
await RunStoryboard(storyboard, item);
// ... continue code here.