Question

I’m experimenting with WPF animations, and I’m a bit stuck. Here’s what I need to do:

MouseOver:

Fade In (0% to 100% opacity in 2 seconds)

MouseOut:

Pause for 2 seconds

Fade Out (100% to 0% opacity in 2 seconds)

I’ve got the Fade In and Fade Out effects, but I can’t figure out how to implement the Pause, or even if it’s possible.

Answer 1

Here’s some XAML that shows how to do what you’re after (you can paste the entire thing into Kaxaml to try it out:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid Background="Red">  
    <Grid.Triggers>
      <EventTrigger RoutedEvent="Grid.Loaded">
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard RepeatBehavior="Forever">
              <DoubleAnimation Storyboard.TargetProperty="Opacity"
                               From="1" To="0" 
                               Duration="0:00:02"
                               BeginTime="0:00:02" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </Grid.Triggers>
  </Grid>
</Page>

The trick is to use the BeginTime propertly of the DoubleAnimation class.