WPF  

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,

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">  
    2.   
    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>  
    18.   
    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>  
    8.     
    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">  
    14.   
    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">  
    31.   
    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">  
    34.   
    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">  
    37.   
    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">  
    40.   
    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">  
    43.   
    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">  
    46.   
    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">  
    49.   
    50.             </Button>  
    51.   
    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>  
    54.   
    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.

Membership not found