Using animation with triggers

We should remember that in WPF refers to an automated property change over a set period of time. You can animate an element’s size, location, color, or virtually any other property associated with an element.

You can use the Animation classes to implement these changes. So we use "Animation" objects for this purpose.The "Storyboard" object contains Animation objects and determines which element and property the Animation objects affect. As the answer to the question of "How do you start and stop an animation", is discussed here with an example.

We use "Trigger" object for this. All "Animation" objects must be housed within a "Trigger" object.
Following example:

1. BeginStoryboard is an action; it indicates that the contained storyboard should be started.

2. The EventTrigger class defines a collection of actions that should be initiated when the trigger is activated, and in this example, BeginStoryboard is the action that is initiated.

3. Thus, when the button indicated in this trigger is clicked, the described animation runs.

See the animation:

http://screencast.com/t/cuuXiQdRU

<Window x:Class="App1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
 
    <Grid>
        <Button Height="30" Width="200" HorizontalAlignment="Left">
            Animated Button
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:5" Storyboard.TargetProperty="Height" To="200" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>