WPF Animations

Posted by : ජේ Thursday, September 26, 2013

Windows Presentation Foundation (WPF) is a Computer Software graphical subsystem for rendering user interfaces in Windows-based applications by Microsoft. WPF attempts to provide a consistent programming model for building applications and separates the user interface from business logic. WPF use XAML to define and link various UI elements. WPF applications can also be deployed as standalone desktop programs, or hosted as an embedded object in a website. WPF aims to unify a number of common user interface elements, such as 2D/3D rendering, vector graphics, run time animation, and pre-rendered media.

How to do animations in WPF?

If you understand a few important concepts about the timing system, WPF animations can be easier to use. Most important is that, in WPF, you animate objects by applying animation to their individual properties. For example, to make a framework element grow, you animate its Width and Height properties. To make an object fade from view, you animate its Opacity property.

In this blog post I am going to discuss two ways of doing WPF animations. So I am going to show how to do a fade in fade out animation to a Text Box by using its Opacity property.

First we need to write an animation method to a given time period. My first approach I am going to implement it inside the window resources.

<Window.Resources>

<Style.Triggers>

<Trigger.EnterActions>

<DoubleAnimation Storyboard.TargetProperty="Opacity"

From="0.0" To="1.0" Duration="0:0:0.6"/>

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

</Trigger>

</Style.Triggers>

</Style>

</Window.Resources>

When the Text Box visibility property changes Hidden to Visible animation get automatically fire. To apply an animation to an object, I create a Storyboard and use the Target Property attached properties to specify the object and property to animate. Because the Opacity property is of type Double, you need an animation that produces double values. A DoubleAnimation is use for that purpose. A DoubleAnimation creates a transition between two double values. To specify its starting value, set From property. To specify its ending value, set To property.

Then I am going to bind this animation method with the Text Box.

Then I change the visibility property of the Text Box to Visible by using a Button in run time then it appears the fade animation that I have done to the Text Box.

C# code for Visibility change

private void mouseclick(object sender, RoutedEventArgs e)

{

txtAnimation.Visibility = Visibility.Visible;

}

In my second approach I am going to implement an animation which is fire for a Button click. So I add a Button and a Text Box. Inside the Button XAML tag I am going to implement the animation method.