WPF Create Login Form with SQL Database

Let’s create WPF Login Form with SQL Database table binding. The WPF Login form will be having two WPF Textboxes for entering Email Address and Password for user credentials and a WPF button for initiating login process. The form will fetch Login details from SQL Database for a particular user and check for case-sensitive password and show us the next screen if its a valid user.

SQL Database script:

create database [DBCustomer]
USE [DBCustomer]
GO
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[tblCustomerInfo](
[Id] [int] IDENTITY(1,1) NOT NULL,
[CustomerName] [nvarchar](50) NOT NULL,
[CustomerEmail] [nvarchar](50) NOT NULL,
[Password] [nvarchar](50) NOT NULL,
[OnDate] [datetime] NULL DEFAULT (getdate()),
PRIMARY KEY CLUSTERED
(
[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

WPF Create Login Form with SQL Database :

In your WPF project create a new WPF form with name “Login” and edit as below :

Login.xaml:

<Window x:Class="WpfLogin.Login"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" BorderThickness="0" WindowStyle="None" BorderBrush="Black" ResizeMode="NoResize"
Title="Login" Height="250" Width="370" WindowState="Normal" WindowStartupLocation="CenterScreen" Background="Black">

<StackPanel Orientation="Vertical" Background="#a6d9ef" Margin="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<Border CornerRadius="25" Margin="20,10,20,10" BorderBrush="Red" Background="White" Width="330">
<StackPanel Orientation="Vertical">
<Label Content="Welcome" FontSize="25" HorizontalAlignment="Center" FontWeight="Bold" Margin="2,5,2,0" VerticalContentAlignment="Bottom"/>
<Label Content="Please Login to Proceed" FontSize="20" HorizontalContentAlignment="Center" FontWeight="Medium" Margin="2,0,2,10" FontStyle="Italic" VerticalContentAlignment="Top"/>

<Grid Margin="2" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Margin="0,5" Content="User Id : " VerticalContentAlignment="Center"
HorizontalContentAlignment="Right"/>
<TextBox Grid.Row="0" Grid.Column="1" x:Name="txtUserId" Margin="0,5" Width="150" VerticalContentAlignment="Center"
HorizontalContentAlignment="Left"/>

<Label Grid.Row="1" Grid.Column="0" Margin="0,5" Content="Password : " VerticalContentAlignment="Center" HorizontalContentAlignment="Right"/>
<PasswordBox Grid.Row="1" Grid.Column="1" x:Name="txtPassword" Margin="0,5" Width="150" VerticalContentAlignment="Center" HorizontalContentAlignment="Left"/>

<StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" HorizontalAlignment="Center">
<Button Content="LOGIN" x:Name="btnLogin" Margin="2,10" Width="100" Height="30" Click="btnLogin_Click_1" Background="#80ff00" Foreground="Black" BorderBrush="White"/>
<Button Content="CLOSE" x:Name="btnClose" Margin="2,10" Width="100" Click="btnClose_Click_1" Background="#ff2d2d" Foreground="Black" BorderBrush="White"/>
</StackPanel>
</Grid>
</StackPanel>
</Border>
</StackPanel>
</Window>

This will create following design :

Edit the code file as below :

Login.xaml.cs:

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Input;
using System.Data.SqlClient;
namespace WpfLogin
{
/// <summary>
/// Interaction logic for Login.xaml
/// </summary>
public partial class Login : Window
{
SqlConnection con;
SqlCommand cmd;
SqlDataReader reader;
static String connectionString = @"Data Source=192.168.0.192;Initial Catalog=DBCustomer;User ID=sa;Password=1234;";

public Login()
{
InitializeComponent();
}

private void btnLogin_Click_1(object sender, RoutedEventArgs e)
{
String message = "Invalid Credentials";
try
{
con = new SqlConnection(connectionString);
con.Open();
cmd = new SqlCommand("Select * from tblCustomerInfo where CustomerEmail=@CustomerEmail", con);
cmd.Parameters.AddWithValue("@CustomerEmail", txtUserId.Text.ToString());
reader = cmd.ExecuteReader();
if (reader.Read())
{
if (reader["Password"].ToString().Equals(txtPassword.Password.ToString(), StringComparison.InvariantCulture))
{
message = "1";
UserInfo.CustomerEmail = txtUserId.Text.ToString();
UserInfo.CustomerName = reader["CustomerName"].ToString();
}
}

reader.Close();
reader.Dispose();
cmd.Dispose();
con.Close();

}
catch (Exception ex)
{
message = ex.Message.ToString();
}
if (message == "1")
{
MainWindow mainWindow = new MainWindow();
mainWindow.Show();
this.Close();
}
else
MessageBox.Show(message, "Info");
}

private void btnClose_Click_1(object sender, RoutedEventArgs e)
{
this.Close();
}
}
}

Create a class in your Project with name UserInfo.cs

UserInfo.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace WpfLogin
{
public class UserInfo
{
public static String CustomerName = "";
public static String CustomerEmail = "";
}
}

This class will be useful for holding Username and Email address through the application while it is running.

Create WPF Window with name MainWindow.xaml which will be displayed if the user credentials is valid. This will display the user name and Email address.

MainWindow.xaml:

<Window x:Class="WpfLogin.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" Background="White" WindowState="Maximized">
<StackPanel Orientation="Vertical" Background="Transparent">

<Label x:Name="lblName" Margin="2" FontSize="20"/>
<Label x:Name="lblEmail" Margin="2" FontSize="20"/>
</StackPanel>
</Window>

And make changes as below in the code page MainWindow.xaml.cs:

MainWindow.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfLogin
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
lblEmail.Content = UserInfo.CustomerEmail;
lblName.Content = UserInfo.CustomerName;
}
}
}

In your App.xaml file, change the WPF StartupUri to the Login.xaml form:

StartupUri=”Login.xaml”

App.xaml:

<Application x:Class="WpfLogin.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="Login.xaml">
<Application.Resources>

</Application.Resources>
</Application>

Now run your WPF Login form application. If everything goes right it will work perfectly fine.

Thank You.

Also see :

• WPF – DataGrid with Buttons and its Clicking method – Get Row Data with WPF DataGrid Buttons
• WPF – Using DataGrid Row MouseDoubleClick for getting row Data – Example
• WPF – Designing Material Design Tabs in WPF using Dragablz
• WPF – Bind ComboBox using MS SQL database
• WPF Textbox with Rounded Corners
• WPF Textbox changing Focus Style Background Colors.
• WPF – Bind DataGrid using SQL Database
• WPF Button Style with Rounded Corners and Hover Effects
• WPF Textbox Style – Changing Colors on Focus
• WPF ComboBox SelectionChanged – SelectedItem Method