WPF is a new framework that has many advanced capabilities. Animations are one of those capabilities, where an object can be animated via rotating, stretching, scaling, moving it across the screen, changing its color, etc. In this article I am going to show Color Animation

By using ColorAnimation class we can change the color of a  control. Here, we have many different types of animations avaliable like from animating colors, ints, doubles, and many more. The DoubleAnimation class is used for animating the double values, such as X/Y coordinates, Width values.

An animation is part of a Storyboard; it must be an element of the Storyboard class, which can contain one or more animations that run sequentially, or in parallel. To begin a storyboard automatically, you can wrap the Storyboard element within a BeginStoryboard element, which starts the children Storyboard automatically. There are other actions that can control the storyboard, such as PauseStoryboard, StopStoryboard, etc.

Each control has a collection of Triggers, like, an EventTrigger (such as loading, clicking, etc.) can be used to trigger the beginning of a storyboard. There are many types of triggers, but the event trigger is the very common for combining an action with an animation. Below is a control that has the ability to change color when you click on it. It defines a template for the button's interface, essentially overriding the default implementation.

This is window1.xaml code
 

<Window x:Class="WpfApplication1.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Button Click Color Animation" Height="300" Width="300">

    <Grid>

        <Button Name="ColorBtn" Margin="92,105,86,107">

            <Button.Template>

                <ControlTemplate TargetType="{x:Type Button}">

                    <Grid>

                        <Ellipse x:Name="PlayButtonEllipse" Fill="Blue" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"

                                    Opacity="0.75"/>

                        <Polygon x:Name="PlayButtonArrow" Points="5,0 5,20 20,10" Fill="LightYellow" Stroke="Black" StrokeThickness="0.5"

                                    HorizontalAlignment="Center" VerticalAlignment="Center" />

                    </Grid>

                    <ControlTemplate.Triggers>

                        <EventTrigger RoutedEvent="Button.Click">

                            <EventTrigger.Actions>

                                <BeginStoryboard>

                                    <Storyboard>

                                        <ColorAnimation Storyboard.TargetName="PlayButtonEllipse"  Storyboard.TargetProperty="Fill.Color"

                                                From="CornflowerBlue" To="Navy" Duration="0:0:0.5" AutoReverse="True"/>

                                        <ColorAnimation Storyboard.TargetName="PlayButtonArrow"  Storyboard.TargetProperty="Fill.Color"

                                                From="LightYellow" To="Orange" Duration="0:0:0.5" AutoReverse="True"/>

                                    </Storyboard>

                                </BeginStoryboard>

                            </EventTrigger.Actions>

                        </EventTrigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Button.Template>

        </Button>

    </Grid>

</Window>

When, we run the application,

Image 1.

When we click on the button,

 
Image 2.