Question

I’ve got a simple storyboard animation that looks like this:

 <Window.Resources>
    <Storyboard x:Key="fader">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
            <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
            <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
            <SplineDoubleKeyFrame KeyTime="0:0:4" Value="1"/>
            <SplineDoubleKeyFrame KeyTime="0:0:6" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>

As you can see, it fades the target in, waits 3.5 seconds, then fades it out. I’m using it on a notifier window that appears when an event occurs.

It works perfectly by calling the following from code, when that event happens:

board = (Storyboard)FindResource("fader");
board.Begin(this);

However, I’m trying to handle the case where a second event occurs while the notification window is already showing. In this case, the behaviour I’m looking for is to modify the contents of the window to reflect the second event (easy) and ‘rewind’ the storyboard to 0.5s through it’s lifetime, ie. just after it’s appeared.

In other words, the second event should cause the fadeout to occur 3.5s after the second event has occurred, even if the window has already been around for anything between 0 and 6 seconds.

I’ve tried to do this by detecting the opacity of the window, and if it’s >0 then calling the following:

board.Seek(this,TimeSpan.FromSeconds(0.5),TimeSeekOrigin.BeginTime);

However, this doesn’t appear to do anything, and even if I fire events at it repeatedly, the window contents change, but the notifier dutifully fades in, waits 3.5 seconds and then fades out again.

Why does’t this work, and is this the best way of doing what I’m trying to achieve?

Answer 1

I think the problem here is that you have the fade in and fade out as a single animation. I would probably do something like the following:

1. Split the animation into two: a fade-in and a fade-out.
2. Define a displayPeriod constant value of 3.5s (or whatever you want. User-configurable setting?).
3. When a notification comes in, fire an event. If it’s the first notification, run the fade-in animation. If it’s not the first notification, go to 5.
4. Start a timer that will count down the displayPeriod number of seconds.
5. If another notification comes in before the timer expires, cancel it and start it again.
6. When the timer finally expires, run the fade-out animation.

There’s more code to write, but it’s possibly simpler than trying to shim the animation to the right point in the storyboard.

If you want some cool and mind-bending tech to play with whilst implementing this, check out the Reactive Extensions to handle your streams of notification and timer events.