WinForms in Visual Studio 2022(Design Login Page)

foreign welcome back once again in this video we're going to create a login page for Windows forms our winforms application using the visual studio 2022 but before we get started please subscribe to the channel if you haven't and like the video for obviously also use it at it yeah so as you can see I've got some concreted now so we're going to create very similar login page using the Windows phones or wind phones yeah so rather than just talking too much so let's get right into it so to get us started we're going to create a new project so we come inside the file we go to the start window so we go to create a new project and here on the language side we select C step and and here we select desktop as well yeah so once we do that yeah if we've got all the necessary components installed yeah you should get a Windows phone if you haven't you can have a look at my video on getting started with waveforms applications yeah so we select the Windows phones app here so this is a project templates for creating a.net Windows forms application yeah so we select it and we click on the next so here obviously you can configure your project details you're not going to look into that so we're going to click on the next so here we click on the next again so we're just going to wait for the project to create here so I'm gonna pause the video okay we have it created yeah so right now we've got our Windows Form created yet okay so we're just gonna get right into it so we come inside the background file out we're just gonna set our background color we're going to be creating something similar to what I had so this is our background color so we scroll down and we change the title as well so here the Wind forms here so we're gonna make it login yeah so as you can see here we've got this change to log in so we just we scroll down to uh the size here so the size yeah the first bit we're just gonna make it seven zero three and four hundred yeah so so as you can see it's actually turned on the screen very nicely yeah so what we're doing next is we come inside the toolbox yeah and we select label we put our label here so we come here we come back here and we look at the test so we we're just gonna put work on to login page yeah so as you can see here we go with written nicely welcome to login page so we come inside uh the phones so we click here so this will actually open so we change the font size to 15 to make it a bit bigger I will just change it to 15. yeah and we click ok so this will actually make it bigger and it will look for the Align to test the line yeah so the clicked align you click on it and we set it to the top middle so this will be it will be inside the middle very nicely yeah so we click on the toolbox again we look for our label we grab a label here for our label here come inside again grab another label the point here so so I'm just gonna make it nice so here it's very big we're gonna change the test and make it a username we select the next one and we're gonna make it password yes so it's very nice you just align it with the welcome so here we're just going to change the font size it's completely a bit bigger so we click on here and we set the phone to like 14. click ok and we do the same for the other one we set it to 14 as well yeah so it's it's very nice and neat so what we do is come back inside a toolbox and we look for text box so a text box before I text box here and we look for another check box pull our text box here so we're just gonna make it nice we're gonna make them to align lines and we're gonna expand it a bit so as you can see I've got a very nice touch boxes as well so let's come let's first of all we selected the username so let's scroll down so here the name of the text box one we're just gonna make it okay username you're gonna change the name to username and then and then the password text box two to password okay so as you can see they're very nice and aligned cleanly so we're gonna go inside the two box again and we grab our button just grab one button here and we're gonna put it here so this button we're gonna take the test uh we're gonna name this one the login button the name will be login and you scroll back up so let's try to change the test to login yeah so and then the test online yeah middle sensor and then the four color we're just gonna go take the background colors the back color we're going to change the back color we select here then we go inside the system I mean the web click on the web and we scroll down and we select the line green and the foreground or the four color we make it white and we come inside this bit here and we select both yeah so we come inside the toolbox again and we select another button so here obviously we're just gonna change the test so we're gonna make this one cancel and we can't we change the name as well save the name to cancel so as you can see it's very simple stuff we've created here yeah so what we do next is we click on the on the username and we scroll down so the placeholder inside the placeholder before username so this will actually reflect and then inside the password you put password as well yeah so this will show password and the username placeholder yeah so here on the console button here you scroll up and the back color we select a different color so we select on the web here and we change it to red and then the four color and controller yeah so it's make it nice and obviously we make it bold as well so as you can see it's created very simple login page so what we do next is we handle the click then the click event yeah so what we do is we double click on the buttons so this would actually open the login click events here so we're just going to make some something very simple here so we will say yeah if the username DOT test it's not empty and password DOT test it's not empty so at least what we're going to do we're just gonna kill a message box so we're just going to write a login successful so otherwise you're gonna put a message box again foreign username and password yeah this is just for illustration of purpose only so this is this is what we're only going to do okay we're not going to handle the um the event for the council place so you can do that yourself obviously yeah so what we're going to do is we're just going to run it just to see what actually comes down so as you can see here we've got a very simple login page so we're just going to put something very simple use that obviously the password to we've not hidden it so we're just gonna make it faster it's still going to slow so we click on the on the login and we get this login successful okay so if we if we don't have anything here if we click the password if you click login and there's nothing there so as you can see please enter the correct username and password yeah so I'm just going to leave it to this video here I hope it helped you to get you started in terms of creating a login page so you can continue from here and play with it so once again please like the video and share it and if you haven't subscribed to the Channel please make sure you do because I've got lots of videos coming up I hope you have a lovely morning afternoon evening wherever you are peace

Channel: Hacked

Views: 2,629

Keywords: login form, visual studio, c#, winforms visual studio 2022, windows forms, login page windows form c#, login form design

Id: R1lm3HrAVtY

Length: 12min 40sec (760 seconds)

Published: Wed Jun 07 2023