How to create light box effect for popup in .net windows application


This article explains how to achieve the light box effect for popup in .Net windows applications.It is exactly similar to the web app's popup concept. After putting the lot of effort in google and msdn,came up with this simple way of doing.

Popup is displaying the content in foreground window and fade the background page.Users may call this popup background effect is Lightbox,or Greybox, or Thickbox, but it's always the same effect.
Performing this popup effect is quite easy in the web application using javascript,css or any of third party plugins like Jquery, ajax in the .net.
we can achieve same in the .net win forms in a simple way with out using any .Net supportive technologies and any third party dll's.

To do this follow the below steps
Step-1: Open the visual studio
Step-2: Create the new windows application project from visual studio by selecting the following template
File->New->Project->Visual C#->Windows->Windows Forms Application and type the name for project and click on ok button.
Step-3: The Created project has a Form by default with the name Form1.Just rename the Form1 to "Background" by right
clicking on the Form1 for easy code understanding further.
Step-4: Add the new form by right click on project->Add->New Item->Visual C# Items-> Windows Form and name it as "Foreground"
Step-5: Set the following properties for Foreground form(right click on the form and select properties/select form and press F4)
-BackColor=ControlDark(what color want to show in background,select that color)
-FormBorderStyle=None
-ShowInTaskbar=False
-SizeGripStyle=Hide
-StartPosition=Manual
-Opacity=50%
(opacity value depends on visiblity of background form controls).
Step-6: Navigate to Background form and drag the button control from tool box and place it on the form and set Text=ShowEffect
Step-7: Double click on the button to generate click event.write the following code in this generated button click event.


private void button1_Click(object sender, EventArgs e)
{
Foreground foreground = new Foreground();
foreground.SuspendLayout();
int BorderWidth = 0;
//Get the border width values of the form
if (this.VerticalScroll.Visible == true)
BorderWidth = (this.Width - (this.ClientSize.Width +
SystemInformation.VerticalScrollBarWidth)) / 2;
else
BorderWidth = (this.Width - this.ClientSize.Width) / 2;
//Get the Title bar height of the form
int TitlebarHeight = this.Height - this.ClientSize.Height - 2 * BorderWidth;
//Setting the Current form(Background) bounds to the Foreground form bounds
if (this.VerticalScroll.Visible == true)
foreground.SetBounds(this.Left, this.Top + TitlebarHeight + BorderWidth,
this.ClientSize.Width + SystemInformation.VerticalScrollBarWidth +
BorderWidth * 2, this.ClientSize.Height + BorderWidth);
else
foreground.SetBounds(this.Left, this.Top + TitlebarHeight + BorderWidth,
this.ClientSize.Width + BorderWidth * 2, this.ClientSize.Height + BorderWidth);
foreground.PerformLayout();
foreground.Owner = this;
foreground.Show();
// Here we can show popup window /Dialog box/another form also like
// Message Box shown in this code.
MessageBox.Show(this, "This is the light box effect article", "dotenetspider",
MessageBoxButtons.OK, MessageBoxIcon.Information);
foreground.Close();//disableing the effect
}


Step-8: Run the application by press F5.


Attachments

Comments



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: