WPF Login with N-Tier Architecture

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,

• CRUD Stored Procedures In SQL Server And Visual Studio

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.
  
  1. <Viewbox Stretch="Uniform">
  3. <Window x:Class="Test_Login.Window1"
  4. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  5. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  6. Title="Window1" Height="300" Width="300">
  7. <Window.Background>
  8. <ImageBrush ImageSource="Images/Simple-Orange-Wallpaper.jpg"/>
  9. </Window.Background>
  10. <Viewbox Stretch="Uniform">
  11. <Grid>
  12. <Grid.ColumnDefinitions>
  13. <ColumnDefinition Width="51*"/>
  14. <ColumnDefinition Width="39*"/>
  15. <ColumnDefinition Width="25*"/>
  16. <ColumnDefinition Width="177*"/>
  17. </Grid.ColumnDefinitions>
  19. </Grid>
  20. </Viewbox>
  21. </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.
  
  1. <Window x:Class="Test_Login.Window1"
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. Title="Window1" Height="300" Width="300">
  5. <Window.Background>
  6. <ImageBrush ImageSource="Images/Simple-Orange-Wallpaper.jpg"/>
  7. </Window.Background>
  8. <Viewbox Stretch="Uniform">
  9. <Grid>
  10. <Grid.ColumnDefinitions>
  11. <ColumnDefinition Width="51*"/>
  12. <ColumnDefinition Width="39*"/>
  13. <ColumnDefinition Width="25*"/>
  14. <ColumnDefinition Width="177*"/>
  15. </Grid.ColumnDefinitions>
  16. <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">
  17. <Grid Height="240">
  18. <Grid.ColumnDefinitions>
  19. <ColumnDefinition Width="50*" />
  20. <ColumnDefinition Width="138*" />
  21. </Grid.ColumnDefinitions>
  22. <TextBox Height="28" HorizontalAlignment="Left" Margin="3,51,0,0" Name="txtUserName" VerticalAlignment="Top" Width="241" Grid.Column="1" />
  23. <PasswordBox Height="28" HorizontalAlignment="Left" Margin="2,108,0,0" Name="txtPassword" VerticalAlignment="Top" Width="242" Grid.Column="1" />
  24. <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">
  25. <Button.Background>
  26. <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
  27. <GradientStop Color="Black" Offset="0" />
  28. <GradientStop Color="#9300B100" Offset="0.472" />
  29. </LinearGradientBrush>
  30. </Button.Background>
  31. </Button>
  32. <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">
  33. <Button.Background>
  34. <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
  35. <GradientStop Color="Black" Offset="0" />
  36. <GradientStop Color="#9300B100" Offset="0.472" />
  37. </LinearGradientBrush>
  38. </Button.Background>
  39. </Button>
  40. <Label Content="User Name :" Height="28" HorizontalAlignment="Left" Margin="6,51,0,0" Name="label1" VerticalAlignment="Top" />
  41. <Label Content="Password :" HorizontalAlignment="Left" Margin="6,108,0,104" Name="label2" />
  42. <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" />
  43. <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" />
  44. </Grid>
  45. </GroupBox>
  46. </Grid>
  47. </Viewbox>
  48. </Window>
  
  
  
• On the left hand side section, we will be placing login icon, so let's see the code.
  
  1. <Window x:Class="The_Parcel.MainWindow"
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. Title="The Parcel" Height="354" Width="618" IsEnabled="True" ShowInTaskbar="True" WindowStyle="None" WindowStartupLocation="CenterScreen" Loaded="Window_Loaded">
  5. <Window.Background>
  6. <ImageBrush ImageSource="Images/Simple-Orange-Wallpaper.jpg" />
  7. </Window.Background>
  9. <Window.Resources>
  10. <Image x:Key="imgLogin" Source="/The%20Parcel;component/Images/loginimage.png" />
  11. </Window.Resources>
  12. <Viewbox Stretch="Uniform">
  13. <Grid ShowGridLines="False">
  15. <Grid.ColumnDefinitions>
  16. <ColumnDefinition Width="356*" />
  17. <ColumnDefinition Width="0*" />
  18. <ColumnDefinition Width="80*" />
  19. <ColumnDefinition Width="22*" />
  20. <ColumnDefinition Width="45*" />
  21. </Grid.ColumnDefinitions>
  22. <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">
  23. <Grid Height="240">
  24. <Grid.ColumnDefinitions>
  25. <ColumnDefinition Width="50*" />
  26. <ColumnDefinition Width="138*" />
  27. </Grid.ColumnDefinitions>
  28. <TextBox Height="28" HorizontalAlignment="Left" Margin="3,51,0,0" Name="txtUserName" VerticalAlignment="Top" Width="241" Grid.Column="1" />
  29. <PasswordBox Height="28" HorizontalAlignment="Left" Margin="2,108,0,0" Name="txtPassword" VerticalAlignment="Top" Width="242" Grid.Column="1" />
  30. <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">
  31. <Button.Background>
  32. <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
  33. <GradientStop Color="Black" Offset="0" />
  34. <GradientStop Color="#9300B100" Offset="0.472" />
  35. </LinearGradientBrush>
  36. </Button.Background>
  37. </Button>
  38. <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">
  39. <Button.Background>
  40. <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
  41. <GradientStop Color="Black" Offset="0" />
  42. <GradientStop Color="#9300B100" Offset="0.472" />
  43. </LinearGradientBrush>
  44. </Button.Background>
  45. </Button>
  46. <Label Content="User Name :" Height="28" HorizontalAlignment="Left" Margin="6,51,0,0" Name="label1" VerticalAlignment="Top" />
  47. <Label Content="Password :" HorizontalAlignment="Left" Margin="6,108,0,104" Name="label2" />
  48. <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" />
  49. <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" />
  50. </Grid>
  51. </GroupBox>
  52. <Image Height="260" HorizontalAlignment="Left" Margin="12,43,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="191" Source="Images/loginimage.png" Opacity="10" />
  53. </Grid>
  54. </Viewbox>
  55. </Window>
  
  
  Login.xaml.cs
• 1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Windows;
  6. using System.Windows.Controls;
  7. using System.Windows.Data;
  8. using System.Windows.Documents;
  9. using System.Windows.Input;
  10. using System.Windows.Media;
  11. using System.Windows.Media.Imaging;
  12. using System.Windows.Navigation;
  13. using System.Windows.Shapes;
  14. using System.Data;
  15. using HotelClassLib.BL;
  16. using HotelClassLib.Data;
  17. using HotelClassLib.DL;
  18. namespace The_Parcel
  19. {
  20. /// <summary>
  21. /// Interaction logic for MainWindow.xaml
  22. /// </summary>
  23. public partial class MainWindow: Window
  24. {
  25. BuildingOrderData objOrderData = new BuildingOrderData();
  26. BuildingOrderBL objOrderBL = new BuildingOrderBL();
  27. DataSet dsData = new DataSet();
  28. public MainWindow()
  29. {
  30. InitializeComponent();
  31. txtUserName.Focus();
  32. }
  33. private void btnLogin_Click(object sender, RoutedEventArgs e)
  34. {
  35. try
  36. {
  37. if (txtUserName.Text != "")
  38. {
  39. objOrderData._username = txtUserName.Text;
  40. }
  41. else
  42. {
  43. MessageBox.Show("Please enter User Name.");
  44. txtUserName.Focus();
  45. return;
  46. }
  47. if (txtPassword.Password != "")
  48. {
  49. objOrderData._password = txtPassword.Password;
  50. }
  51. else
  52. {
  53. MessageBox.Show("Please enter Password.");
  54. txtPassword.Focus();
  55. return;
  56. }
  57. objOrderData._Mode = "Testcheck";
  58. dsData = objOrderBL.AddOrderDetails(objOrderData);
  59. if (dsData.Tables.Count > 0)
  60. {
  61. MainScreen msc = new MainScreen();
  62. //msc.btnOrder.IsEnabled = true;
  63. //msc.btnCustomer.IsEnabled = false;
  64. //msc.btnEmpDetails.IsEnabled = false;
  65. //msc.btnInventory.IsEnabled = false;
  66. //msc.btnCustomer.IsEnabled = false;
  67. //msc.btnSMSEmail.IsEnabled = false;
  68. //msc.btnPartyOrders.IsEnabled = false;
  69. msc.Show();
  70. this.Hide();
  71. }
  72. else
  73. {
  74. MainScreen msc = new MainScreen();
  75. msc.btnOrder.IsEnabled = true;
  76. msc.btnCustomer.IsEnabled = false;
  77. msc.btnEmpDetails.IsEnabled = false;
  78. msc.btnInventory.IsEnabled = false;
  79. msc.btnCustomer.IsEnabled = false;
  80. msc.btnSMSEmail.IsEnabled = false;
  81. msc.btnPartyOrders.IsEnabled = false;
  82. msc.btnHelp.IsEnabled = true;
  83. msc.Show();
  84. this.Hide();
  85. }
  86. }
  87. catch (Exception ex)
  88. {
  89. MessageBox.Show(ex.ToString());
  90. }
  91. }
  92. private void btnCancel_Click(object sender, RoutedEventArgs e)
  93. {
  94. this.Close();
  95. }
  96. private void Window_Loaded(object sender, RoutedEventArgs e)
  97. {
  98. }
  99. }
  100. }
• 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
  
  1. <Window x:Class="The_Parcel.MainScreen"
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. Height="{Binding SystemParameters.PrimaryScreenHeight}"
  5. Width="{Binding SystemParameters.PrimaryScreenWidth}"
  6. Title="Dashbooard" Topmost="False" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow" WindowState="Maximized" >
  7. <Window.Background>
  8. <ImageBrush ImageSource="Images/Simple-Orange-Wallpaper.jpg" />
  9. </Window.Background>
  10. <Window.Resources>
  11. <ImageBrush x:Key="Background1" />
  12. <ImageBrush x:Key="Background2" />
  13. <ImageBrush x:Key="Background3" />
  14. <ImageBrush x:Key="Background4" />
  15. <ImageBrush x:Key="Background5" />
  16. <ImageBrush x:Key="Background6" />
  17. <ImageBrush x:Key="Background7" />
  18. <ImageBrush x:Key="Background8" />
  19. <ImageBrush x:Key="Background9" />
  20. <ImageBrush x:Key="Background10" />
  21. <ImageBrush x:Key="Background11" />
  22. </Window.Resources>
  23. <Viewbox Stretch="Uniform">
  24. <Grid Height="950" Width="1500">
  25. <Grid Height="950">
  26. <Grid.ColumnDefinitions>
  27. <ColumnDefinition Width="435*" />
  28. <ColumnDefinition Width="723*" />
  29. </Grid.ColumnDefinitions>
  30. <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">
  32. </Button>
  33. <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">
  35. </Button>
  36. <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">
  38. </Button>
  39. <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">
  41. </Button>
  42. <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">
  44. </Button>
  45. <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">
  47. </Button>
  48. <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">
  50. </Button>
  52. <Frame Height="840" HorizontalAlignment="Left" Name="frame1" VerticalAlignment="Stretch" Width="1480" NavigationUIVisibility="Hidden" Grid.ColumnSpan="2" Margin="6,104,0,6"></Frame>
  53. </Grid>
  55. </Grid>
  56. </Viewbox>
  57. </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.