New UI Designs in .net MAUI

foreign [Music] um apply applying xamarin project dependency okay so let's begin so for dotnet my uh you already know that we are we are going to use Visual Studio 2022 this is my project okay now this is for login page okay and in in 2022 we can see a live live tree means you can see a live UI so I I've been I'm running this so uh first will be a login page after so you have to set the uh here as a new navigation of login page okay so it is live preview you can see this will be very helpful for the for the debugging the design okay and uh and uh for the status bar uh in xamarin you have to set up a status bar in Android and the iOS dependency project okay uh in you have to write a different code for each project for setting up the status bar but in dotnet now you can add a nugget call a community toolkit dot uh sorry Community toolkit Dot and add this uh um additional namespace here and use this content dot behavior and you can use the status bar Behavior where you can add a color of the status bar okay so uh this is the uh where you can set a status bar here and another thing for if you add this nugget you have to initialize in okay so you have to use the initialize this but when you install the Nugget it will order it instant payment in in two minutes it will not only two minutes in one second it will throw an uh error that you have not initialized this uh this community tool okay so uh don't uh you don't have to remember that we have to initialize this uh dot net my already uh will give a pop of that please initialize this the toolkit okay and uh another thing yeah I just said uh uh a resource dictionary for the colors and the in uh you already know this what is this this is the uh uh um value we are setting and we can use in whole application by using this name okay so return to the design so uh this is the this is this okay this is an image so I have created image and add in I have added uh in uh resource images okay this is the image I have added here okay then after these two are labels okay first of all I have added a grid here I as you know I am already taking a grid always using a main control as it read because it is very easy and you can maintain a row and column so I personally use a grid but you can use the as you want I you can also use the absolute layout here okay after that so this is main Grid in Grid I have added image and two label after that I want this to be in another grid this should be another bit means uh this text box and the buttons okay so I added another grid an ER for text box I have created a custom control okay so we will look into custom control letter first of all we are understanding design okay so this is text box in the second grid and the this is the label and I have added here this is a on click event so it will open a new page of forget password okay this is button of login and another is label it is only this is only one label okay but we can use a formatted text for uh for a visible to color okay so I use a formatted text tag and in the formatted text use formatted tree and informator Screen you can use a span in Span text color whatever you want and add a sub text and you can add as many as 10 you want and assign a color or you can also assign a I think font size font size is also there on families also there so there are many property you can you can use a span wise okay and this is a click event okay this click event will open a resistor page now we will see a custom control for the this text box okay now this is a text box I have created here this is the Border okay this is border and in the Border I have added a entry okay means entry means text box so uh first of all in water it will allow only one control to add so I want this to show label about the border so I have added label here in the grid as a first row and margin as a bottom 60 means uh it will take a upward this label so if I not use this if it will show here in the original space but I have used 60 so it took up the label on the bottom okay now how this space is straight okay for this okay this is new type of getter and Setter you can uh we are using like a gate and curly bracket written uh return a value okay and set the curly bracket and we have to set the value but this is new type of for coding so you have to use the gate and this symbol then uh uh whatever you want to return and same for the uh Setter okay so uh for uh for uh for this space okay I have used this property so while setting this property if the string is empty okay if there is no stream if if I am not passing any value then it will show the full border so I have written at setting value is uh null value or empty value or else it will add us space before and after the value okay so it is inline if condition so you have to write like uh variable or where you want to assign a value is equal to condition you don't have to write if if uh if tag but you can use a directly condition you you have to use directly condition then question mark True Value else first value okay so this is inline if condition okay and for uh for to navigate from one page to another page I am using a web navigation dot pushing uh in that you have to pass a name of the page okay and if you want to return you have you can use pop a c or you have to return to the root in the first page you have to use okay another uh pages are same page okay uh this uh this is the resistor page same as logging page uh there are more textbooks in OTP verification means when you click here it will go to the registration page and when uh you click on the register page it will open up OTP verification page so here I have added a grid where it has four column okay and I have used same control so uh you in in all of the column you have to add a text box custom text box and pass header as value as empty so uh in condition as you remember we have set that if condition is empty then it will be the empty as this or so I I hope you understand this uh design if you have any question then please ask me in the comment section and please subscribe my channel and please uh click on the like button if you like this video and I will share the code uh through the block I have not created the block yet but I will create in one or two day and I will uh update in the description box okay thank you bye

Channel: Xamarin UI Designs

Views: 717

Keywords: UIDesign, Design, UI, xamarin, csharp, tutorial, xamarin form, xamarin developer, csharpdeveloper, csharpdotnet, mobile developer, mobile, t mobile, learning, #MAUI, #Login, #Register, #LoginUI, #UXDesign, #SecureAuthentication, #RegisterUI, #UserAuthentication, #OTPVerificationUI, #ForgotPasswordUI, #CrossPlatformDevelopment

Id: lLeifjaGnaU

Length: 14min 14sec (854 seconds)

Published: Tue Jun 06 2023