How to create a fading form.

• Download source and demo project - 18 Kb

Introduction

This article will show you how to create a form that will fade out when deactivated and fade in when activated.

Background

I was looking for a way to make the active form in an application stick out from the other non-active forms in a visually appealing way. I really liked the fade in/out effect used with the Start Menu of XP and 2000, but I was unable to find any help on forms that had that effect. So, I set out to create a form that would have the fade effect and allow for the user to easily distinguish the active form from the others. The result is the FaderForm and it provides a nice visual effect and makes the active form readily identifiable to the user.

Using the code

Basically, we are just going to start with a basic Windows Form, add a timer to increment/decrement the percent of Opacity, handle two Form events (Activated & Deactivate) and add some initialization code to the constructor of the FaderForm class.

First, start off with a plain form. Set the following properties to these values:

• Text: FaderForm
• Name: FaderForm

Second, add a Timer control to the form and set the following properties to these values:

• Name: FadeTimer
• Interval: 1
• Enabled: False

You now have all of the components required. Now, in order to have the form fade in and out we have to handle two events, Activated and Deactivate. The actual incrementing/decrementing of the Opacity of the form is done in the FadeTimer_Tick event handler of the FadeTimer component. The Activated and Deactivated event handlers will set the Status flag and enable the FaderTimer. When the Status flag is set to FADEIN, the FadeTimer_Tick event handler will increase the Opacity, when Status is set to FADEOUT, the FadeTimer_Tick event handler will decrease the Opacity. The FadeTimer_Tick event handler increments the Opacity to 100% or decrements to 50% (depending upon the Status flag) then shuts itself off. One tick is handled every ffTransitionTime milliseconds. Let's start with the class members first.

First, we will need to create four private class members at the beginning of the FaderForm class. The members are as follows:

• FadeFlag: Type Enum. An enumeration that provides the values FADEIN and FADEOUT used in the Status variable.
• Status: Type FadeFlag. Used to store the status of the desired transition effect.
• intTransitionStep: Type Integer. The amount to increment or decrement the Opacity.
• bFadeEnabled: Type Boolean. Variable used to enable or disable the fade effect.

Public Class FaderForm
Inherits System.Windows.Forms.Form
    
'Enumeration for the current status of the window.
Private Enum FadeFlag
    FADEIN
    FADEOUT
End Enum

'Var to keep track of which transition is 
'going to take place (fade in or out)
Private Status As New FadeFlag()

'Var to hold the increment amount when 
'increasing/decreasing the Opacity
Private intTransitionStep As New Integer()

'Var used to enable or disable the fade in/out effect
Private bFadeEnabled As New Boolean()

Next, add three public properties (to keep the properties grouped together in the Properties List, they all have the prefix ff for faderform). The range checking can be changed to suit your needs.

• ffTransitionTime: Amount of time in milliseconds that elapses before incrementing or decrementing the Opacity by intTransitionStep.
• ffTransitionStep: The amount that the Opacity is incremented or decremented.
• ffFadeEnabled: The variable used to enable or disable the fading effect.

The property ffTransitionTime is defined as:

'TransitionTime: The amount of time (in milliseconds) that elapses before
'increasing or decreasing the Opacity by intTransitionStep.
Public Property ffTransitionTime() As Integer
    Get
        Return FadeTimer.Interval
    End Get
    Set(ByVal Value As Integer)
    'If the value is between 1 ms and 1000ms it's valid
    'If not, set the intTransitionTime to 1 (default value)
    If Value <= 0 Or Value > 1000 Then
        FadeTimer.Interval = 1
    Else
        FadeTimer.Interval = Value
    End If

    End Set
End Property

The property ffTransitionStep is defined as:

'TransitionStep:  The value used to increment the Opacity.
Public Property ffTransitionStep() As Integer
    Get
        Return intTransitionStep
    End Get
    Set(ByVal Value As Integer)

        'If the incremented value is between 1 and 50 it's valid
        'If not, set it to the default value of 2
        If Value < 1 Or Value > 50 Then
            intTransitionStep = 5
        Else
            intTransitionStep = Value
        End If

    End Set
End Property

The property ffFadeEnabled is defined as:

Public Property ffFadeEnabled() As Boolean
    Get
        Return bFadeEnabled
    End Get
    Set(ByVal Value As Boolean)

        bFadeEnabled = Value

        If Value = False Then
            'Since the fade in/out effect is being turned off, set 
            'the opacity to 100%, disable the timer, and even though 
            'it's not necessary set the Status to FADEIN.
             Me.Opacity = 1.0
             FadeTimer.Enabled = False
             Status = FadeFlag.FADEIN

        End If

    End Set
End Property

Finally, write the event handlers for the following:

• FadeOut : Handles the Deactivate event of the form.
• FadeIn: Handles the Activated event of the form.
• FadeTimer_Tick: Handles the Tick event of FadeTimer.

The event handler for FadeOut:

'FadeOut: Fired when the form loses focus through code or by the user. 
'If the bFadeIn_Out value is set to true then 
'this routine will set the Status
'flag to FADEOUT, the timer will gradually decrease the opacity of the form.
Private Sub FadeOut(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles MyBase.Deactivate

    'First check the status of the FadeIn_Out property.
    If bFadeEnabled = True Then

        'Set the status to FadeOut
        Status = FadeFlag.FADEOUT

        'Turn the timer ON
        FadeTimer.Enabled = True

    End If

End Sub

The event handler for FadeIn:

'FadeIn:Fired when the form is activated through code or by the user. 
' If the bFadeIn_Out value is set to true then this 
'routine will set the Status
' flag to FADEIN, the timer will gradually increase the opacity of the form.
Private Sub FadeIn(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles MyBase.Activated

    'First check the status of the FadeIn_Out property.
    If bFadeEnabled = True Then

        'Set the status fo FadeIn
        Status = FadeFlag.FADEIN

        'Turn the timer On
        FadeTimer.Enabled = True

    End If

End Sub

The event handler for FadeTimer_Tick:

'FadeTimer_Tick:  When the timer is enabled, 
'it will check the value held in the 
' Status variable.  If the value is FADEIN the form's opacity is
' gradually increased or decreased by the value held in intTransitionStep
' every ffTransitionTime milliseconds.
Private Sub FadeTimer_Tick(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles FadeTimer.Tick
    
    'Check the value of Status
    If Status = FadeFlag.FADEIN Then

        'We know the status is set to "fade in". Increase the Opacity
        'Check the level of opacity
         If Me.Opacity >= 1 Then
             'Shut the timer off.  Our work is done here.
             FadeTimer.Enabled = False
         Else
             'Increase the opacity by 1%
             Me.Opacity = Me.Opacity + intTransitionStep / 100.0
         End If

    Else

         'We know the status is set to "fade out". Decrease the Opacity
         'Check the level of opacity
         If Me.Opacity <= 0.5 Then
             'Shut off the timer. Our work is done here
             FadeTimer.Enabled = False
         Else
             'Decrease the opacity
             Me.Opacity = Me.Opacity - intTransitionStep / 100.0
         End If

    End If

End Sub

Finally, we need to add some initialization code in the constructor of the FaderForm class.

Public Sub New()
    MyBase.New()

    'This call is required by the Windows Form Designer.
    InitializeComponent()

    'Add any initialization after the InitializeComponent() call
    'Set the status of the form when it is created.

    'Set the default values for the FaderForm.
    Status = FadeFlag.FADEIN
    FadeTimer.Enabled = False
    intTransitionStep = 5
    bFadeEnabled = True

End Sub

Your FaderForm is now ready to go. In the example I provided the FaderForm is built into a class library within the folder MMM, the project that implements it is contained within the folder AnotherTest. Simply click on the AnotherTest.sln file, build the example application and have fun! Suggestions and comments are always appreciated, thanks for reading my article!

History

• May 12, 2003 - Uploaded original article and code.