Animation in WPF using DynamicResource

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">

</Button>

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">

<Setter.Value>

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

<ControlTemplate.Resources>

<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>

<SplineColorKeyFrame KeyTime="00:00:30" Value="Violet">

</SplineColorKeyFrame>

</ColorAnimationUsingKeyFrames>

<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>

<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>

<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>

<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"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</ControlTemplate.Resources>

<Grid>

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

<Ellipse.RenderTransform>

<TransformGroup>

<ScaleTransform/>

<SkewTransform/>

<RotateTransform/>

<TranslateTransform/>

</TransformGroup>

</Ellipse.RenderTransform>

</Ellipse>

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

</Grid>

<ControlTemplate.Triggers>

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

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

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

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

<Trigger.EnterActions>

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

</Trigger.EnterActions>

</Trigger>

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

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

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

 

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:

 

 

 

I hope you like this article. If having any doubts leave me a message.