Fade Animation [WPF]

Hello Everyone! This is Tushar.

Today, I am going to tell you how to implement Fade-In and Fade-Out effects for windows in WPF.

Edit Code in Visual Studio

1. Create a new project or open an existing project. Right click on Project in solution explorer and select Add New Item... Now a window is shown to you. Select Window and give appropriate name to your window (e.g. MyWindow.xaml) and click on OK.
2. Create a  transparent window as I have described in my previous blog Transparent Window [WPF].
3. Create a Close button as I have described in previous blog.
4. OK. Now we’ll handle behavior of window from Code behind. There will be two situations:
     I.    Window will Fade-In when window get loaded.
     II.   Window will Fade-Out when window get unloaded.
5. Now right click on your window in solution explorer and select Edit in Visual Studio. As soon as you do this, Expression Blend communicates with Visual Studio and your project gets loaded into visual studio.
6. Now Open Code-Behind file for your window (in our case MyWindow.xaml.cs) and you can see a class there. Now Set Opacity property of the window to 0(zero) in the constructor of the class.
7. To Fade-In window at the start-up, follow the following steps                                      I.    Create a Window Loaded event handler for the window to be faded.  To do this, go back to Blend and select Window from Object and Timeline Panel and go to Properties panel and click on Events icon. Here you can see many events related to window. Double click on Loaded event TextBox. Now again Visual studio gets loaded automatically and you can see an EventHandler method is generated there in the Code-Behind file.                                                                                        II.    Inside Event Handler method, write the following code snippet
   
   
   
   var ObjAnimation = new DoubleAnimation(1,(Duration)TimeSpan.FromSeconds(0.5)); 
   this.BeginAnimation(UIElement.OpacityProperty, ObjAnimation);
   
   
   III.    In this code snippet we are creating a variable for DoubleAnimation Class. The constructor for DoubleAnimation class takes final values as first parameter and duration to reach that value as second parameter. Then we call BeginAnimation () method where we are passing property to be changed and DoubleAnimation variable. This method starts animating as it changes specified property value to the final value in given duration. Here for example we are changing windows opacity property to 1 in 0.5 second.
8. To Fade-Out window at the start-up, follow the following steps:
   I.    Inside Event Handler method for close button, write the following code snippet
   
   
   var ObjAnimation = new DoubleAnimation(0,(Duration)TimeSpan.FromSeconds(0.5));
   ObjAnimation.Completed += new EventHandler(Animation_FadeOutCompleted);
   this.BeginAnimation(UIElement.OpacityProperty, ObjAnimation);
   
   
   II.    In this code snippet we are changing windows opacity property to 0 in 0.5 second.
9. As the animation completes, an event handler method named Animation_FadeOutCompleted is invoked. The Event-Handler is added for this method at line No. 3 in the code snippet. We close the window as soon as fade-out animation completes. The event handler method is written as :
   
   
   void Animation_FadeOutCompleted(object sender, EventArgs e)
   {
   this.Close();
   }
   
   
10. That's it! Now go back to Blend and select your solution and right click and select Test Solution.

Happy Coding :)