.NET MAUI Login/Sign In Page UI | DOTNET MAUI Project | MAUI Simple Login

hello everyone I welcome you all to another video so in this video we'll be creating a login screen in the Barbie how so how we are going to create that so this is such kind of UI we are going to design okay so I have downloaded these images uh this is one image and these two images rest is uh just a widgets so uh here I have given the name as login image a Google image and Facebook image so how to do that so I'll just take a snapshot of this one okay and I'll just keep it handy over here so that we'll just compare this U1 so there's the UI we will try to recreate so can you see that first label and this image is horizontal so we take so what we do we'll do uh we'll add a grid column definition okay so there are two things okay that's all I have added that and uh first is label text will be ready have an account okay and uh it has a question mark so this is my text I'll give a text size for um sorry font size of around 14 again and I will add image of source IMG underscore login dot jpg and I want this image to be on second column so grid column so this part is done um I want some cutting at the term so probably I'll add margin so um top margin as uh 20 sorry this is left left is 0 20 stop and rest of the margins are zero so I'll just quickly check how it is looking I'll just add this entry and labels so here since this label and this entry are vertically aligned so and these are also aligned vertically but the S padding or the spacing between this label and these two widgets so basically email and pass password is uh different so we'll create one layout as email with an entry and label and the other widget or a layout as password and password entry so here the image is not appearing um so the reason for that is the size of the image is too used so probably will give the height of the image as um 25 250 or 200 and width of the image is 250 let's see [Music] um still it's not showing uh okay one more thing is it's already have an account and um okay I'll just give the width as 200 uh probably I need to rerun the program okay so meanwhile we'll do one thing I'll just till the time it creates I mean uh it is running I'll just quickly add some other things we got the image here now I want this uh text to be vertically um Center so we'll add here vertical option is Center and expand or I would say Center and I want a spacing that is uh the column spacing as 20. since I'm maintaining a 20 uh padding at on the left and right so that's why I'll be keeping it as or or I'll just reduce it to 15. okay and then I so this part will check the alignment ladders so meanwhile I'll just add our the code for the entry so I'll be taking the code from the for the entry from the previous video so if you have not watched my previous video how to create a borderless entry you can click on the I button and from there or in the description you'll get a video to create or how to create borderless entry so I already have this borderless entry over here so I'll just add that so this is the code for my borderless entry so and similarly I'll create one more for password one more label for password should be enter password okay here it is enter email and I don't want this as password so this is uh for email and this is for password and I want here a margin as 20 at the top and here also 20 at the top okay and other than that I want a button with text as login Corner radius probably 20 and uh color as the pop pearl color and um text color as white okay okay so we'll just check how it is looking okay it's running so okay my this uh this alignment I got it correctly I got the email as correct or the password is correct uh this is also having a good padding only thing is I have not given any margin to this one so I'll quickly give some margin uh to this one okay and I check in the UI as well so yeah I wanted the same padding whatever it is there for the email and password so Sim padding is given um now I want uh this label so so can you see the padding is less compared to this padding so we'll just add a level text as new user yes okay so this label is done I want um I want the font size font size as probably 14 and then I want it to be Center horizontal option to be Center and after that okay so I want the margin as 15. fin margin is given here then I want this user other method label but can you see there are two uh lines okay um so how to create that is it is the same approach so instead of two column we need three columns I'll just add three columns over here then the first will be a box View having the height of 1 and color has a black and same I want okay first of all I'll need to give the I mean first of all I need to decide or tell so basically I need to tell on which column I want to show this one and then I'll copy paste the same and I want this on second column and on the First Column I want this text so I want this as label and to the label I need to view the text as use other methods and font size as 12 and horizontal option to be Center so this thing is done and below that I want two images which is horizontally aligned so horizontal stack layout I would I'll be using and image as uh IC underscore Facebook dot PNG I'll give the width as um around 35 and height as 35 same I'll be using for um Google image I see underscore in Google okay now give the margin as 15 yep 15 margin okay so uh we are done from the coding point now we'll see how it is looking on the UI so this is how it is looking on the UI um okay most of the things seems to be correct only thing is like here I wanted as methods spelling mistake with time capital and I want this to be central line and the spacing between these two items so we'll quickly change it okay so I want spacing between these items so I'll discussing as 20. I want it to be Center aligned so horizontal option press Center so this is done and I want here a spelling message to get corrected as here methods so this is done other than that I wanted uh the font size of this already have an account so I'll give it a 16 and we'll see how it is showing okay so it's looking good only thing is like uh it's taking I mean it's coming on double line uh rest of the thing is looking good so let me change it and how to do that so it's here it's coming on double line because uh we have given a column spacing of 15 so I'll just make it as 10. and then I'll see how it is okay uh it is looking good now and it is also Center aligned okay now I don't want this um you know navigation bar so what I can do here since I'm using the Shell navigation so I have to use that navigation bar has is visible and if I have to say it as false okay so it is gone so yeah that's that's it from this video uh yeah you can increase uh this size I mean the width if you want of this image the rest of the things looks good so um yeah that's it from this video there's a login screen if you like this video please do not forget to like the video and subscribe our Channel thank you

Channel: BATCODES

Views: 3,517

Keywords: android, ios, maui.net, maui, .net, dotnet, ui, login, signin, signup, speedcode, xamarin, xamarin-forms, simple login page, developer, coding, xaml, c#, android studio, visual studio, vs19, .net7, .net6, microsoft maui tutorial, dotnet maui login page, c# login to website, microsoft dot net tutorial, login page using xamarin, create login page in xamarin, login page using c#, c# login app, visual studio maui tutorial, visual studio 2022 maui tutorial, maui net 6 tutorial

Id: Vx-YdHVI7dU

Length: 12min 9sec (729 seconds)

Published: Thu Feb 16 2023