C++ GUI: Modern Sign in Form Design (FULL) | WinForms

hey guys so in this video i'm going to teach you how you can create this beautiful modern user interface using serial plus inside visual studio hi there it's me from the future i quickly want to mention that if the video is going too fast please go ahead and watch the previous videos because i have cut the video as much as possible to make the video short and less boring to watch if you think the video is going too fast you can either slow down the video or just go and learn the basics if you have the basic knowledge then the video will be much easier to watch let's get it in with the video so basically this is a sign-in form for some application so this is just a demo application i created for my channel so this is you can think of this like a sign-in form to import settings and preferences into your application and sync your settings across different devices using the cloud so this is a simple design with the basic elements you need in a sign in form we have the username field the password field and we have a terms and conditions checkbox and then we have the sign in button and then we can continue to the application without signing in and then a register one to register which just redirects us to a website so you can put whatever website you want there then we have this other section which you can use to put something there i just put a did you know section you can put whatever you need and talking about the functionality as you can see if we click on the username field the username text will be cleared and we are able to type our own username and if i click on the password field the password is cleared and we can type our password and also this does not happen when we have typed a valid username like this it does not clear when we click on it the next time it only clears when you click on it the first time when it has the text of username and then we have the checkbox if you uncheck the checkbox which means you disagree to the terms and conditions so then you can't click on the sign in button and if you agree you can click on the sign in button and now if we type something to the password field and click on sign in basically you cannot put username as the username so this says invalid username so if i type something like this user doesn't exist because i haven't called this user to exist in our application so if i type admin which is a valid user then it will say that our password is invalid and if i type password which is the correct password then we can sign into application successfully if you don't want to sign in to the application you can just continue to the application without signing in by clicking here if you click on that it will give us this prompt and if you click no then you can sign in if you click yes then you can do whatever you want without signing to the application so that's the basic functionality of this app so before we start creating this i highly encourage you to go ahead and watch our previous videos about this subject where we go through each and every element like buttons text boxes thoroughly discuss the concepts and the basic knowledge you need to create something like this and also if you don't know how to create a view studio c plus plus clr windows forms application project you can watch this video right here and then come back and watch this because if you don't know how to create the project you should watch that and install the correct workloads and the correct components to create a project successfully because that's a quite tedious process okay so without any further ado let's get started with the designing part so before we create something inside visual studio what i usually do is i will go to photoshop or any other designing program like that and then i will design the user interface inside the program like photoshop then i have the freedom to create whatever i need and then i can import elements that i need to create that use interface in visual studio like pictures and stuff it is always a good practice to design the user interface inside a design application and implement that inside the coding environment so i have this basic design i put two gradients here and then i have the company logo and i have a little slogan and then i have this no account register thing and then the other stuff so this is just a rough sketch as to what i will implement in the development environment so as you can see i haven't put styling in this text but i have made it bold in the implementation because i thought that was cool and some things are easier to implement in the development environment rather than in the designing program because adding a checkbox here will be a quite tedious task all i have to do in the development environment is just add this checkbox from the toolbox and change its text so that's why i didn't include that in the design but i included that in the implementation so so the main thing you need to understand is you should probably first design at least a rough sketch inside a designing program like photoshop or adobe xd or whatever you like and then use that rough sketch to implement the correct visual use interface inside the development environment just like this this is not something limited to cpus plus this is applicable to all languages and every development project you will do in the future enough with the introduction so let's create a project inside visual studio so let's create a new project and i will choose clr md project i will name this as modern sign in ui cpp okay it's create and then let's go to the projects properties and in linker let's change the system to windows and in advance let's change the entry point to main let's add an item to our project which is going to be a windows form okay so let's close this and unload the project and reload okay now we have our form so again if you don't know how to create a project and you didn't understand these steps you can watch this video go through the process step by step and also teach you how you can install visual studio correctly to create this project because sometimes you cannot create this project you need to install certain workloads make sure you watch that video and create this project successfully before continue to the next steps so let's go to the myform.cbp file and we need to paste this code i will put it in the description and as a pin comment below and i will paste it right here and i will change the project name to modern sign in uicbp and now we can close that file as well okay so for the design i already have some schematics for our form so i will apply those things really quickly the size of a form is going to be 1204 by 720 and this is going to be a fixed single and the four color is going to be white and as the font i'm going to use the new windows 11 font if you don't have that you can download it or you can use just the windows 10 sego ui font i will use sego ui variable because it has some nice improvements to the font i will use font size 8 and i think i have to change the size again to 720 and next i will change the text of the form to sign in to cyber and then let's change the start position to center screen and then we will remove the maximize box that's it for the form so let's add panels so let's search for a panel and this panel is going to be the right one so i will dock this to the right side of the form and change its size to 780 by 681 right and i will use another panel as fill is like that and for this panel i will choose the background image as this left gradient i have exported this from photoshop by going here and i made this a smart object and then i exported this as a png so after that i have this png now i can choose that as the left gradient of my application and i will open that and then i will change the background image layout to stretch because this is a gradient and its ratio does not have to be perfect it is fine to stretch the gradient and for this one i will choose the right gradient and let's change this to stretch as well okay so now let's add a picture and let's choose the image i'm going to use the company logo the size is going to be zoom and other research is resize it like that and for the background color i will change it to transparent in the size i will enter the size manually we will add another picture box and for this one i will choose the cyber text like that i will just put auto size so now we need the label so let's go label put it here and for the label i will put the background color as transparent and for the text i will put this is going to be top center aligned the size of the text is going to be 13.25 points just like that and then we need another label this is going to be no account and we need the button and for the buttons options i will go to flat appearance and change the flat style to flat and change the border size to zero and then change its back color so i have this hex code for the button which is um actually i will put the rgb values one seven four one three five one five and for the font size i will use 11 points and for the text i will use register and let's resize this button a little bit okay so now let's copy this label over here and change its font i will make it display bold and for the font size i will put 33 and change its text to sign in and place it somewhere over here and let's grab this text again and actually i will go ahead and copy the text from this one and change its alignment to top left and also let's go all the way down and change auto size to false so that we can use this as a resizable text box so that we can adjust where the text will appear let's make its size to about 10 points like that and now we need another panel for the username and password fields and this is going to be 2550 69 and this is our username field so i will need a text box as well so i will put that here and for the text box change the border style to none and back color by color to the same color of this panel and let's change the font size to about 12 points and i will place it over here and now we have our text field so i will copy that and paste it over here for this one i will type user name and also we need to change the foreground color to white as well and for this one i will type password actually doesn't matter what you type here because it's going to be appeared as bullets so to do that let's change your system password char to true now we need a check box for the checkbox back color let's choose transparent and for the check boxes text i will just copy the text from this one and i will make this as checked not unchecked like that okay so let's copy this button over here and i will resize it to the size of the text boxes and let's change the text of this one to sign in and now we need another label so i will just copy this one and change this to actually i will copy the text from here continue without signing in and let's change the text align to center and i will resize it like that and i will change its font style to underlined and also the font color to 70 108 and 136 so the reason why i am changing it to a less visible color is we need the user to sign into our application so we need to make the option less visible so user is not attracted to that option otherwise the user will not sign into application so we need to make signing into the application obvious and not signing into the application less obvious that's why we are doing that and for the bottom section i will use another panel as well so let's just grab that here and i will make the dock to bottom and i will just move all the stuff to the middle like this we can align these items like that and for this panel i will change its back color to 20 58 and 86 and for the size of it i will put 780 by 128 and i will need another text box i will just copy this one and this is going to be did you know you can put whatever you want i'm just using this as a demo text so for the font size i will put this as 14 points and let's make it bold and i will copy that and paste it and let's change its font style to just regular display and it is going to be 11 points and i will just copy the text from here like that now i will just align this to the center like that and now we can select these items and align them to the center as well so i think that's it for the user interface so let's run the application and see whether it looks right in the screen so let's run the application okay so this is our application as you can see it is working and the ui actually looks okay actually this is a little bit of a line but let's fix that that's not that much of a problem so the ui is working just the way we wanted it to so let's go ahead and code all the elements so as you can see currently the text boxes are not working the way we want and also the checkbox isn't doing anything and we can't actually sign into the application and also uh just so you know sign-in forms do not need terms and conditions because you are just entering your username and password and then logging into your account just like how you would do in instagram or facebook terms and conditions are required in like register environments i just put it here because i need to show you how you can use a checkbox to enable and disable a button now let's go ahead and code the functionality of our application so before that i will just align this to the center so the first thing i'm going to do is i will go to these text boxes click event so to do that i will go to the text boxes properties and click on the events button and go all the way up here and double click on click and in here i will type some code so what i'm going to do is i will check whether the text textbox's text is username which currently is so if the checkboxes text is username we need to change that to just a space okay so we need to clear the textbox and so to do that we can use an if condition so in the condition i will type textbox one text is equals to username then we need to change its text to just a null string like that so we need to do the same thing for the password field as well so let's go to the form and create the click event for the password field so let's go here and find click event and in here we will just change this to text box 2 and change this to password okay so now let's try to run the program and see how it works okay so now if we click on the username as you can see the text is erased and if i click somewhere else the text does not come again so what we need to do is we need to show the username text when you click somewhere else so as you can see in this application if i run my original application if we click here and click somewhere else you can see the text just comes right back so that's what we are going to do now so we will create just click events for all the other elements which is i think the easiest way to do this because you don't have to deal with advanced stuff you can just do that okay it will work so to do that i will select all of these elements except um the text fields and all the panels as well and then in the events section i will create a common click event for all of these elements so i will just name this as other click so if other click happens which means the user clicked on somewhere else other than these two fields so if that happens we need to check whether the text inside these text fields are just empty strings so if there's uh empty strings that means the user have clicked on them earlier and now we can just restore them to the default values so to do that we will use if conditions so in this condition i will check whether if text box one text is equals to just a null string like that and if so let's just add the text boxes text as username like that and i will just use the same thing for the password text box as well which is text box 2 and i will change this to password so as you can remember i selected all the other elements but not the text boxes because we need to implement this code separately for those two text boxes so if the user clicks on the username textbox then this happens and next if the user clicks on the password field then we need to assign uh actually change the text of the text box one to use a name back so to do that i will just copy this part to here actually let's run the program and see how it works before we do that so you can understand it better so what i'm saying is so if you click here as you can see the text is gone and if i click here the text is back and now if i click here the password is gone but when i click on the username field the password does not come again so if i click here the username is not there also and the password is not also there and if i click somewhere else both of those appear but we need to reappear username text in here when we click on the password field as well so to do that let's just copy these two parts separately and paste them inside these two event handlers just like that so now if we run the program as you can see it works just fine just the way we want it to work now that part is done we can go ahead and code the checkbox so let's go to the form and click on this um actually click somewhere else first and add event handler for our checkbox just right here so for the checkbox let's go to the check actually let's double click on the checkbox it will just create the default event handler which is check check changed so this event handler we will carry out the functions that are required to run when the check state of the check box changes so for instance if the user changes the checkbox from check to unchecked the cord will run or from unchecked to check what we need to do is let's check if the checkbox once checked is equals to true which means the checkbox one is now checked so if the checkbox is checked so this means now the user has clicked on the checkbox and now the checkbox is in the checked state so if the checkbox is checked then we need to change the button tools enabled option to true so in the else statement we can do the opposite which is button to enabled equals to false okay so what will happen is when the user clicks on the check box it will first see whether the check box is now checked if the check box is checked the button 2 will be enabled so that the user can click on the sign in button so else which means the check box is not checked if the checkbox is not checked we need to disable the button so that's why we put false in there so now let's run the program and see how it works and now as you can see it works just the way we want it to work now let's code this label right here which is the continue without signing in label actually we need to create a separate click event for this label so we already created a click event for this label earlier when we selected all of the items and created the click event so now we need to create a separate click event for this label so i will just remove the click event from that label and i will just hit enter to create another event handler for the label we need to copy this code from here and i will paste it here in addition to that cord we need to check whether the user wants to exit out of the application so we are going to ask a question with the the user really wants to continue without signing in if he says no then we can allow him to sign into the application if he says yes then we can just continue to the application so in our application we are just going to exit out of the application you can just add whatever code you need into this area so i will just check whether the user will say yes or no to do that let's just show a message box so a message box is used to show messages so if you don't know what that is you will see in a moment so let's show the message box this message box will contain a text of actually i will copy it from here i will go to the code and just copy this from here like that i'm just copying the text it has nothing to do with the code this is the text that we are going to show in the message box are you sure you want to continue without signing in this will stop synchronizing your settings and won't customize anything you can put whatever you want here this is going to be the content of our message box and this is going to be the title of our message box so when when the message box is shown you will see in a moment it has a title just like we have title in this one and also for instance if you open here as you can see the title of this window is app resources and just like that the message box also has a title that will go here and our message box will have two buttons so to add buttons to our message box let's put message box buttons yes no as a parameter to this message box show method and what we're going to do is check whether this message box is equal to system windows forms dialog result yes so if the message boxes result is equals to yes then we can do something here so that means the user agrees that he wants to continue without signing in so now we can just exit out of the application by application exit we don't need an else condition because we are not going to do anything when the user clicks on the no button it will just close the message box and we'll do nothing so i will show how this looks like so let's run the application so now if the user clicks on continue without signing in as you can see there's our message boxes title are you sure and there's the content of the message box and if i click on no the user can just continue to the sign-in form and if we click on yes the application will exit and also i want to point out something in these type of programs most of the time it is better to change the cursor type to hand not the default cursor because these don't look very similar to the native windows controls so the user might not recognize these buttons whether they are selected or not so we need to change this to hand cursor and actually it is actually very useful in this case where we show this label as a clickable item because otherwise the user would not know whether it is clickable or not as you can see only if the user clicks on the button he will know that it is clickable so let's go ahead and change that so let's go to the form and change those clickable items cursors to hand so i will select these three and this one and let's go to the properties and in here let's change the cursor from default to hand so now if you run the program you will see it is much easier to click on these items than just clicking with the default cursor as you can see now we can just easily click on these things and it is very easy to click on them so now it is actually very obvious that the user can click on this label as well it actually looks like a link now we need to code this register button what i'm going to do is if the user click on the register button he will be just redirected to a website where he can register create a new account and come back here and sign in with his credentials so we're just going to open a web page so this button already has an event handler so let's just remove that and create a new event handler for it and in here we will just copy and paste this piece of code and here we will type system diagnostics process start we are going to start a process so as the parameter we will just pass a website's url so i will type https so now if you run the program if we click on register this should open my browser and it will redirect me to the website ipod there so as you can see this is the cyber website and i can just close this everything works fine now all we have to do is called this sign in button so the way i'm going to call the sign in button is actually we need to remove the event handler for it as well i will create a new event handler so the way i'm going to call this sign in button is let's say our application only has one user which is the username with admin if the application has more than one user obviously every application need that functionality so you might have to connect your application with the database or just a text file with the bunch of text with the usernames so you can use whatever method you want the point is you will first check whether the input text is equal to the uh whether the input text contains in the username list you have so right now i only have the admin text so i will just use text box one text is equals to add me but if you have more than one you might have to do a different algorithm if you want i will make a separate video on that today's topic is not about algorithms it is about how you can design and implement a modern use interface inside visual studio in cpus windows forms applications we need to check whether the text boxes text is admin so if the username is equal to admin that means this user is a valid user so then we can proceed with the part where we check whether the password is correct so let's check whether the password is correct as well textbox 2 text is equals to password and now if the password is also correct then we can show a message box i will just use a basic message box sign in success and let's just exit out of the application you can put whatever you whatever code you need here you can just show some other application or whatever you need so in this example i will just use application xc so if the password is not correct then we will show another message box saying that the password is incorrect like that actually if the username is not equals to admin that means this user does not exist in our database so then i will show another message box called user does not exist i'm going to add one more functionality to this if condition i will just cut this and type another if condition and in here i will paste that part and in here i will first check whether the username is username because in our system we are not allowing username to be a valid username because we are going to use that in this piece of code so because of that we need to not allow the user to use his username as username so let's check whether the textbox's text is username actually not equals to username if it's not equal to username then this part will carry out and if it's equal to username then we must say invalid user name in addition to that we also need to include this piece of code which is responsible for that the visual thing where we change the username textbox to just a clean text box and then back to username and all that fun stuff and let's just put that in the end of our code just like that inside the button to click event okay so that's it for the coding part and let's see if this works so let's run the program and see whether it works okay so the application is looking good and let's see whether it works so if we click here it should open up our website just like that and if we click here username text is gone if we click here it comes right back and if we click here password is gone and if you click here it comes right back and if you click here and click here it works now let's say we have the default options here and i will agree to the terms and conditions now actually i don't want to sign it so let's see whether we can continue without signing okay so actually i think i need to sign it so let's just click no for now um so now i have agreed to the terms and conditions let's see whether we can sign in so it says invalid username because this username is not allowed in our database so let's just add some junk here and it says user does not exist and i will type the correct username admin and then it says incorrect password and for the password i will put password so now if we click on sign in sign in success and the application just exits so there's one last thing we need to check whether this label works so if we click on the label and click yes the application exits and also you can just exit by clicking here so that's it for this video hope you guys enjoyed it hope you guys learned something new and if you did please leave a comment and like this video so that others can find this video and also will be a great help for me as well and if you want to see more content please check out our channel and subscribe to us and hit the bell icon i'll see you in the next one bye for now you

Channel: Sciber

Views: 31,002

Keywords: visual studio windows forms, windows forms application, visual studio 2019, visual estudio, visual estudio 2015, sign in form, visual studio gui, setting up a c++ project in visual studio, how to create modern sign in form in c++, how to create a gui in c# visual studio, visual estudio 2012, visual estudio 2017, visual studio gui design, windows form visual studio, wpf form visual studio, c++ mdoern sign in form tutorial, how to design user registration form in c#, c++ modern

Id: b8R5D0lryq0

Length: 29min 28sec (1768 seconds)

Published: Fri Sep 17 2021