November 25, 2010

C# - Implement Fade Out on Form Close


In this article, I will explain how to display the form that goes fully transparent before the form gets closed. Follow the below-specified steps and I will give some explanation when a step requires it.

Set up the Form

  1. Create a New Visual C# project using VS2005 IDE. The project Type is Windows Application.
  2. Add a Label control to your form.
  3. Add a timer component to the form. The component appears below the form in the grey area (Look at the screenshot).
  4. If you need, you can set the Label’s Background and foreground colours.
  5. Set the Form’s Background colour.

The finished form looks like below:

The Timer Component

The timer is found in the Component portion of your toolbox. Once you drag and drop it to the form it will appear as shown in the above picture. Timer component raised an event called Tick. This Tick event is raised periodically for certain time interval. This time, the interval is set by the property interval

There are different types of timer available in dot net framework and I will discuss that in a different article. Here we used time as a component.

Form Load Event Handler

The Dot Net Framework invokes this handler when the form is loading and before get it displayed. Continue the steps to implement the Form Load event handler.

6) Double click the form.
7) It will automatically bring you to the code editor inside the Form Load event. The load event is the default event for the form. 
8) In the load event handler, assign the text for the Label control. Note the usage of Environment.Newline to place a newline in the string. The code written in this handler is shown below:

//Fade001: Set the Label Text
label1.Text = "The Fade Effect is given to" +
    Environment.NewLine + " this Form by Setting the"+
    "Opacity Property";

Tick event Handler for the timer and Opacity property of form

We already saw about the Timer and the Tick event for it. When a tick event is raised by the Timer component, the code in the Tick event handler is get invoked. So, here we will set the Opacity property of the by decrementing it.

The Opacity property is used to control the Transparency of the form. This property is specified in terms of percentage. When the Opacity property is at 0%, the form is fully transparent. So it is clear that the default value for this property is 100%.

Now continue with the steps to decrement this percentage from 100% to 1% in the handler that runs periodically saying thanks to Timer component. The effect is that the form goes from Solid to fully transparent.

9) Double click the Timer1 component.
10) This will bring you to the Timer’s Tick event handler.
11) Inside this handler Place the below code:

//Fade002: Check the Opacity property, When Opacity is 1%
// Close the form and stop the timer.
if (this.Opacity > 0.01)
    this.Opacity = this.Opacity - 0.01f;

Form Closing Event Handler

The "FormClosing event" occurs before the form gets closed. The event itself says that I am not yet done (Not closed, On the way of closing). So this is the correct place for us to say “Hey do not close it now. I will tell you when you should close”. What do we want to achieve? We like to Fade-out the form when the user clicks the close button.

When a user clicks the close button, first, FormClosing event is fired and then the "FormClosed event" is fired. We will check the Opacity property in the FormClosing event, and when it is not transparent enough we will Cancel the event using the "FormClosingEventArgs" passed as the parameter by the FrameWork. And at the same time the Enable the timer component by setting the Enable property to true. Setting the enable property to true makes the timer start raising the Tick event periodically (Based on the Interval property). Also, note that we specified the interval as 50. The unit is in milliseconds. That means, the Tick event is raised 20 times in a second. The simple calculation yields in around 5 seconds the form goes fully transparent and gets closed. Now continue with the steps:
12) As FormClosing is not a default event, go to the form designer and select the form
13) Open the Property window and Click the event button

14) In the left hand side event listing, double click the event name FormClosing
15) This will bring you to the handler for the Form Closing
16) Write the below specified code. The explanation for the code is given before these Steps.

//Fade003: Cancel Form close action when the opacity is
// more than 1%.
if (this.Opacity > 0.01f)
    e.Cancel = true;
    timer1.Interval = 50;
    timer1.Enabled = true;
     timer1.Enabled = false;

That is all we have done it. Now run the application and click the close button. Watch it. Below is the Screenshot was taken when the form is at Semi-Transparent.

Note: The attached code is in VS2005. Say yes to the conversion dialog when you have the latest version

Source Code : Download

No comments:

Post a Comment

Leave your comment(s) here.

Like this site? Tell it to your Friend :)