How to Create Login Screen in Wpf with Sql DataBase

hi all welcome to dotnet mo this is my video series on WPF tutorials for business in this video we will learn how to create login form or logon screen in WPF applications this is my visual studio 2013 and we are going to make allowing screen that looks exactly like this first of all let's create a WPF application for that go to file the new then project select windows under visual c shop then WPF application then name your application here I will name it as WPF login screen then select the location where you want to save this application then click on OK here we have a brand new WPF application in solution Explorer you can see a default window the main window dot XAML and we will be using this main window as a dashboard in our application in order to design a login screen like this we'll be creating another window for that pi click on project then add window I will name this window as login screen click on add inside this logon screen window we will design a login form that looks like this in the left panel you can see the window preview according to the XAML code in the right side panel so here we have started the code with a window tag and first attribute is X colon class that is referring to the behind code behind class in our c-sharp code and you can see that here we have the XML code inside this login screen dot XAML and then below that you can see the file corresponding CS file inside that we will have our code behind C shop code ok so then we have two attributes with XML n then we have title title is responsible for the window title right now it is login screen I want to change that into Logan in the same time you can see that our preview is updated here then you can see height and width for this window and I'm going to apply a font size for this window as 14 in our design you can see that we have a greenish background color for that let me add background attribute here it will set the form background color I have the X a decimal color code for this greenish color let me paste it here so here you can see its background color is changed then you can see a great Elementor did our layout elements in WPF applications layout elements are used to average or group elements in WPF applications keep normally used to arrange elements in a tabular way like row and column for this login window design we are going to use layout element step panel stack panel stat panel is used to arrange elements like rags in a shelf it can be in horizontal orientation or in vertical orientation by default it is in vertical orientation and it will start from the top first of all we have a label showing login text for that I can add label here content will be login so here you can see the Bible here I want to change the foreground color for this label as white and I will change the font size to some 25 I want to change the horizontal alignment to sender so that's it so in this design you can see a gap before this login text for that I can add margin here margin for the stack panel it would be 20 so the 20 margin will be applied in all four sides before adding these remaining form elements I would like to add this corner shape border with background black for that we have to enclose this tag panel inside a border element select step panel then right click then click on surround with or you can use the shortcut ctrl K s then click on TAC replaced it with Bordeaux then set background to black for that I will pitch the excitement color code here then corner radius to be 20 then margin 2d to be applied in all four sides now let's design the remaining part first of all we have a horizontal separator for that I will add a separator here after that we have labelled textbox pair for username and password starting with label content will be username foreground color as white next we need to add text box its name will be txt username background color will be grey for that I will paste the hexadecimal color code here then foreground color to white then font size will be 18 like this we need one more label text box pair for password for that I will copy these two lines from here and pasting below that changing accordingly first level will be password then text box name will be txt password instead of text box we need password box here finally we need to add this submit button for that I will use a button element button name will be BT and submit background foreground and phone size will be same as password box so I will copy and paste it here and we need to set the convent it will be applied as the button text in this case it will be submerged now we need to add margin for this button margin 60 from left and right turn from top and bottom that's it now we have completed with this loading screen design now if you run this application it will open main window Easter off the add minute to open logon screen for that we have to edit AB dot XAML change main window to movie screen now if you run this application you can see the login screen now let's do the DB part first of all I am going to create a new database for that right click on databases then click on new database [Music] then name your DB here I will name it as log in DB then click on OK inside this DB I am going to create a new table to store credential details of user for that fight econ tablets then table first column will be user ID data type will be inch then user name as Walker 50 then password as Walker 50 in order to save this table you can use the shortcut control s or pick on this Save button here then name your tower here I will name it as TBL user click on OK expand tables there you can see the newly created table right click on it then edit table 200 rows now we are going to add some test data into this table user ID will be one user name will be user 1 and password will be 1 2 3 click enter to save this world that's it now back to wishes to you when user click on the submit button we will check is there any user with given user name and password in our table TBL user for that we will create a thing even of this button in order to create a click event type click then it will show new event handler option if you double click on that it will create a click event in the background in order to see the c-sharp code behind right click then click on View code or you can use the shortcut f7 so here we have the submit button click image inside this may be checked by the user is valid or not first of all I am going to create an object of SQL function Steven connection for that we have to import the namespace system dot dot a dot SQL client object name will be SQL corn equals new SQL function [Music] inside that we need to pass the connection stream you below that and we'll add a try-catch block with finally block inside try block I will check whether a skill connection is open or not if SQL corn dot state connection stage dot closed if it is closed it will open the SQL connection by calling the function open inside CatDog maybe show the error messages using li message box message box dot saw inside that we will pass the exception message TX dot message in the finally block we will toss the SQL function by calling the function gloss now let me declare my query here string query equals select count one from TBL user username equals ID username and password equals add password now let me create an object off SQL command SQL CMD equals new SQL command first parameter will be our query itself then SQL connection object SQL corn below that we will set the command type command type equals command type dot text then we need to pass the parameter value for username and password SKU L see MD dot parameters dot ad with you [Music] username at username as txt user name dot txt let me copy this line and phishing below that and passing value of password parameter and piercing here in order to get you text from password box we can do something like this txt password dot password then we will declare in variable count equals convert to int 32 inside that we will execute this command SQL this ql c MV dot execute scale-up execute scalar will return first row first column so we will get the count and we will convert that into in 32 if count equal to 1 we will open the main window for that user main window as dashboard equals new main window in order to open the window we can call dashboard or show and we will close this window login window by calling the function in this dog cause if if count is not equal to 1 it means username or password is not covered but then we can show the message inside message box username or password is incorrect before running this program I would like to add a label in two main window just to indicate it is dashboard for that double click on main window dot XAML and I will add a level here level content will be dashboard now let me run this program in order to check whether it is working or not for that click on the start button here or you can use the shortcut f5 so it will open our loading window first of all I will end the invalid username and password then click on submit so it shows username or password is incorrect become ok if I end the existing username and password it should open our dashboard screen password will be 1 2 3 record submit that's it in this tutorial we have discussed how to create login screen in WPF applications using XAML you can download this project from the link given below in video description with SQL script please be subscribed to my channel dotnet move form over some videos like this please like and share this video with your friends and colleagues so that they can benefit from this have a nice day bye

Channel: CodAffection

Views: 113,519

Keywords: login windows in wpf, login screen in wpf, wpf login screen, login screen design in wpf, login screen design, how to create login screenin wpf, using xaml, wpf login screen with database, wpf tutorial c#, wpf login form, wpf login page, wpf login form example, CodAffection

Id: 72366X1-heg

Length: 18min 27sec (1107 seconds)

Published: Thu May 04 2017