How to Create a Modern Login Form Using C# Step by Step Tutorial

In this tutorial, I will guide you step by step on how to create a modern login form using C#. Even if you are new to programming or C#, don’t worry, I’ll keep the instructions simple. By the end of this, you will have a good looking, functional login form that looks professional.

Step 1: Setting Up Your Development Environment

Before we start, you’ll need to have Visual Studio installed on your computer. If you haven’t installed it yet, you can download it from the official Visual Studio website. Choose the Community edition, which is free and has everything you need.

Once you have Visual Studio installed, follow these steps to create a new project:

• Open Visual Studio.
• Click on Create a new project.
• In the search bar, type Windows Forms App and select the option that appears (make sure it’s for C#).
• Give your project a name. Let’s call it "LoginApp".
• Choose a folder on your computer where you want to save the project, then click Create.

Now you have a blank Windows Forms project set up, and we can start building the login form.

Step 2: Designing the Login Form

We’ll now design the form by adding the necessary elements like text boxes for the username and password, and a button for the login action.

• In the Solution Explorer (usually on the right side of the screen), double-click on Form1.cs. This will open the form designer.
• From the Toolbox (on the left), drag and drop the following controls onto the form:
  • Two TextBoxes (one for the username, one for the password)
  • One Button (for the login action)
  • Two Labels (to label the TextBoxes)
• Arrange the elements neatly on the form. Place the two TextBoxes under each other and the Button below them. Use the Labels to mark the TextBoxes as Username and Password.

Step 3: Styling the Login Form

To make the form look modern and polished, we’ll add some style to the elements.

1. Setting the background

Let’s start by giving the form a nice background color:

• Click anywhere on the form (but not on any of the controls).
• In the Properties window , scroll down to find the BackColor property.
• Choose a color for the form background. You can pick something light, or go with a darker theme if you prefer.

2. Customizing the TextBoxes

Next, we will style the TextBoxes to make them look modern:

• Click on each TextBox and in the Properties window, change the Font to Segoe UI and set the size to 12.
• To add some padding, go to the Padding property and set it to 5, 5, 5, 5.
• For the password TextBox, find the UseSystemPasswordChar property and set it to true. This will hide the characters when the user types their password.

3. Creating a Rounded Button

To give the login button a rounded look, we need to add a bit of code. In the Properties window, set the FlatStyle of the button to Flat and change the BackColor to Royal Blue and the ForeColor to White.

Next, open the Code View by clicking on Form1.cs in the Solution Explorer and replace the InitializeComponent method with the following code:

  private void InitializeComponent() { 
    this.usernameTextBox = new TextBox(); 
    this.passwordTextBox = new TextBox(); 
    this.loginButton = new Button();

    // Username TextBox properties
    this.usernameTextBox.Location = new Point(50, 30); 
    this.usernameTextBox.Size = new Size(200, 30); 

    // Password TextBox properties
    this.passwordTextBox.Location = new Point(50, 80); 
    this.passwordTextBox.Size = new Size(200, 30); 
    this.passwordTextBox.UseSystemPasswordChar = true; 

    // Login Button properties
    this.loginButton.Text = "Login"; 
    this.loginButton.Location = new Point(50, 130); 
    this.loginButton.Size = new Size(200, 30); 
    this.loginButton.FlatStyle = FlatStyle.Flat; 
    this.loginButton.BackColor = Color.RoyalBlue; 
    this.loginButton.ForeColor = Color.White; 
    this.loginButton.Click += new EventHandler(this.loginButton_Click);

    // Adding controls to the form
    this.Controls.Add(this.usernameTextBox); 
    this.Controls.Add(this.passwordTextBox); 
    this.Controls.Add(this.loginButton); 

    this.Text = "Login Form"; 
    this.Size = new Size(320, 250);
  }
  

Step 4: Adding Functionality to the Login Button

Now, we need to add the functionality for the login button. When the user clicks the button, the form should check if the username and password are correct.

In Form1.cs, add the following method below the InitializeComponent method:

  private void loginButton_Click(object sender, EventArgs e) { 
    string username = this.usernameTextBox.Text; 
    string password = this.passwordTextBox.Text;

    if (username == "admin" && password == "password123") { 
        MessageBox.Show("Login successful!"); 
    } else { 
        MessageBox.Show("Invalid credentials, please try again."); 
    }
  }

Step 5: Testing Your Login Form

Now that everything is set up, it's time to test the form:

• Click on the Start button in Visual Studio to run the project.
• When the form appears, try typing admin as the username and password123 as the password.
• If everything works, you should see the success message. If not, double-check the code to ensure everything matches.

Complete Code

Here’s the complete code for your login form:

    
    using System;
    using System.Windows.Forms;

    namespace LoginApp {
        public class LoginForm : Form {

            private TextBox usernameTextBox;
            private TextBox passwordTextBox;
            private Button loginButton;

            public LoginForm() {
                InitializeComponent();
            }

            private void InitializeComponent() {
                this.usernameTextBox = new TextBox();
                this.passwordTextBox = new TextBox();
                this.loginButton = new Button();

                // Username TextBox properties
                this.usernameTextBox.Location = new Point(50, 30);
                this.usernameTextBox.Size = new Size(200, 30);

                // Password TextBox properties
                this.passwordTextBox.Location = new Point(50, 80);
                this.passwordTextBox.Size = new Size(200, 30);
                this.passwordTextBox.UseSystemPasswordChar = true;

                // Login Button properties
                this.loginButton.Text = "Login";
                this.loginButton.Location = new Point(50, 130);
                this.loginButton.Size = new Size(200, 30);
                this.loginButton.FlatStyle = FlatStyle.Flat;
                this.loginButton.BackColor = Color.RoyalBlue;
                this.loginButton.ForeColor = Color.White;
                this.loginButton.Click += new EventHandler(this.loginButton_Click);

                // Adding controls to the form
                this.Controls.Add(this.usernameTextBox);
                this.Controls.Add(this.passwordTextBox);
                this.Controls.Add(this.loginButton);

                this.Text = "Login Form";
                this.Size = new Size(320, 250);
            }

            private void loginButton_Click(object sender, EventArgs e) {
                string username = this.usernameTextBox.Text;
                string password = this.passwordTextBox.Text;

                if (username == "admin" && password == "password123") {
                    MessageBox.Show("Login successful!");
                } else {
                    MessageBox.Show("Invalid credentials, please try again.");
                }
            }
        }
    }
    
  

That’s it! You’ve just created a , functional login form in C#. You can now experiment with different colors, fonts, or even add more features like connecting it to a database.