This article is about how to add a simple
"Lightbox Effect" with few lines of code.
Lightbox" can be defined as an overlay with a transparent background. It just opens the form as a modal dialog. Here the user can open a new form rather than closing the previous form. The use of the dark background which makes the form dim on which the other form is overlaid on it. With this Lightbox effect, one can smoothly animate their winform applications and give them a customized look and feel. It is fully customizable, more convenient and 100% compatible.
Using the Code
I would like to briefly describe in a step wise manner so that it will be easy to understand.
Step 1: Create a new project and give any name to your project.
Step 2: Create two forms namely
Step 3: As shown in the below Image, you need to set the properties for the
Form2. You'll need to set the size based on the size of the
Form1 (i.e., First you need to check the size of the
Form1 and then set the same size to the
Step 4: Now go to
Form2 and Change its border style to "None" as shown below.
Now you get the resultant
Form2 as shown below:
Step 5: Now just copy and paste the below code:
Protected Overrides Sub OnPaintBackground(ByVal e As PaintEventArgs)
Using brush As Brush = New SolidBrush(Color.FromArgb(65, Color.Black))
In the above code, we are just painting the form using brush with color "
black" and set its opacity to "
OnPaint background method paints the background of the control which is on the
Step 6: Now just design your
Form1 as however you like as for sample. I have designed my form for my convenience as shown below:
Step 7: Next, you need to go to
Form1 and add the code below:
Private Sub Button1_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles Button1.Click
Dim Lightbox As New Form2()
Lightbox.SetBounds(Me.Left + 8, Me.Top + 30, _
Lightbox.Owner = Me
In the above code, I have just declared to show my second Form, i.e., "
Setbounds" is nothing but it takes into the consideration only the part below the "
Toolstrip" to the part above the "
StatusStrip". So you can adjust as per your requirements.
Step 8: After doing this, "Hit F5" and press "Button1" to see the output result and you can find the result as shown below.
As some of them asked me to add animation effects, I have added which you can see in the below screenshot as it resembles the original Lightbox effect which you can feel while validating records.
And similar to these, I have added two more Forms to give the same effect with different colours and transparency as you can see below:
- Version 1.0
- Version 1.1 (Made customized look and feel, added animation and transparency)