wpf animation fade in freeze and fade out

Question

Hi

I want to show some data on a form. The form should fade in for 5 sec and display data with full opacity for 10 sec and then start fade out in 3 sec. I have do this programatically in c#.

Please give suggestions or sample code.

Thanks Raju

Answer 1

You would use a DoubleAnimationUsingKeyFrames (see c# usage example in the msdn docs here) and animate the Opacity property of your control.

Answer 2

You can define a storyboard in XAML that manipulates the Opacity. The following complete XAML example illustrates this:

  <Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">

    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
    </Rectangle>

    <Button Name="BeginButton">Begin</Button>

    <StackPanel.Triggers>
      <EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton">
        <BeginStoryboard Name="MyBeginStoryboard">
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="MyRectangle" 
              Storyboard.TargetProperty="(Rectangle.Opacity)"
              From="1.0" To="0.0" Duration="0:0:5" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </StackPanel.Triggers>
  </StackPanel>
</Page>

Running the animation from C#, per your requirements, is also possible:

public void DoAnimation()
{
  Storyboard opacityStoryboard = FindResource("MyBeginStoryboard") as Storyboard;
  opacityStoryboard.Begin(this);
}

A combination of the two approaches is to define the animation in XAML and activate it in C#.

Using this pattern, you can define two storyboards:

• A storyboard that changes the form's Opacity property from 0.0 to 1.0 over five seconds
• A storyboard that changes the form's Opacity property from 1.0 to 0.0 over three seconds

You can modify the example above to do this as a standalone sample:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">

    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
    </Rectangle>

    <Button Name="FadeInButton">Fade In</Button>
    <Button Name="FadeOutButton">Fade Out</Button>

    <StackPanel.Triggers>
      <EventTrigger RoutedEvent="Button.Click" SourceName="FadeInButton">
        <BeginStoryboard Name="FadeInStoryboard">
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="MyRectangle" 
              Storyboard.TargetProperty="(Rectangle.Opacity)"
              From="0.0" To="1.0" Duration="0:0:5" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="FadeOutButton">
        <BeginStoryboard Name="FadeOutStoryboard">
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="MyRectangle" 
              Storyboard.TargetProperty="(Rectangle.Opacity)"
              From="1.0" To="0.0" Duration="0:0:3" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </StackPanel.Triggers>
  </StackPanel>
</Page>

Using the "run storyboard from C#" pattern shown above, you can run each of the storyboards at the proper time in your C# code.