Custom Alert Box in C#

custom alert box in C#

Custom Alert Box in C# plays an important role when you are designing an interactive interface for your app. We can optimize user experience using these simple custom created controls. So, forget old and boring desktop apps and try to change the look and feel of your application.

In this tutorial we will learn how to create custom alert box in C# without using any third party tool.

Tools Required:

  1. Visual Studio 2010 or later version.
  2. Pichon Desktop App (Optional) for icons. Download it from Here.

Steps to Follow:

  1. Create a new Windows forms applications project in Visual Studio
  2. Go to to the design view of your form and for demonstration purpose add four buttons for alert type Success, Warning, Error and Info. Change their backgroud colors to SeaGreen, DarkOrange, DarkRed and RoyalBlue respectively.
  3. Now right click on project file (in solution explorer) and click on add new Item and Windows Form. Name that form as Form_Alert and hit enter. This will work as an alert box.
  4. Select your form and go to properties and change the FormBorderStyle to None.
  5. Add a picture box, a label and a button from toolbox. Customize the alert form as per your requirement. Rename the label name to lblMsg.
  6. Open the code view of Alert form and create two Enumerations, one for FormAction and other for AlertType.
public enum enmAction
        {
            wait,
            start,
            close
        }

        public enum enmType
        {
            Success,
            Warning,
            Error,
            Info
        }
        private Form_Alert.enmAction action;

7. Add a Timer control from ToolBox into your form.

8. Create a method (in Form_Alert.cs) to deal with the functionality of Alert Box.

private int x, y;
public void showAlert(string msg, enmType type)
        {
            this.Opacity = 0.0;
            this.StartPosition = FormStartPosition.Manual;
            string fname;

            for (int i = 1; i < 10; i++)
            {
                fname = "alert" + i.ToString();
                Form_Alert frm = (Form_Alert)Application.OpenForms[fname];

                if (frm == null)
                {
                    this.Name = fname;
                    this.x = Screen.PrimaryScreen.WorkingArea.Width - this.Width + 15;
                    this.y = Screen.PrimaryScreen.WorkingArea.Height - this.Height * i - 5 * i;
                    this.Location = new Point(this.x, this.y);
                    break;

                }

            }
            this.x = Screen.PrimaryScreen.WorkingArea.Width - base.Width - 5;

            switch(type)
            {
                case enmType.Success:
                    this.pictureBox1.Image = Resources.success;
                    this.BackColor = Color.SeaGreen;
                    break;
                case enmType.Error:
                    this.pictureBox1.Image = Resources.error;
                    this.BackColor = Color.DarkRed;
                    break;
                case enmType.Info:
                    this.pictureBox1.Image = Resources.info;
                    this.BackColor = Color.RoyalBlue;
                    break;
                case enmType.Warning:
                    this.pictureBox1.Image = Resources.warning;
                    this.BackColor = Color.DarkOrange;
                    break;
            }


            this.lblMsg.Text = msg;

            this.Show();
            this.action = enmAction.start;
            this.timer1.Interval = 1;
            this.timer1.Start();
        }

9. Now go to the Timer_Tick event of the timer and add the following code:

switch(this.action)
            {
                case enmAction.wait:
                    timer1.Interval = 5000;
                    action = enmAction.close;
                    break;
                case Form_Alert.enmAction.start:
                    this.timer1.Interval = 1;
                    this.Opacity += 0.1;
                    if (this.x < this.Location.X)
                    {
                        this.Left--;
                    }
                    else
                    {
                        if (this.Opacity == 1.0)
                        {
                            action = Form_Alert.enmAction.wait;
                        }
                    }
                    break;
                case enmAction.close:
                    timer1.Interval = 1;
                    this.Opacity -= 0.1;

                    this.Left -= 3;
                    if (base.Opacity == 0.0)
                    {
                        base.Close();
                    }
                    break;
            }

10. Now Rebuild your solution to check if there is any error and proceed to the next step.

11. Go to your Main Form and open code view (F7 short key) and create a new method to show our custom alert box:

public void Alert(string msg, Form_Alert.enmType type)
        {
            Form_Alert frm = new Form_Alert();
            frm.showAlert(msg,type);
        }

12. The final step is to call this method on button click event.

private void button1_Click(object sender, EventArgs e)
        {
            this.Alert("Success Alert",Form_Alert.enmType.Success);
        }

        private void button2_Click(object sender, EventArgs e)
        {
            this.Alert("Warning Alert", Form_Alert.enmType.Warning);
        }

        private void button3_Click(object sender, EventArgs e)
        {
            this.Alert("Error Alert", Form_Alert.enmType.Error);
        }

        private void button4_Click(object sender, EventArgs e)
        {
            this.Alert("Info Alert", Form_Alert.enmType.Info);
        }

Video Tutorial:

Custom Notification box in C#

Source Code:

I hope you enjoyed this article. Please don’t forget to subscribe our official YouTube Channel C# Ui Academy.

6 comments

  1. I would like to thank you for the efforts you have put in writing this web site. I’m hoping the same high-grade site post from you in the upcoming also. In fact your creative writing skills has encouraged me to get my own site now. Really the blogging is spreading its wings rapidly. Your write up is a good example of it.

  2. Very user friendly and useful. Thanks for uploading the source code as well. You are very creative and innovative.

  3. Very amazing, thank you. I just have a question; If I were to work with a secondary screen ¿how can I set the position properly?; I mean it would be great if the notification appears in the screen I’m currently working.

Comments are closed.