How to: Animate a Boolean by Using Key Frames

This example shows how to animate the Boolean property value of a Button control by using key frames.

Example

The following example uses the BooleanAnimationUsingKeyFrames class to animate the IsEnabled property of a Button control. All the key frames in this example use an instance of the DiscreteBooleanKeyFrame class. Discrete key frames like DiscreteBooleanKeyFrame create sudden jumps between values, that is, the movement of the animation is jerky.

<!-- Demonstrates a BooleanAnimationUsingKeyFrames. The animation is used to
     animate the IsEnabled property of a button. -->
<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="KeyFrameBoolean Animation Example">


  <StackPanel Orientation="Vertical" Margin="20">
  
    <TextBlock>
        Click the button to animate the its IsEnabled property with a 
        BooleanAnimationUsingKeyFrames animation.
    </TextBlock>
  
    <Button Name="myAnimatedButton" Margin="200">Click Me
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <BooleanAnimationUsingKeyFrames 
                Storyboard.TargetName="myAnimatedButton" 
                Storyboard.TargetProperty="IsEnabled"
                Duration="0:0:4" FillBehavior="HoldEnd">

                <!-- All the key frames below are DiscreteBooleanKeyFrames. Discrete key frames create 
                sudden "jumps" between values (no interpolation). Only discrete key frames can be used 
                for Boolean key frame animations. -->
                <DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:0" />
                <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:1" />
                <DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:2" />
                <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:3" />
                <DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:3.5" />
                <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:4" />
              </BooleanAnimationUsingKeyFrames>            
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Page>

For the complete sample, see KeyFrame Animation Sample.

See Also

Reference

BooleanAnimationUsingKeyFrames
IsEnabled
Button

Concepts

Key-Frame Animations Overview

Other Resources

Key-Frame Animation How-to Topics
KeyFrame Animation Sample