Form Fade Out on Closing

This article shows how you can close a form that fades out first, and then closes. It is step by step with an explanation in the middle when it is required.

Introduction

 

In this article I will explain how to display a form that goes fully transparent before the form is closed. Follow the specified steps below and I will give some explanation of what each step requires.

 

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. And a timer component to the form. The component appears below the form in the gray area.
4. If you need you can set the Label's Background and foreground colors.
5. If you need you can set the Form's Background color.

The finished form looks like below [In design view]:

 

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 picture above. Timer component raises an event called Tick. This Tick event is raised periodically for certain time interval. This time interval is set by the property interval. 

 

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

 

Form Load Event Handler

 

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

1. Double click the form.
2. It will automatically bring you to the code editor inside the Form Load event. The load event is the default event for the form. 
3. In the load event handler, assign the text for the Label control. Note the usage of Environment.Newline to place a new line 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 invoked. So, here we will set the Opacity property 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 compoenent. The effect is form goes from Solid to fully transparent. 

1. Double click the Timer1 component, which presents below the form.
2. This will bring you to the Timer's Tick event handler.
3. Inside this handler Place the following 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;

else

    this.Close();

 

Form Closing Event Handler

The FormClosing event occurs before the form is 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 later". What do we want to achieve? We want to Fade-out the form when the user clicks the close button.

 

When user clicks the close button, first FormClosing event is fired and then 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 causes the timer to start raising the Tick event periodically (Based on the Interval property). Also note that we specified the interval as 50. The unit is in milleseconds. 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:

1. As FormClosing is not a default event, go to the form designer and select the form
2. Open the Property window and Click the event button
   
   
   
   
3. In the left hand side event listing, double click the event name FormClosing
4. This will bring you to the handler for the Form Closing
5. 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;

}

else

{

     timer1.Enabled = false;

}

 

That is all; we have done it. Now run the application and click the close button. Watch it. Below is the Screen shot taken when the form is at Semi-Transparant.

 

 

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