Overview
Today, we are going to see WPF login with N-Tier architecture with the stored procedures.To know what is N-Tier architecture and stored procedures, kindly refer to this article,
I had developed software for a hotel for one of my friends and I initially thought of developing it in Windows form. Afterwards, I decided to learn WPF, studied WPF, and developed this Application in WPF. I was initially searching a lot of articles on WPF over Window forms and found some mixed reactions. I personally found WPF better.
You can refer to this link for more.
Introduction
- For N-Tier architecture, I had made some useful libraries like BL,DATA,DL,COMMENCLASSES.
- Open SSMS, create a database as HotelManagement and just run the attached SQL Script for userlogin table and the stored procedure.
- Open Visual Studio (VS) in the File -> Create New Project -> Give desired name in my solution and I had given TESTLOGIN. Refer the screenshot, given below:
- Select WPF Application and give name as TestLogin.
- First click on Solution folder and add existing libraries i.e N-Tier architecture files.
- As you can see, the HotelClassLib files are added to our solution.
- Now let's add reference of that Lib (dll) in our Project.
- Add reference -> Browse and dll is placed in the bin folder. Just add the DLL.
- I successfully added dll in the project.
- Add new folder images for the background images and so on. Right click on the Project -> Add -> New folder -> name it as Images.
- Now let's create a Login Window.
- Right click the project -> Add -> New Item -> select Windows(WPF) -> name it as Login.xaml.
- When you add the blank form, you will see <Windows></windows> tag inside <grid></grid> tag.
- Now, let's style the Login Form.
- Click the properties and let's add images for the background.
- As you can see, there are many other properties that you can set here for that Window.
- Now, I created a view box.
- <Viewbox Stretch="Uniform">
-
- <Window x:Class="Test_Login.Window1"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- Title="Window1" Height="300" Width="300">
- <Window.Background>
- <ImageBrush ImageSource="Images/Simple-Orange-Wallpaper.jpg"/>
- </Window.Background>
- <Viewbox Stretch="Uniform">
- <Grid>
- <Grid.ColumnDefinitions>
- <ColumnDefinition Width="51*"/>
- <ColumnDefinition Width="39*"/>
- <ColumnDefinition Width="25*"/>
- <ColumnDefinition Width="177*"/>
- </Grid.ColumnDefinitions>
-
- </Grid>
- </Viewbox>
- </Window>
- Now, we will be adding group box and inside the group box, we will be placing a text box and buttons for the login.
- After adding group box, my code is able to set some properties like height, width and so on.
Tip - There are very nice properties for any controls that can be explored.
- <Window x:Class="Test_Login.Window1"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- Title="Window1" Height="300" Width="300">
- <Window.Background>
- <ImageBrush ImageSource="Images/Simple-Orange-Wallpaper.jpg"/>
- </Window.Background>
- <Viewbox Stretch="Uniform">
- <Grid>
- <Grid.ColumnDefinitions>
- <ColumnDefinition Width="51*"/>
- <ColumnDefinition Width="39*"/>
- <ColumnDefinition Width="25*"/>
- <ColumnDefinition Width="177*"/>
- </Grid.ColumnDefinitions>
- <GroupBox Header="Login Here" Height="270" HorizontalAlignment="Center" Margin="209,12,12,12" Name="groupBox1" VerticalAlignment="Center" Width="374" Grid.ColumnSpan="5" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="15" Focusable="True">
- <Grid Height="240">
- <Grid.ColumnDefinitions>
- <ColumnDefinition Width="50*" />
- <ColumnDefinition Width="138*" />
- </Grid.ColumnDefinitions>
- <TextBox Height="28" HorizontalAlignment="Left" Margin="3,51,0,0" Name="txtUserName" VerticalAlignment="Top" Width="241" Grid.Column="1" />
- <PasswordBox Height="28" HorizontalAlignment="Left" Margin="2,108,0,0" Name="txtPassword" VerticalAlignment="Top" Width="242" Grid.Column="1" />
- <Button Content="Login" Height="34" IsDefault="True" HorizontalAlignment="Left" Margin="19,175,0,0" Name="btnLogin" VerticalAlignment="Top" Width="82" Uid="btnLogin" Grid.Column="1" Click="btnLogin_Click">
- <Button.Background>
- <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
- <GradientStop Color="Black" Offset="0" />
- <GradientStop Color="#9300B100" Offset="0.472" />
- </LinearGradientBrush>
- </Button.Background>
- </Button>
- <Button Content="Cancel" Height="34" HorizontalAlignment="Left" Margin="122,175,0,0" Name="btnCancel" VerticalAlignment="Top" Width="82" Uid="btncancel" Grid.Column="1" Click="btnCancel_Click">
- <Button.Background>
- <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
- <GradientStop Color="Black" Offset="0" />
- <GradientStop Color="#9300B100" Offset="0.472" />
- </LinearGradientBrush>
- </Button.Background>
- </Button>
- <Label Content="User Name :" Height="28" HorizontalAlignment="Left" Margin="6,51,0,0" Name="label1" VerticalAlignment="Top" />
- <Label Content="Password :" HorizontalAlignment="Left" Margin="6,108,0,104" Name="label2" />
- <Label Content="You have entered wrong UserName or Password." Height="29" HorizontalAlignment="Left" Margin="6,6,0,0" Name="lblErr1" VerticalAlignment="Top" Foreground="#FF1526EF" Width="334" Grid.ColumnSpan="2" Visibility="Hidden" />
- <Label Content="Please enter correct credentials." Foreground="#FF1526EF" Height="29" HorizontalAlignment="Left" Margin="6,24,0,0" Name="lblErr2" VerticalAlignment="Top" Width="227" Grid.ColumnSpan="2" Visibility="Hidden" />
- </Grid>
- </GroupBox>
- </Grid>
- </Viewbox>
- </Window>
- On the left hand side section, we will be placing login icon, so let's see the code.
- <Window x:Class="The_Parcel.MainWindow"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- Title="The Parcel" Height="354" Width="618" IsEnabled="True" ShowInTaskbar="True" WindowStyle="None" WindowStartupLocation="CenterScreen" Loaded="Window_Loaded">
- <Window.Background>
- <ImageBrush ImageSource="Images/Simple-Orange-Wallpaper.jpg" />
- </Window.Background>
-
- <Window.Resources>
- <Image x:Key="imgLogin" Source="/The%20Parcel;component/Images/loginimage.png" />
- </Window.Resources>
- <Viewbox Stretch="Uniform">
- <Grid ShowGridLines="False">
-
- <Grid.ColumnDefinitions>
- <ColumnDefinition Width="356*" />
- <ColumnDefinition Width="0*" />
- <ColumnDefinition Width="80*" />
- <ColumnDefinition Width="22*" />
- <ColumnDefinition Width="45*" />
- </Grid.ColumnDefinitions>
- <GroupBox Header="Login Here" Height="270" HorizontalAlignment="Center" Margin="209,12,12,12" Name="groupBox1" VerticalAlignment="Center" Width="374" Grid.ColumnSpan="5" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="15" Focusable="True">
- <Grid Height="240">
- <Grid.ColumnDefinitions>
- <ColumnDefinition Width="50*" />
- <ColumnDefinition Width="138*" />
- </Grid.ColumnDefinitions>
- <TextBox Height="28" HorizontalAlignment="Left" Margin="3,51,0,0" Name="txtUserName" VerticalAlignment="Top" Width="241" Grid.Column="1" />
- <PasswordBox Height="28" HorizontalAlignment="Left" Margin="2,108,0,0" Name="txtPassword" VerticalAlignment="Top" Width="242" Grid.Column="1" />
- <Button Content="Login" Height="34" IsDefault="True" HorizontalAlignment="Left" Margin="19,175,0,0" Name="btnLogin" VerticalAlignment="Top" Width="82" Uid="btnLogin" Grid.Column="1" Click="btnLogin_Click">
- <Button.Background>
- <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
- <GradientStop Color="Black" Offset="0" />
- <GradientStop Color="#9300B100" Offset="0.472" />
- </LinearGradientBrush>
- </Button.Background>
- </Button>
- <Button Content="Cancel" Height="34" HorizontalAlignment="Left" Margin="122,175,0,0" Name="btnCancel" VerticalAlignment="Top" Width="82" Uid="btncancel" Grid.Column="1" Click="btnCancel_Click">
- <Button.Background>
- <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
- <GradientStop Color="Black" Offset="0" />
- <GradientStop Color="#9300B100" Offset="0.472" />
- </LinearGradientBrush>
- </Button.Background>
- </Button>
- <Label Content="User Name :" Height="28" HorizontalAlignment="Left" Margin="6,51,0,0" Name="label1" VerticalAlignment="Top" />
- <Label Content="Password :" HorizontalAlignment="Left" Margin="6,108,0,104" Name="label2" />
- <Label Content="You have entered wrong UserName or Password." Height="29" HorizontalAlignment="Left" Margin="6,6,0,0" Name="lblErr1" VerticalAlignment="Top" Foreground="#FF1526EF" Width="334" Grid.ColumnSpan="2" Visibility="Hidden" />
- <Label Content="Please enter correct credentials." Foreground="#FF1526EF" Height="29" HorizontalAlignment="Left" Margin="6,24,0,0" Name="lblErr2" VerticalAlignment="Top" Width="227" Grid.ColumnSpan="2" Visibility="Hidden" />
- </Grid>
- </GroupBox>
- <Image Height="260" HorizontalAlignment="Left" Margin="12,43,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="191" Source="Images/loginimage.png" Opacity="10" />
- </Grid>
- </Viewbox>
- </Window>
Login.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;
- using System.Data;
- using HotelClassLib.BL;
- using HotelClassLib.Data;
- using HotelClassLib.DL;
- namespace The_Parcel
- {
-
-
-
- public partial class MainWindow: Window
- {
- BuildingOrderData objOrderData = new BuildingOrderData();
- BuildingOrderBL objOrderBL = new BuildingOrderBL();
- DataSet dsData = new DataSet();
- public MainWindow()
- {
- InitializeComponent();
- txtUserName.Focus();
- }
- private void btnLogin_Click(object sender, RoutedEventArgs e)
- {
- try
- {
- if (txtUserName.Text != "")
- {
- objOrderData._username = txtUserName.Text;
- }
- else
- {
- MessageBox.Show("Please enter User Name.");
- txtUserName.Focus();
- return;
- }
- if (txtPassword.Password != "")
- {
- objOrderData._password = txtPassword.Password;
- }
- else
- {
- MessageBox.Show("Please enter Password.");
- txtPassword.Focus();
- return;
- }
- objOrderData._Mode = "Testcheck";
- dsData = objOrderBL.AddOrderDetails(objOrderData);
- if (dsData.Tables.Count > 0)
- {
- MainScreen msc = new MainScreen();
-
-
-
-
-
-
-
- msc.Show();
- this.Hide();
- }
- else
- {
- MainScreen msc = new MainScreen();
- msc.btnOrder.IsEnabled = true;
- msc.btnCustomer.IsEnabled = false;
- msc.btnEmpDetails.IsEnabled = false;
- msc.btnInventory.IsEnabled = false;
- msc.btnCustomer.IsEnabled = false;
- msc.btnSMSEmail.IsEnabled = false;
- msc.btnPartyOrders.IsEnabled = false;
- msc.btnHelp.IsEnabled = true;
- msc.Show();
- this.Hide();
- }
- }
- catch (Exception ex)
- {
- MessageBox.Show(ex.ToString());
- }
- }
- private void btnCancel_Click(object sender, RoutedEventArgs e)
- {
- this.Close();
- }
- private void Window_Loaded(object sender, RoutedEventArgs e)
- {
- }
- }
- }
- Now, let's add a page after config file select App Config.
- Name it as App.config.
- In App.xaml form, name your default form. in this project, it is named as Login.xaml.
- Created App.config file. Let's put our connection string.
- After successful login, let's create a redirection form.
- Add-> Form-> name it as MainScreen.
Code for Mainscreen.Xaml
- <Window x:Class="The_Parcel.MainScreen"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- Height="{Binding SystemParameters.PrimaryScreenHeight}"
- Width="{Binding SystemParameters.PrimaryScreenWidth}"
- Title="Dashbooard" Topmost="False" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow" WindowState="Maximized" >
- <Window.Background>
- <ImageBrush ImageSource="Images/Simple-Orange-Wallpaper.jpg" />
- </Window.Background>
- <Window.Resources>
- <ImageBrush x:Key="Background1" />
- <ImageBrush x:Key="Background2" />
- <ImageBrush x:Key="Background3" />
- <ImageBrush x:Key="Background4" />
- <ImageBrush x:Key="Background5" />
- <ImageBrush x:Key="Background6" />
- <ImageBrush x:Key="Background7" />
- <ImageBrush x:Key="Background8" />
- <ImageBrush x:Key="Background9" />
- <ImageBrush x:Key="Background10" />
- <ImageBrush x:Key="Background11" />
- </Window.Resources>
- <Viewbox Stretch="Uniform">
- <Grid Height="950" Width="1500">
- <Grid Height="950">
- <Grid.ColumnDefinitions>
- <ColumnDefinition Width="435*" />
- <ColumnDefinition Width="723*" />
- </Grid.ColumnDefinitions>
- <Button Background="{StaticResource ResourceKey=Background3}" ToolTip="Send SMS and Email." Height="91" HorizontalAlignment="Left" Name="btnSMSEmail" VerticalAlignment="Top" Width="100" Click="btnSMSEmail_Click" Grid.Column="1" Margin="19,8,0,0">
-
- </Button>
- <Button Background="{StaticResource ResourceKey=Background5}" ToolTip="Manage employee data." Height="92" HorizontalAlignment="Left" Margin="473,7,0,0" Name="btnEmpDetails" VerticalAlignment="Top" Width="90" Click="btnEmpDetails_Click">
-
- </Button>
- <Button Background="{StaticResource ResourceKey=Background7}" ToolTip="Need help click here." Height="91" HorizontalAlignment="Left" Margin="134,8,0,0" Name="btnHelp" VerticalAlignment="Top" Width="92" Grid.Column="1" Click="btnHelp_Click">
-
- </Button>
- <Button Background="{StaticResource ResourceKey=Background8}" Height="91" ToolTip="Place New Order" HorizontalAlignment="Left" Margin="14,7,0,0" Name="btnOrder" VerticalAlignment="Top" Width="92" Click="btnOrder_Click">
-
- </Button>
- <Button Background="{StaticResource ResourceKey=Background9}" ToolTip="View Reports" Height="91" HorizontalAlignment="Left" Margin="132,7,0,0" Name="btnInventory" VerticalAlignment="Top" Width="92" Click="btnInventory_Click">
-
- </Button>
- <Button Background="{StaticResource ResourceKey=Background10}" ToolTip="View your customers." Height="92" HorizontalAlignment="Left" Margin="365,7,0,0" Name="btnCustomer" VerticalAlignment="Top" Width="92" Click="btnCustomer_Click" Grid.ColumnSpan="2">
-
- </Button>
- <Button Background="{StaticResource ResourceKey=Background11}" ToolTip="Party orders coming soon.." Height="92" HorizontalAlignment="Left" Margin="250,6,0,0" Name="btnPartyOrders" VerticalAlignment="Top" Width="92" Click="btnPartyOrders_Click_1">
-
- </Button>
-
- <Frame Height="840" HorizontalAlignment="Left" Name="frame1" VerticalAlignment="Stretch" Width="1480" NavigationUIVisibility="Hidden" Grid.ColumnSpan="2" Margin="6,104,0,6"></Frame>
- </Grid>
-
- </Grid>
- </Viewbox>
- </Window>
- Now run the project and enter the username and the password.
Enter the username as admin and password as the admin.
- Check dataset.
- After successful login, it's redirected to Main Screen form.
- You can see the exe, i.e login exe in a Bin folder.
Conclusion
This was WPF login with N-tier architecture. More articles on WPF coming Soon.