.NET MAUI UI Challenge # 8 - Login Screen

I'm Hector Perez from De School welcome to this new graphical interface challenge in net Mai in which we're going to recreate the page that you can see on the screen it's a login type page that looks quite good it has elements like a background in the header an animation that looks quite nice sections for icons and the use of different elements like different colors for each of the buttons I hope you're excited about this tutorial and if you are remember to leave your like on the video and subscribe to support this channel now let's get started well I have already created a new project in Visual Studio to begin this graphical interface challenge which is actually going to be a set of different graphical interface challenges in which we're going to create an application not with all the functionality but at least with the graphical interface part we're going to link different pages so that they follow a sequence this time we're going to make the login type page the first thing I'm going to do is create a new folder as part of this project so let's add a new folder and let's call this folder views for example now that we have created this new folder let's create a new file that is going to be the file in which we're going to be creating the graphical interface let's select the donet mai category select that we want a Content page and let's call the page for example lugin view. zaml let's wait for this page to be created once we have this page ready what we're going to do is identify the sections of our login screen for this we return to the emulator and see that we have a top section that contains this background image and we have a second section that contains the graphical interface controls let's start then by creating the main container for the entire application for this I'm going to remove the vertical stack layout that is created by default instead we will create a grid with a pair of rows the first row will have three asterisks and the second will have a point s asterisks so the first row will be the top row for the image element that is in the background and the next row will be for positioning the different graphic interface controls once we have our first grid the first thing I'm going to do is create the image that you can see as part of the application this background image previously I created an image with the appropriate Dimensions so what I'm going to proceed to do is to create a new image control with an aspect equal to aspect F and a source equal to food.png I close the tag and I'm going to import this image that I am referencing in this line I'm going to place this image in the resources folder here we have the images folder I'm going to paste this image and this is the one you can see in the preview so now that we have the ready so that we can see how the application looks like in emulator I will go to the file named app. xaml.cs to change the main page in my case the main page will be lugin view which is the name of the class that is created as part of this page that we created we indicate that we want to use the name space for the folder we previously created with the changes we have made I select one of the emulators let's launch the application to see how what we're doing looks after a few seconds as the application was being compiled and run in the emulator we can see that the image is now satisfactorily displayed as part of the application if you have never worked with the net Mai and wonder why the image only covers this space at the top it is because in this grid we created a pair of rows the First with 30% space and the second with 70% space what we are doing is indicating that this image will occupy the first row which is the one with 30% of space this is happening because we're not specifying as specific row where we have to position this image and automatically these elements that don't have a row assignment are displaying as part of the first row of the grid so in this first grid once we've imported and are displaying the image correctly the next step is to place a layer at the front of the image so we can put a white text on the top of this layer with a specific opacity how can we do this well we're going to create a grid on this image we placed before to do this we're going to indicate that we want a background color equal to 4 F 3F 9B this color can be any color you like I'm doing this because I'm going to use purple as one of the main colors of the application next we're setting an opacity of .9 that is 90% if we go back to the emulator you can see we are already have this nice layer showing at the front of the image and it would allow us to place white color text on top of this layer the next step is to divide this layer into two so we can place the icon or the logo on the left and put the animation on the right how do we accomplish this well after the second grid we've created we're going to create a new grid allocating the column definitions property to create a pair of columns these columns are going to have the same width so we put asterisk comma asterisk that ensures both have 50% space each we're also going to add an image inside this grid this image is going to be the logo we're going to indicate that we want an aspect fit as part of the properties of this image we also want to allocate a specific height which will be 120 units finally The Source or what is the name of the image in my case will be app logo.png I close this tag I'm going to stop the execution as this image that I'm specifying here I haven't imported yet as part of the project that's what I'm going to do next again I go to the folder called images and here we already have this image called app logo .png which is actually a white colored logo I think you can see it a little bit it's this logo that we can see here with these changes that we have made I'm going to start the execution of the application again so that we can visualize the changes as we go making them once the application has been deployed we can see the logo on the left side of the application which indicates that everything is working correctly the next step is to create the bottom part as the animation we are going to leave for the end we will focus on the bottom part to create the section where the graphical interface controls will be located how can we do this well we're going to go to the main grid which appears at the top and what I will do inside this grid that I've defined is to create a new grid this grid will be located in position or row number one since we are going to occup occupy the space of the bottom part the other controls have been or have been positioned on the first row but we want to position the second row already at the bottom once we have created this second container we're going to indicate that we want a round rectangle control type to give us the bordered part or give us the bordered control that we need to separate the top part from the bottom part for this round rectangle I will assign a margin of -5 -3 -5 -2 this is for the round rectangle to have a correct separation from the application Borders or device borders next I'm going to assign its cordner radius a value of 30 30 0 0 I'm doing this because I want only the top edges to be rounded I'm not interested in rounding the bottom edges and that's the reason for this specific assignment once I've done that I'm going to specify a field for this round rectangle which will be white then I will close this tag to see how it's looking in the application okay we can now see the round rectangle which is part of the graphic interface with the specified rounding we don't have rounding on the bottom Edge because of the instruction we specified once we've created the round rectangle we will create another container as part of the same grid positioned over this first round rectangle we could identify this round rectangle as the background of this page and then we're going to create a vertical stack Le out that will be the container for the graphical interface elements or controls this vertical stack lout will have a margin of 30 0 30 0 now that the vertical stack layout is ready we're going to start creating different controls to position them within this container the first of these will be a control label we assign some properties like font attributes equal to bolt font family also equal to bolt and font size equal to medium the text will say welcome and a text color of 2D 2D 2D a gray appearance you can see on the screen we are going to create a second control label that has a font family set to medium and the text to log to continue and a text color set to A3 A3 A4 I close this tag and now that we have this pair of labels ready let's review them on the emulator and we have this graphic interface with these couple of elements or text displayed on the screen one thing that is lacking here is importing fonts because we are specifying a font family set to B and another set to medium thus I will stop the application and I will go to the solution Explorer I will head to the resources folder and here we have the fonts folder where I will paste the funds we will need I've already imported the pair of fonts we're going to need they are these two fonts L Bol and L regular to register them as part of the application we're going to go to m program as part of this section called configure fonts I will proceeded to add a couple of lines through fonts do add font we have to specify what the name of the font is which in this case is lol. DTF I'm going to copy this name here we can specify an alas to use in zaml code for this font in my case I'm going to specify the name as BT or the alas to be equal to BT I'm going to duplicate this line check change the name to lat regular which is the name of the font and change the Alias to regular if I remember correctly this is the name not medium we are going to change the name to medium once we have done this we start the application again to see these changes in the application ready after waiting a few seconds we see that the font has already changed we have a font that goes more in line with the application we are developing The Next Step then is to recreate the part of the section of the icons you can see next to each of the text boxes how can we achieve this effect well we're going to go to create a container for each of the icons next we will create a round rectangle for the background finally we are going to use a font icon to assign which is the icon for each of these sections let's go to the examl code that is to the Lin view. zaml file after the second label control remember we are going to position ourselves within the vertical stack layout within this vertical stack layout I'm going to create a new grid we assign a margin of Zer comma 30 comma 0 comma 0 to separate this grid from the last label control a bit next we will indicate that we want to specify a couple of columns the first one with 20% space and the second one with the remaining 80% off space actually this grid that we are defining here is going to be the grid that separates the icon from the graphical interface control inside this grid I will proceed to create a control type round rectangle let's set its background color property to Ed EB F6 also a corate radius equal to 10 a height request equal to 6 60 units it's horizontal options equal to Center vertical options equal to Center and finally a with request equal to 60 units if we close this tag save the changes and return to the emulator you can see that we already have this new background color or this section where the icon that we are going to create next is going to be located The Next Step then after the round rectangle is to use the icon of the font however we have not imported this icon or this font that contains the icons yet for this let's return to our folder called fonts and I'm going to proceed to copy and paste the font that is this font called font awesome solid to register this font and be able to use the icons I go back to the ma program.cs file I'm going to duplicate one of these lines I'm going to copy the name of the font I'm going to replace the name of the font once I've done this I'm simply going to assign an alias for example awesome solid with what we've done we can now use this font as part of our zaml file therefore after the round rectangle that I have defined as part of the examl file I'm going to create a new image with its horizontal option set to Center there are different ways to use a font icon in my case in this case I'm going to use an image I'm going to specify a source for this image and next I use a font image source element here we have to specify what is the font's family that is what the font's Alias is which in my case is awesome solid also the glyph which will be equal to an % symbol a hash symbol and then xf0 e0 and a semicolon a size equal to 44 unit units a color equal to 4f 3F 9B we close this tag and if we return to the emulator after a few seconds we will have the application in the emulator and we will have this beautiful icon which serves to represent the information that we will have to fill as part of the graphic interface once we have this code ready we are going to proceed to create the entry control for this after this image control I'm going to create a new entry control I'm going to position it in column number one I place a placeholder equal to email for example a text equal to for example netbot ATM delivery.com and it's vertical options equal to Center we close the tag save the changes and voila we have this section of the first control we have both the icon and the graphic interface control to to create the password control all we will do is duplicate the section that we have previously defined how can we do this well we are going to take this whole grid the grid found after the label control I'm going to copy this code paste it and some changes I'm going to make are first I'm going to change the glyph to glyph F0 84 also as part of the entry control this entry that we have here instead of the placeholder equal to email we will indicate that it will be equal to password similarly to increase security I'm going to assign a property called is password is true so that it displays the control as asterisk instead of characters finally we will change the text so that instead of an email address the text is equal to 1 2 3 4 5 for example if we save the changes and return to the emulator we can already see this new section for the password which looks quite good let's now create the button section to do this after this grid that we have created before the closing of the vertical stackle out we're going to create a first button with a margin equal to 0 20 0 0 a background color equal to 4 f13 f9b a hide request equal to 60 units for example and a text that says login the text color will also be equal to FB F6 FD we close this tag save the changes and now we have this nice button that has good contrast with all the colors we have used up to this point now let's create a label control for the purpose of giving the user the option to recover their password if they've forgotten it we're not going to build this functionality as part of this video all we're going to do is create the control with a link appearance to do this we will create a label control with a margin of 0 comma 20 comma 0 comma minus 10 let's set its horizontal options equal to Center the text will be equal to forgot your password let's set a text color equal to blue the blue color will give it the appearance of a link lastly we'll also assign its text decorations property equal to underline to represent a link if we save the changes and go to the emulator we now have this label that simulates the appearance of attack or a URL to a different website let's create a final button after this label control next right button with a margin equal to 0a 30 comma 0a Z then assign a background color equal to FB F6 FD with a height request of 60 units let's assign the text create your account meaning it's going to be a secondary button with a text color equal to 4 F3 f9b if you close this tag you can see that we now have this button which has a secondary color that isn't intrusive the primary action is to click on the login button and the secondary action is to click on this button to create a user account done we now have the graphical interface the only thing left is to create the animation for the upper part to give us a more Dynamic interface to achieve this goal as part of the application's resources specifically in the folder called raw I will proceed to import a Json file it is this file called initial animation a. Json this is a ly animation how can we start or how can we run a ly animation as part of net Magi well as part of the project we will right click manage new get packages for this project in the browse section we will look for a package through SK sharp. extended. ui. Mai this will return this result that we can see on the screen we have to click on installed to carry out the installation of the package we accept the terms in case the package doesn't appear you have to click on this option to include pre-releases type packages this package will install all the necessary packages to be able to work correctly with ly or ly animations I'm going to close this tab to use an animation as part of the graphical interface as part of the name spaces I'm going to create a new namespace through xmlns colum call it for example skia which equals CLR hyphen namespace colum skarp we have this definition of this namespace skarp do extended. ui. controls semicolon assembly equal to SK sharp. extended. UI this is the name space that we need to use the control that will allow us to play a loty animation now that we are prepared to execute ly animations we will search as part of our code the specific location where we will position this control the location is inside this grid that has a few columns defined but only one column has content assigned below this image control I will try to use the SK ly view control which is the control for running ly animations firstly I will indicate that I want to position the control in column number number one I want a height request equal to 100 units and I will specify the repeat count property that helps to indicate how many times I want the animation to be executed if we put a value minus one this will indicate to the control that we want to execute this animation indefinitely therefore it's the value that I will use we also have to specify which is the file that we want to use or which is the animation which in my case is the file named initial animation. Json I'm going to close this tag I'm going to save the changes and before starting the execution of the application to see how this control looks there is a very important step and it's to go to magu program.cs after this line of use magu app we're going to add a new line equal to use skia sharp which in fact is available as part of intellisense we select this option we add the pair of parentheses this automatically adds all the available name spaces or the name spaces that we need which in this case is the one we see on screen once we have done this let's start the execution of the application again after a few seconds the application has been deployed and we can see that we are correctly displaying the L animation which looks quite good it gives a fresh air to the application A vibe that there is dynamism on this page and in conclusion the application of this page look quite good if you like the video I invite you to like the video I also invite you to subscribe to the channel and activate the notification Bell so you will be notified as soon as I upload a new video either about graphical interface challenges with the net Maui or other Technologies or about development with net in general see you in the next [Music] video

Channel: Devs School

Views: 4,646

Keywords: .net maui tutorial, .net maui ux, .net maui ui, .net maui ui challenge

Id: OpX_5dencqc

Length: 25min 23sec (1523 seconds)

Published: Mon Jan 22 2024