Login Form in WPF Application Using ASP.Net C#

Background

Identifying the user using authentication is a very important task in any application development and I have often read forum posts asking how to create a Login form in a WPF application using a Stored Procedure. As a result of the preceding requirements I have decided to write this article to help beginners, students and anyone that wants to learn how to create a WPF Login form using a Stored Procedure. So let us start with the walkthrough.

 

First create one table named "Emp_Login" in the SQL database that looks as in the following image:

 

 

Insert a record in the table as:

Insert into Emp_Login (userName,word) values ('vithalC97','mumbai@123')

In the preceding table the UserName column is used to store the user name and the word column is for the user's word.

Now let us create a Stored Procedure named "user_Sp_Login" as follows:

 

alter Procedure Emplogin
(
@UserId varchar(50),
@word varchar(50)

)
as
begin
select count(*) from Emp_Login where UserName=@UserId and word=@word
End

 

In the preceding Stored Procedure named "Emplogin" the variable "@Usename" is used for the username and "@word" is used for the word. The select query that I have written in the beginning counts the number of users from the table whose name matches the exact two variables; that is @Usename and @word that comes from the front-end user input page. Now create the project named Loginapplication or you can specify any name as:

1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".
2. "File" - "New Project" - "C#" - WPF Application.
3. Provide the Project name such as LoginAppUsingWPF or another as you wish and specify the location.
4. Then right-click on Solution Explorer then select  "Add WPF  windows forms", that is, Window1.xaml is renamed to Login.Xaml for the Login Credentials and "Window2.xaml" is renamed to Landing.Xaml for redirecting after successful login.
5. Drag and drop one button, two Labels and one TextBox and one wordBox from the Toolbox onto Login.Xaml.

Now the  Solution Explorer will look such as:

 

 

And  the Login.Xaml design looks as following:

 

 

 

Now to add the class for the database connection. Right-click on the solution in the Solution Explorer then select Add new item, Class and rename it DBConnection.

 

  Now the solution in the Solution Explorer will look such as:

 

 

 

Now open the DBconnection class file and write the following code to connect to the database:

using System.Data.SqlClient;


namespace LoginAppUsingWPF
{
    public class DBconnection
    {
        public SqlConnection con;
        public string constr;
        public void connection()
        {
            //DataBase Connection Details
            constr = "Data Source=VITHAL;Initial Catalog=C#corner;User Id=sa;word=swift";
            con = new SqlConnection(constr);
            con.Open();

        }
    }
}

 

 

Then the Login.Xaml design looks as in the following:

 

 

 

Then double-click on the Login button and write the following code in the Login_click function:

using System;
using System.Windows;
using System.Data.SqlClient;
using System.Data;

namespace LoginAppUsingWPF
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {


            if (textBox2.Text != "" && wordBox1.word != "")
            {
                DBconnection objconn = new DBconnection();
                objconn.connection(); //calling connection

                SqlCommand com = new SqlCommand("user_Sp_Login", objconn.con);
                com.CommandType = CommandType.StoredProcedure;
                com.Parameters.AddWithValue("@UserId", textBox2.Text);
                com.Parameters.AddWithValue("@word", wordBox1.word);

                int IsValidUser = Convert.ToInt32(com.ExecuteScalar());
                if (IsValidUser == 1) //if user found it returns 1
                {
                    Landing obj = new Landing();

                    MainWindow objmain = new MainWindow();
                    obj.Show(); //after login Redirect to second window
                    objmain.Hide();//after login hide the  Login window


                }
                else
                {

                    MessageBox.Show("InValid UserId Or word");

                }
            }
            else
            {

                MessageBox.Show("UserId and word Is Required");

            }


        }
    }
}

 The most important part of the preceding code is the If condition part, I have used an integer variable to count the single value from the Stored Procedure using "ExecuteScalar", if the records are found in the table then it returns 1 then the page is redirected to the Welcome page otherwise it gives Invalid user Name or word.

 

 Setting the Default  Startup window in WPF application

 

In the web application we can eaisly set the  startup page by using many options similar to this. We can set the startup window in the WPF application from the App.xaml file as in the following:

 

 

As In the preceding Image , we can set the default startup window using StartupUri from the App.xaml file.

 

Now run the application.

our userName is: vithalc97

and word is: Mumbai@123

 

That we have already entered into the table at the creation of the table. If you enter an invalid user name or word then it gives an error as shown in the following:

 

Now enter the valid username and word, that is:

 

UserName: Vithalc97

and word: Mumbai@123 as

 

Then the form is redirected to the Main window  as shown in the following:

 

 

 Note

• For detailed code please download the sample Zip file.
• Perform the changes in the connectionStrings that is located in the DBConnection class file depending on your server location.

Summary

 

From all of the preceding examples we have learned how to create a WPF Login form. I hope this article is useful for all readers. If you have a suggestion then please contact me.