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:
![Btnanimation1.bmp]()
After focused or mouse over or click:
![Btnanimation2.bmp]()
I hope you like this article. If having any doubts leave me a message.