.NET MAUI UI Challenge # 7 - Coffe Shop App

hello how are you I'm Hector Perez from Dev School welcome to this new video which is a graphical interface challenge for Donald Maui this time we're going to replicate one of the screens from the design created by region Barman we're going to recreate this Central screen I like it a lot because it has a very attractive design I really like the color combination creating these Central section and selecting one of the coffee cup sizes is a challenge I think before we continue I'd like to point out that this interface challenge is due to the donden Maui UI July 2023 schedule organized by Matt Goldman if you want to learn more about London Maui or visit other past related to this schedule you can go to the URL shown on the screen where you can visit other past that have emerged thanks to this initiative with that said let's get started we'll begin this Challenge and for that I have created a project in visual studio called coffee app demo which we will use to create this project that we have seen in the dribble design the first thing I did was to remove all the pre-created code that is I removed all the xaml code and the c-sharp code from the code behind and I also set this page called main page as the initial page Once drooped on This the next step is to define the color palette we will use throughout the application we'll do this by going to the folder called resources here we have the Styles folder and finally a file called colors.zamil we'll go to the bottom and after the last color tag I'm going to copy and paste a set of tags of the same color type that Define a set of colors like dark gray light gray brown orange and BG gray which will be used for the background once we've accomplished that I'll navigate to the main page.xaml file where we'll construct the graphical interface within the content page we'll alter the background color using background color specifying static resource BG gray which is the color we defined earlier we'll be previewing the modifications and for this purpose I launched the emulator installed on my computer with this we can observe a different color for the applications background after changing the background color the next step is to construct a grid style layout we're going to set a margin equal to 15 units I'm doing this because referring back to the design interval you can observe that within the app's interior section we have a border that distinguishes it from the exterior part it's not very discernible here because I've already established some colors to better illustrate the distribution of each row in this grid essentially these 15 units represent this space between the edge of the application and the central container the following step is to identify the sections of the application and for this occasion I've chosen to create four rows for this grid we're constructing the first row will extend from the top section to the beginning of the central section a second row that extends from the start of this central part to exactly the middle the three row that extends from the middle of this Central container to the end of the central container and a final Row for the remaining content towards the bottom we're doing this because I want to precisely identify the center of the application so that I can distribute all the content upwards and downwards and we can manipulate it in a more efficient way there are other tutorials where this is achieved by only creating three rows and using a negative margin to push the content upwards this time I've chosen to do it this way as I find it is slightly easier to create this design so this is the structure we will use to create this grid we're going to specify that we want a row definition equal to 0.4 star 0.1 star 0.1 star and 0.4 star these are the various rows that our application will have the next step is to create a border this border will serve as the container for the image that you see at the top going back to the XML file we're going to specify that we want a border and we're going to indicate that we want a rows band equal to 2 because as you can see this image actually ends in the middle of the content of this Central layout therefore we specify that we want this border to span two rows we close attack inside we specify border.stroke shape to indicate that we want a round rectangle since the image has a border that contains it this round rectangle will help us Define that border and include the image as content we're going to assign a corner reduce equal to 20 comma 20 comma 20 comma 20. we close the tag as part of the content of this border we're going to create a new grid we're going to define a set of rows equal to 0.3 star and 0.7 star we're doing this because the container itself needs space for these icons both the heart and the back arrow so the row we're defining will use 30 of the space for these icons and the remaining 70 percent of the space will be left open and content free this is within the grid we will then place the image we need for that we need to stop the application because we need to import the image of the coffee cup from the images folder which is what I'm going to do next I've imported the image which is named gap.jpg after importing this image I'm going to create a new image tag which I will specify to span two rows this is because I want the image to start from the top and end at the limit of the container I will also change the aspect property to aspect fill and similarly change the source property to assign the image named cup.jpg once this is done I'm going to restart the application to see how it appears in the emulator perfect after a few seconds we can see the image at the top filling all the corresponding space it looks great the next step is to create this pair of icons that we see at the top for which we need to import a phone file that I have previously prepared from the fontello site that's what I'm going to do next done it's this file named fontello.etf which we're going to register so we can use a more descriptive alias we're going to the Maui program.cs file where we have these two lines that Define the fonts we're currently using I'm going to duplicate one of the lines and change the font name to fontello.ttf which is the name of the font as analias I'm going to name it icons with a capital i I save all the changes close the file and I'm going to restart the application to see the changes as we make them we have here again the design we previously created let's go back to the XML file and after this image stack I'm going to create a new grid I will indicate that I want a pair of columns which will each have the same space this is because you can see in the design that we have this pair of icons so we can create a division of columns and place the first icon at the beginning of the column and the second icon at the end of this column within this grid that we have previously defined I'm going to proceed to create a new border through border with a margin equal to 15 comma 35 comma 0 comma 0 and also a background color equal to static resource let's use the dark gray color that we previously defined a height request equal to 50 units its horizontal options equal to start and in the same way its vertical options equal to start let's also modify the with request so that it has a value of 50 units with this if we save the changes and go back to the emulator we can already see at the top this square that is indicating to us that we can place content but we don't actually want a square we want a square with rounded edges for this we're going to indicate that we want a border dot stroke shape inside around rectangle with its Corner radius equal to 10 comma 10 comma 10 comma 10. we close this stack with this we have already modified how this container for the icon looks next we're going to add the icon itself we'll accomplish this through a label setting its font family to icons which is the font we imported earlier a font size of 25 units also setting its horizontal options to Center a text that equals to Ampersand symbol hash symbol uppercase X 801 and semicolon and also a text color equal to static resource equal to light gray to create a contrast between the background and the icon color lastly its vertical option set to Center we close this stack save the changes and you can see that at the top we have this icon with the properties we previously assigned to avoid rewriting all the code I'm going to duplicate the entire border tag I'm going to paste it we're going to make a few adjustments like we're going to move this border to column number one with this we can see this icon that has been duplicated let's modify some other properties such as for example the left margin being set to zero as we don't want this icon to be on the far left but we want it to be displayed at the end of this column we'll keep the second value of this margin the same and modify the third value so that it equals 15. the last value remains at zero we're also going to adjust its horizontal options so that instead of the start it's set to end if we preview the changes we can already see this icon on the right we're also going to alter the text to display the icon that we need which is the e800 icon with this modification we've made we now have the pair of icons at the top that closely resemble the design on dribble we saw earlier once we've done this we'll proceed with the creation of the central part of the application to do this we'll navigate to the section before completing the content page we have agreed we're going to write the code prior to this closing tag of this grid what are we going to do first we'll create a border to be able to create this rounded section that we can see on the screen let's then specify border we're going to specify that we want the Border in row number one we want it to have a row span equal to 2 a stroke equal to static resource dark gray we close the tag and to achieve this rounded border we're going to specify border.stroke shape we're going to create a round rectangle Corner reduce equal to 30 comma 30 comma 30 comma 30. we close this stack we're going to save the changes we can already see this section in the center that is replicating the design honorable to replicate the design we have on dribble we're going to create a grid to be able to divide the content into sections and be able to place each of the pieces in their appropriate place so as part of the content of this border I'm going to create a new grid with a padding equal to 20 a background color equal to static resource equal to dark gray a column definitions equal to 0.5 star 0.25 star 0.25 star a row definitions equal to star star star why am I creating this set of rows well I'm considering that we're going to have three rows for each of the text sections that we can see on the screen I'm also considering three columns the First Column to Define this part of the text a second column to dictate where on when this button which we can see on the screen will start and a third column two pinpoint where this currency value which we can also see on the screen will start therefore this is the definition of the columns and rows within this grid next we will cut the application this is because I want to import the fonts that we will be using for the project I will then proceed to import the payroll fonts well I have now imported the fonts which are despair Rubik light and Rubik regular these fonts are free so you can find them by doing a simple search on the internet once we have done this we return to Maui program.cs we're going to duplicate some of the lines of the fonts a couple of times this is because we want to create a reference an alias for each font this will be done through Rubik regular which is the name of the first font and we will set Rubik regular as the alias we will also assign rubic light for the second font and set rubic light as the Alias once we have done this we will restart the application to see the changes as we Implement them after we have started the application we will inspect the grid that we previously created within it let's start by writing a label element we will specify that we want it to span two columns its font attributes will be set to bold to intensify the font color we will also set the font family to Rubik regular which is the font we imported earlier with a font size of 20 units and a text that reads Express soccer pushino finally a text color set to White we close this tag save the changes and now we can view this stack which appears quite good let's create a second label control this time we're going to specify that it will be located in column number two font attributes again bold font family set to Rubik regular gain font size set to 20 units horizontal text alignment set to Center we're also going to assign a text that is set to 50 and a text color set to static resource set to Brown we save the changes we need to close this stack save the changes and now we can view the second label we're going to create a third label with a grid dot row set one grid dot column span set to 2 font family set to rubic light this time font size set to 15 units we're also going to specify a text that is set to the Cav bike and a text color set to White I'm going to close this stack again we review the changes and now we have this text that we see here on the screen next we're going to create this last line that you can see on the screen for this we will use a horizontal stack layout to Nest these three visual elements and we're going to place the button in the corresponding section of the grid then we return to the xaml file and after the last label we're going to create a horizontal stack layout we'll position it in row number two and we're going to indicate a space of 10 units to allow some space between each of these elements I'm going to close this stack and within it I'll create a control label with a font family set to icons a font size of 20 units horizontal options set to Center and a text set to the Ampersand symbol hashtag symbol xe802 which is the symbol for the star icon we will also use a text color set to static resource set to Orange and vertical option set to Center I'm going to close this stack view the changes and now we have this star icon that you can see on the screen we're going to create the following text Parts through a control label font attributes set to Vault font family set to Rubik regular font size set to 15 units and a text set to 4.5 text color set to White and vertical option set to Center let's save the changes and we now have this text that looks quite good we could be creating all of this in a resource dictionary but so you can see specifically the properties that affect each of the controls I'm doing it this way we will create a final label control with a font family set to Rubik regular a font size of 15 units and a text set to 4.4461 I close the parenthesis a text color set to static resource light gray and its vertical options set to Center if I close this element we now have the specified text here finally after this horizontal stack layout we're going to create a button that is located in row number two in column number one and that has a column span set to a background color set to static resource Brown also a font family set to ruik regular and a text set to what to cart we close this stack with this we have completed creating the central part adding this button which looks quite good let's proceed with completing the application that is we're going to create this final section that you can see in purple for this we're going to create a new grid we're going to do this before this closing of the final Grid or the grid containing all the content here we're going to create a new grid we're going to position the Grid in row number three we're going to create a set of row definitions the first one is 0.4 star the second point four star and the third point two star this is to divide the section of the first text section this second section of the coffee cup size selection and a final space for this button to make the purchase within this grid we're going to create a vertical stack layout with a margin set to 0 comma 20 comma zero comma zero and a spacing between the elements of 20 units inside the vertical stack layout I'm going to create a label element with the font family set to Rubik regular this is for the text of the description I'm also going to indicate that I want a font size set to 16 units a text set to description a text color set to d9dada I close this stack if I save the changes in the emulator we can already see this description tag next we're going to create the second section of the text which is the description itself for this we create another label control with a font size set to 14 units a line height set to 1.3 to have this separation between each of the lines I close this element and the point here is that I want to define a series of texts you can observe that the text description is truncated and we see a second text section in a different color to achieve this effect I'm going to divide the control label into multiple lines using formatted strings then within the control label I specify that I want to access the label that formatted text property following this I create a formatted string and expand with a font family set to rubic light with a text that matches the portion of the text I previously created so you don't have to watch me write all this text after the text I will specify that I want a text color that matches the static resource light gray I close this definition save the changes we have these properties applied we go back to the emulator and you can see that we now have the description as it is as part of the application it's necessary to specify the second section of the text in a different color to do this I'm going to create another span section within the formatted string which will also have a font family set to rubic light a text that reads read more and Apex color set to static resource Brown which is the color which previously defined we save the changes and now we have this lovely text section that closely resembles the design honorable which is this section here okay now that we've completed this description section let's move on to the part where we select the size of the coffee cup we will perform this after the closing tag of the vertical stack layout here I specify that I want a new vertical stack layout I'm going to assign some properties to the vertical stack layout for example I want to place it in row number one I want a margin equal to 0 comma 20 comma 0 comma zero also a spacing of 10 units and within the vertical stack layout I'm going to create a label control for the size part so I indicate that I want a text equal to size I want a text color equal to White I close the tag save the changes and we already have this size part for selecting the coffee cup next comes a somewhat complicated part and it is this section to select the coffee size fortunately I found a site or a publication on the Internet by David ortino this publication that you can see on the screen which shows how to create a control called segmented control in.net Maui and even though he creates a design which you can see on the screen for a demonstrative application we're going to adapt the same code so that this essentially reflects the design on dribble we're going to adapt this code that you can see on the screen to create the dribble design so thanks David ortino for this publication that has helped me to create the design in.net Maui so let's start with the creation of the segmented control we're going to do this within the vertical stack layout tag after the label control that we created earlier here we're going to create a layout of the horizontal stack layout type we're going to indicate a property called radio button group equal to group name equal to menu categories this is because we're going to have within this control or within this stack layout really a set of radio button controls so for us to be able to select one at a time we need to assign this property next we'll specify a space of 10 units and set vertical options to Center to assign each of the values small medium or large will access the property called item source and Define it through xri of the X-Type X string we're doing this to define a set of strings through X string within the tax we Define each of the values I'll duplicate this line to assign the additional values I need namely medium and large this will allow us to preview this data to be able to work with them this would be useful to add more elements if we needed them next we'll Define the appearance of each of the elements that are part of the horizontal stack layout because currently we don't have any element at the jet as part of the graphical interface as we haven't indicated how they're going to look in the application so we need to access a property called bindable layout dot item template inside we'll create a data template where we'll indicate that each of the elements specified as part of the item Source will be a ready button will indicate that the content will be equal to a binding to the current element through binding and a DOT we close this stack save the changes and now you can see a set of radio button controls on the graphical interface which represent each of the item Source values this design isn't what we are interested in we want to customize this design model we can achieve these through a property called control template from the ready button control so I'll indicate that for each ready button we want to assign the control template property to redesign the control we'll access the control template to specify the ready buttons appearance we're going to create a grid within the grid we'll specify that we want a border we need to assign a name let's call it for example container let's specify that the stroke will be equal to the static resource BG gray because when each element is selected the background color will match the applications background color but we'll modify this a bit more later let's specify a width request equal to 100 units we close this element to give it a rounded format we'll use a stroke shape again that is we access the Border we have to do this within the border control here we access the Border dot stroke shape inside we'll create a round rectangle with a corner reduce of 10 comma 10 comma 10 comma 10. we close this stack and as part of the Border content we'll specify that will display the text as part of the item Source through a label to which we'll assign a name equal to text label with its horizontal options equal to center a text equal to template binding which is the content what this will allow us to do is to access the text that is currently part of the radio button we will also adjust its vertical options to a center value let's save the changes if we go back to the emulator in this instance I had to rerun it for the changes to be visible in the emulator and with this you can see that we have this format for each of the radio buttons at percent this is not the behavior we desire we want to display a different design for a selected element and another design for an unselected element to create this effect we will utilize a visual State manager to achieve this we will proceed to the Border closure here we will access the visual State manager visual State groups property inside we will access the visual State group list here visual State Group which we will assign a name equal to checked States within this visual Estate Group we will Define a visual state which we will name checks this is so that we can identify when one of the elements of this group of ready buttons is selected next we will access the property called Setters which will allow us to assign a value to each of the properties we need when an element is selected the first Setter we will Define will have a Target name equal to text label as this is the control we want to modify this the text label here we will specify that we want the label dot text color property with a value equal to static resource Brown which is one of the colors we have previously defined I will copy this Setter paste it and alter the target name as we wish to reference a different control this time we will change the properties of the layout named container which is in fact this border we will adjust some of its properties when the element is selected we will change the property named background color and assign the color static resource BG Gray I will duplicate this line once more this is because I want to change another property of this border this time the property I want to change is the stroke with a value equal to Brown here I added an extra r okay with this I will save the changes I will go back to the emulator and I want you to see what happens when I select one of the elements observe that this time when I selected each of the elements their design changed as I was selecting them this time the properties specified earlier in the XML code were applied that is a brown color and a background color equal to the apps background color which is this darker gray and the properties have remained selected because I have not specified a different state for when a control is deselected that's what we need to do next to accomplish this I will duplicate this visual State I will change the X name so that instead of checked it's unchecked I will also change some of the states the properties will be exactly the same only the colors will change for example for the text color of the label I will specify that I want a light gray color for the borders background color I want to use dark gray and the stroke will also be dark gray I will save the changes return to the emulator and observe how the color automatically changes to a disabled State as soon as one of the elements is deselected this is how we've accomplished this attractive selection effect for each of the elements the final step is to create this button at the bottom this is the simplest part we need to go to the end of the vertical stack layout before these closing grid tags inside I will specify that I want a button with a grid dot row equal to 2. background color equal to a static resource of brown a font family of Rubik regular and text that says buy now I will close the stack save the changes and we now have this button at the end of the application with this we have completed the graphical interface Challenge from the original dribble file the design turned out quite similar and I am pleased with the final result if you also like the design result in.net Maui I invite you to leave a comment also subscribe to the channel like this video and activate the notification Bell so you'll be informed as soon as I post new content related to the word of dotnet and general development see you in the next video [Music] foreign [Music]

Channel: Devs School

Views: 6,740

Keywords: .net maui ui challenge, .net maui coffe shop app

Id: soz4o0zKars

Length: 34min 9sec (2049 seconds)

Published: Mon Jul 24 2023