WPF in Visual Studio 2022 (Design XAML Login Page)

hello everyone welcome back once again in this video we're going to create a very simple login page for a WTF application but obviously before we get started please make sure you subscribe to the channel if you haven't and like the video if you choose to okay so let's get into it then so WTF is just a windows presentation foundation for developing Windows based desktop application but if you don't know a lot about it or you've not installed it you have not installed the necessary components um I've got a video on getting started with WPF so you can have a look it's on my channel yeah but if you have then let's get into it then so as you can see here I've actually got a sample created right now this is what we're going to do yeah so let's run and see what what we're going to do so as you can see here now we've actually got a very simple login page with username and password yeah with two buttons yeah and the console and the login buttons here I've not you've not actually handled the click event for the buttons but we will do it on this video yeah so stay tuned so to get us started I'm just going to go back to the startup the start window and we're going to click on the create new project so here as you can see I've selected on C sharp and and desktop here so why once you do that if inside you can easily find the WTF application so it is just a project template I mean a project for creating a.net WPF application so we select this I will click on this here you can configure the project details but we're not going to look too much into that so I'm just going to click on the next one and then next again so we should get a new project created for us so if you don't know what this project files are please I suggest you go back and watch my video on getting started yeah because we're not going to look into that so let's look inside so we've got the design bit and we have the the thumbnail file for the design so what we will do is you're gonna make we're going to change the background for the main window so it's a dark slit grain you're going to use so that's that's what I showed you on the sample here so we come inside a the grid and the vertical alignment you're gonna set that top yeah so what we do next is come inside the toolbox yeah and we drag a label so we put the labels here so the content we're just gonna make it welcome to login page so here we're going to change some few properties here so um we make the font bigger so the font size it's going to make it 22. and the foreground we're gonna send that to five to make you more viewable yeah so I'm just gonna drag this a bit a little bit in the middle yeah so as you can see it's nice and clean so the next bit is of course we're going to grab another label so the label this level we're going to change the contents and make it username yeah I'm gonna change the gonna set the phone size to something like 18. and the in the third color you're gonna make it white yeah so what we do is just gonna we're just gonna highlight it and copy we're gonna copy and paste with here so in this case we have to the label so we're just going to drag one just down a bit and the down the downbeat yeah you're gonna change the username to password okay so we're just going to push it into the middle of the do this thing for the password they will come inside the text I mean the toolbox looks for test box you drive the text box and we put it here open it a bit okay come inside the two boxes and right past so we're going to choose the password box so just a second so I've got the drug and dropped a password box here I was having a little problem with it but let's open it out so we're just gonna and open it a bit okay as you can see you've got a very simple stuff here so we go inside the toolbox again and we select a button let's put the button here and we open it a bit so here the contents between the content to login and let's change the phone size as well make the font size 18. and the background there is a background line or lime green whatever and you change the foreground to White yeah so I'm just gonna make the make it a little bit bigger and wider so I'm just going to select it and copy copy the button and paste it here so we just select it and report it here so here the second one I'm gonna change it the content and make it canceled and the background to red yeah so as you can see it's looking nice inside I'm just going to push this bit onto it right a bit yeah so as you can see it's a very simple stuff so if the user test box using text box yeah so the text inside is text box so bad we're just going to leave it like that yeah so we're going to give it a name so the name will be uh username and the name for the past password box this will be password okay so we selected the login button and we double click it it's supposed to open a click event but if you double click here and it's not opening come to this side and the properties tag select this bit here so as you can see there's a click here so you double click this one so this will open the click events okay so let's see is we've got order is sorry username okay username is showing so you're just gonna handle it very simple so we're just going to say if username DOT test it's not it's not no and password foreign login successful um otherwise we're just gonna say so at least just a very simple example so we're not we're not going to handle anything they're just gonna say um please enter the correct user details okay so that's this this all is here so what I'm going to do is we're just going to run and see what so this is our login page so we're just going to prove easily yeah or use the name and we're just gonna put something on the password anything and let's click so as you can see login successful let's remove this and click so as you can see please enter the correct detail so you can you can take it from here and play with it and do whatever you want to do yeah so I'm just going to leave it from here for now but please like the video If you haven't and also subscribe to the channel if you haven't so have a lovely morning afternoon evening Wherever You Are please

Channel: Hacked

Views: 3,036

Keywords: c#, wpf tutorial, programming, learn c#, c# tutorial, c# programming, wpf visual studio 2022, wpf visual studio, wpf, windows presentation foundation tutorial, windows, coding

Id: MXS9RTBcb0g

Length: 13min 20sec (800 seconds)

Published: Thu Jun 08 2023