Everyone likes animation! Don’t you miss Homer Simpson GIF image walking on your computer screen? In this article we will introduce animations in Windows Presentation Foundation. WPF provides an easy way to create smooth animation effects using dependency properties. We are going to take a look at various types of animation including DoubleAnimation and ColorAnimation. We will also create an inherited control which uses animation by default.

Introduction:

Everyone likes animation! Don’t you miss Homer Simpson GIF image walking on your computer screen?

In this article we will introduce animations in Windows Presentation Foundation. WPF provides an easy way to create smooth animation effects using dependency properties. We are going to take a look at various types of animation including DoubleAnimation and ColorAnimation. We will also create an inherited control which uses animation by default.

Creating DoubleAnimation:

DoubleAnimation is used to change the double data type value of the object. This value can the width, height or even the axis of the control. Let's check out how to use DoubleAnimation to increase the width of the Button control.

Here is the XAML code that makes up the button.



And here is the code that will animate the Button control.


The above code will increase the width of the button control from 100 to 300. The RepeatBehavior property is set to Foreever which means that the width of the button will be increased from 100 to 300 in a loop.

Creating ColorAnimations:

ColorAnimation is used to animate the color property of an object. The code below will change the background color of the button from gray to green.


This time the animation is performed on the brush and not the button control.

Creating a FadeListBoxItem Control:

Consider a scenario in which you allow the user to add items to the ListBox control.  You want to highlight the newly added item and fade it back to the original color so that user can easily identify which item is added to the list. Here is the code that will perform the animation.

The above code will fade the ListBoxItem from Yellow color to White. The duration of the animation effect will be 3 seconds.

The scenario above can be handled more effectively by creating a new ListBoxItem control called FadeListBoxItem.


The above code creates the FadeListBoxItem control which derives from the ListBoxItem control. The FadedListBoxItem added a fading animation feature to the regular ListBoxItem control.

Now, you will write the following code to achieve the animation effect when adding a new ListBoxItem.



Conclusion:

In this article you learned about different animations that are available in the Windows Presentation Foundation. We also learned that how easily we can inherit from the WPF controls and enable animation features on them.

Happy Coding!