I am a software engineer. I have been working with C++, MFC, and .net technologies for 15 years. I like video games and reading books.
In this article, we will see how to display the form that goes fully transparent before it gets closed. We need follow the below-specified steps to create the example application with Fade-Out effect.
2. Setup the Form
- Create a New Visual C# project using VS 2005 IDE. The project Type is Windows Application.
- Add a Label Control to the form.
- Add a Timer Component to the form. The component appears below the form in the grey area as shown in the screenshot.
- If it is required, we can set the Label’s Background and foreground colors.
- Set the Form’s Background color.
The finished form looks like below:
3. The Timer Component
The Timer is found in the Component portion of the toolbox. Once we drag and drop it to the form it will appear as shown in the above picture. Timer Component exposes an event called Tick. This Tick event is raised for a certain Time Spawn. We use the Interval Property to set this Time Spawn.
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.
4. Form Load Event Handler
The Dot Net Framework invokes this handler when the Form is loading and before it get displayed. We will continue with the steps to implement the Form Load event handler.
- Double click the form.
- It will bring us to the code editor inside the Form Load event. The load event is the default event for the form.
- 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:
5. Opacity Property Of The 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, in this handler, we will set the Opacity property of the by reducing the property value.
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 completely transparent. So it is clear that the default value for this property is 100%. Because, it is common that every user wants to display their Form without any transparencies unless there is a special necessity.
Now, we will 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.
- Double click the Timer1 component.
- This will bring us to the Timer’s Tick Event Handler.
- Inside this handler, we will write the below code:
6. 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. We can use the “FormClosingEventArgs” which is passed as the parameter by the FrameWork. In the meantime, we will enable the timer component by setting its Enable Property to true. Setting this property to true makes the timer raising the Tick Event at a certain time period based on the value in Interval Property. Note, we specified the Interval as 50. The unit is in milliseconds. This 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 we will 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 us to the handler of the Form Closing in code window.
5) Write the below specified code. The explanation for the code is given before these Steps.
That is all. We have done it. Now, we can run the application and click the close button and watch form fading out before it removed from memory. Below is the Screenshot which was taken when the form is at Semi-Transparent state.
Complete Code Listing
© 2018 sirama