I wanna share…

Button Animation in WPF

DownLoad Link: Click Here

Here I am describing about how to apply the animation for button control.  I defined a button control like this:

<Button Margin=”99,88,99,99″ Name=”button1″

Style=”{DynamicResource TransformingButton}” Content=”Enter” Foreground=”SpringGreen” BorderBrush=”Violet” OpacityMask=”DarkRed” IsCancel=”True” SnapsToDevicePixels=”False” ToolTip=”Please Click….” FontFamily=”Verdana” FontSize=”14″>


You can see the DynamicResource name in Style property.

DynamicResource: DynamicResources are resolved at runtime. Use DynamicResources when the value of the resource could change during the lifetime of the Application.

I defined a Style in App.xaml file means under the Application.Resources tags.

Application.Resources: Resources defined at the application level can be accessed by all other pages that are part of the application.

These are the elements which are I used in the application.

ControlTemplate: Controls in Windows Presentation Foundation (WPF) have a ControlTemplate that contains the visual tree of that control. You can change the structure and appearance of a control by modifying the ControlTemplate of that control. There is no way to replace only part of the visual tree of a control; to change the visual tree of a control you must set the Template property of the control to its new and complete ControlTemplate.

Specifies the visual structure and behavioral aspects of a control that can be shared across multiple instances of the control.

StoryBoard: A Storyboard is a type of container timeline that provides targeting information for the timelines it contains. A Storyboard can contain any type of Timeline, including other container timelines and animations.

ContentPresenter: The concept of ContentPresenter is quite simple – it is a placeholder for any XAML content and it can be used to insert content at runtime.

Key-Frame Animation: Like a From/To/By animation, a key-frame animation animates the value of a target property. It creates a transition among its target values over its Duration.

ColorAnimationUsingKeyFrames: Animates the value of a Color property along a set of KeyFrames over a specified Duration.

DoubleAnimationUsingKeyFrames: Animates the value of a Double property between two target values using linear interpolation over a specified Duration.

SplineColorKeyFrame: Spline key frames like SplineColorKeyFrame create a variable transition between values according to the values of the KeySpline property

Code under Application.Resources is:

<Style x:Key=”TransformingButton” TargetType=”{x:Type Button}”>

<Setter Property=”Template”>


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


<Storyboard x:Key=”StoryBoard1″>

<ColorAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”ellipse” Storyboard.TargetProperty=”(Shape.Fill).(SolidColorBrush.Color)”>

<SplineColorKeyFrame KeyTime=”00:00:00″ Value=”PaleVioletRed”>


<SplineColorKeyFrame KeyTime=”00:00:30″ Value=”Violet”>



<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”ellipse” Storyboard.TargetProperty=”(UIElement.Opacity)”>

<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.9″></SplineDoubleKeyFrame>

<SplineDoubleKeyFrame KeyTime=”00:00:30″ Value=”0.5″></SplineDoubleKeyFrame>


<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”ellipse” Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)”>

<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0″/>

<SplineDoubleKeyFrame KeyTime=”00:00:30″ Value=”360″/>


<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”ellipse” Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)”>

<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.953333333333333″/>

<SplineDoubleKeyFrame KeyTime=”00:00:30″ Value=”0.5″/>


<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”ellipse” Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)”>

<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.95″/>

<SplineDoubleKeyFrame KeyTime=”00:00:30″ Value=”0.5″/>





<Ellipse x: Name=”ellipse” Fill=”CornflowerBlue” Stroke=”Wheat” RenderTransformOrigin=”0.5,0.5″>










<ContentPresenter HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” VerticalAlignment=”{TemplateBinding VerticalContentAlignment}” SnapsToDevicePixels=”{TemplateBinding SnapsToDevicePixels}” RecognizesAccessKey=”True”/>



<EventTrigger RoutedEvent=”FrameworkElement.Loaded”></EventTrigger>

<Trigger Property=”IsFocused” Value=”True”/>

<Trigger Property=”IsDefaulted” Value=”True”/>

<Trigger Property=”IsMouseOver” Value=”True”>


<BeginStoryboard Storyboard=”{StaticResource StoryBoard1}”></BeginStoryboard>



<Trigger Property=”IsPressed” Value=”True”/>

<Trigger Property=”IsEnabled” Value=”False”/>






Run the application and when the mouse over or click happens; the buttons rotates clockwise, gradually changes its color and size shrinks.

Before Focused or Mouse over or Click:

After Focused or Mouse over or Click:


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: