How to: Trigger an Animation When a Property Value Changes

This example shows how to use a Trigger to start a Storyboard when a property value changes. You can use a Trigger inside a Style, ControlTemplate, or DataTemplate.


The following example uses a Trigger to animate the Opacity of a Button when its IsMouseOver property becomes true.

<!-- PropertyTriggerExample.xaml
     Shows how to use property triggers to start animations. -->
  WindowTitle="Animate Properties with Storyboards">
    <Style x:Key="PropertyTriggerExampleButtonStyle" TargetType="{x:Type Button}">
      <Setter Property="Opacity" Value="0.25" />
        <Trigger Property="IsMouseOver" Value="True">

                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                  To="1" Duration="0:0:1" />
                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                  To="0.25" Duration="0:0:1" />

  <StackPanel Margin="20">

    <Button Style="{StaticResource PropertyTriggerExampleButtonStyle}">
      Move the mouse over me.


Animations applied by property Trigger objects behave in a more complex fashion than EventTrigger animations or animations started using Storyboard methods. They "handoff" with animations defined by other Trigger objects, but compose with EventTrigger and method-triggered animations.

See Also

Community Additions