How to do Animation in WPF
This article will help to create different kind of animation for the application. In this article we will discuss about the different kind of animation in wpf. Also why animation required and the cases where we can have animation.
Why Animation Required?
Now day's user will need more interactive and graphics oriented application. We have to develop or use some times animation as well to make application more attractive so it will also help somehow to sale application. Cases:
Long Running Process
Status of Running Program
Highlighting the special objects
Progression of ActivityImplementation
Double Animation
Double Animation can be applied to any double property of a control like Opacity, Height and Width RadiusX,RadiusY and more. Things to remember in double animation are properties of double animation.
TargetName = Control Name where we want to apply animation. E.g. myEllipse
TargetProperty = Property of a control like Opacity and discussed above.
From = Start Value
To = End Value
Duaration = Time span value
RepeatBehavior : Is it Required to Repeat.
<StackPanel Margin="10">
<Ellipse Name="myEllipse" Width="75" Height="75" Fill="Black">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="myEllipse"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.2" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</StackPanel>
Color Animation
This is used to animate the color of a control. And it can be applied to a SolidColorBrush, GradiantColor and Background as well.
<StackPanel Margin="10">
<Ellipse Name="myEllipse" Width="75" Height="75">
<Ellipse.Fill>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="elpBrush"
Storyboard.TargetProperty="Color"
From="LightGray" To="Black" Duration="0:0:1"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</StackPanel>
Note : This is very simple way to do animation now here innovation and creativity required more things to use it. Also one thing most of the time we are going to create animation for progress bar kind of thing but we can also use wpf extended toolkit busy indicator to do that task.