How to do Animation in WPF

Posted Date: 16-Jun-2012	Category: WPF
Author: Ravindra Gaurana	Member Level: Gold	Points: 25

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 Activity

Implementation

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

Post Comment:

Notify me by email when others post comments to this article.

Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.

No HTML formatting and links to other web sites are allowed.

This is a strictly moderated site. Absolutely no spam allowed.

Name:	Sign In to fill automatically.
Email:	(Will not be published, but required to validate comment)
	Type the numbers and letters shown on the left.