.NET MAUI UI Challenge # 6 - Fairy Tales App

hello I'm Hector Perez from Dev School welcome to this new video which is a graphical interface challenge to replicate a dribble design in.net Maui this time I found this design that looks quite spectacular by Tamara called tail reader it's a graphical interface to display some kind of Children's Story collection the screen simply looks amazing if you want to download the source code to follow this tutorial video you can do so at the link you'll find as part of the description I also invite you to leave a comment to let me know if you like this kind of graphical interface challenges with that said let's begin thank you we're going to start with the graphical interface challenge to do this we'll analyze the design unrival to replicate it the creator of this design provides us with a link to figma in the description where we can see the design in more detail we can learn about the colors used the font used and all the details about this application so I think it's a pretty good design to be replicated in.net Maui let's analyze the layout of the graphical interface we need to extract the information about how many sections we need to replicate it in.net Maui our first section would be this fairy tales title a second section would be the search bar you see on the screen ather section would be the set of gallery images another section would be this indicator review another section would be the recommended for you title and finally the last section would be this last Gallery you see at the bottom word recommendations of children's stories are displayed once we know this let's go to visual studio I've already created a blank project and I've removed all the pre-created code to have a blank project another thing I've done is set main page as the main page since we're only going to use one page as part of this demonstration similarly I have cleaned up all the source code the saml code and the code behind of this file now let's start writing code we will Begin by defining a grid with a background color equal to 0d 0 1 1 8 a color shown in the figma file we will create a set of rows indicating that we need five percent for the first row the second row will have 10 percent the stereo 45 percent the next row another five percent the following row another five percent and the last row will have 30 percent this is according to the measurements we have obtained from the figma file once this is done we will start writing the title using a label control we will indicate a font size equal to 16 horizontal options equal to Center text equal to fairy tales text color equal to White and vertical options equal to Center with these changes made we will start the application in the Android emulator after waiting a few seconds we see the application and can observe the label control at the top displaying the application title however the designs font family has a fun family called epilogue this is the font name we will import the necessary font or fonts to complete the graphical interface challenge in the folder called resources I will import the two necessary fonts into the fonts folder I'm going to import the payroll fonts that you can see on the screen epilogue medium and the fontello font which contains a set of icons to add to the application in the future once we have imported the fonts we need to register them in the Maui program I'm going to copy one of these lines and put the name of the font which is epilog medium and give it an alias epilogue we will also duplicate this line to register the phone telephone with an alias equal to icons once we have done this I will restart the emulator when we have started application again we will go to the file inside the Styles folder called styles.summel as we want to assign this font to all the label controls we will use throughout the application we will look for the style that affects all the label controls we will modify the font family property and indicate that we want to use the font called epilog this will automatically change the font applied to this label control as you have seen once we have modified or assigned the font family we will create the search bar element in the application we will first deal with these curved background part to do this we return to mainpage.xaml file we will create a grid that we will position in row number one we will give it a margin of 25 comma 10 comma 25 comma 10 to provide space between the elements within this grid we will create a round rectangle towards a curved shape at the ends we will indicate that we want to place this round rectangle in row number one we want a corner radius of 25 a field of 3 1 1 B 4 5 and a height request of 45 upon saving the changes we can see this background that looks quite similar to the file in figma in fact we realize that this grid dot row is not needed as part of this assignment once we have written the round rectangle we will create the search bar control on top of this background that we have created through the round rectangle we specify search bar as the control name and assign some properties such as the cancel button color property in white we will indicate that we want a placeholder that says search by name a placeholder color equal to ac9db9 at X color equal to White and its vertical options equal to Center upon saving the changes we can appreciate that we now have this nice search bar control as part of the application however there is an element that you surely already noticed that does not match the design as much it is this icon that you can see on the screen we will modify the code behind of this file to change that color on this occasion we will only make the Handler for Android but you can do it perfectly for any other platform I'm going to the code behind of this page mainpage.summel.cs and I'm going to create an invocation to a method called modify search bar as part of the Constructor we have to create this method as it doesn't currently exist as part of this method I'm going to copy and paste a section of code so I don't have to be great in this Handler or have any kind of error when coding it here we are doing some code to Simply change the color of the search icon with this change if we run the application again you can see that the color of the search icon has been modified satisfactorily OK with this we have concluded the search bar section that seems complicated but actually isn't that much we'll continue with the part that I think is the most complicated of the design which is this kind of slider with different recommended stories for whoever uses the app we're going to recreate this first part which is the rounded image for that we go back to the XML code and after the layout grid that is in row number one we're going to create the control we need but before that we need information or data to fill that carousel I'm going to stop the execution of the application I'm going to the solution Explorer and as part of the Explorer I'm going to add a new folder this folder is going to be called for example models as part of the folder I'm going to create a new class and this class is going to be called fairy tale I'm going to copy the pre-created model a class called fairy tale with four properties the first property is called name the second is called read time the third is called is saved and the fourth is called image we do not really need this third property if we wanted to implement some functionality to save a story we could use it but in our case I deleted it because it won't be used once we've done this we return to the code behind of our saml file remember that this could also be done perfectly from A View model I'm going to create a couple of collections through public observerly collection that have fairy tale as a generic the first one will be called fairy tales with its get and set so that we can invoke it from the xaml file I'm going to import the necessary namespace I'm going to create a copy of this collection I will call it fairy tales 2 solely for the purpose of being able to display the pair of collections in a different order now that I created this pair of collections I'm going to go to the Constructor I'm going to invoke a method called initialize tails that we haven't created yet and finally we're going to assign The Binding context to the value of this I let Visual Studio create this method called initialize tails and I'm going to copy and paste a section of code that I've previously created as well to skip the code writing process we'll initialize the fairy tales property with new instances of observerly Collections and generics we create a series of properties such as name reading time and the e-saved property which we will remove from here an image is also assigned to different image files that we have not yet imported now that we have created these two collections we can return to the example main page and create a carousel view element will indicate that it will be located in row number two and bind the carousel to the property called fairy tales which is the first list we close the carousel definition and as part of the carousel we will also create a data template so I'll indicate Carousel view dot item template and within it I specify a data template as part of the data template I'll create a grid layout to add different elements this grid will contain a set of rows through row definitions the first row will be 20 percent the second row will be 60 and the last row will be the remaining 20 with this we will Define each of the carousel elements let's start by defining the rounded image how can we do this on this occasion we will use a border control which we will position or indicate to have a row span equal to 3. why do I Define a row as the data template with three different rows well this will be the general data template indicating that in the first section we will place this type of marker the second section is to provide a space between the marker and the bottom part or the text of the bottom part that's why I Define a grid with three rows as part of the first row I will indicate the border that has those three available spaces or that occupies those three spaces we will indicate that we want a background color equal to three one one B four five a height request equal to 300 it is important to place a stroke equal to 6e557c a stroke shape that will help us give it that rounded border we will indicate round rectangle 30 comma 30 comma 30 comma 30 wanting each of the corners to be rounded with a value of 30 units a stroke thickness equal to two units and a width request equal to 300. we do this because you can see that the image has a border that is very slightly visible of a purple-like color this stroke will help us Define that part we save the changes to see how they look in the emulator we start the execution of the application done once duplication has been initialized we can now see this beautiful border we can see that the carousel contains each of these borders and it looks quite good here is where we will place the desired image as part of this border and content we will specify that we want an image control with an aspect equal to aspect field and a source equal to binding to the property called image for this to work correctly we must import the images since we are binding to the property called image as part of this folder called resources in the folder called images I will import the necessary set of images I have already imported them they are this set of images that you can see their preview when I hover the cursor over each of them with this import I have made I will restart the execution of the application to see how this change looks with this change introduced you can see that the image is displayed spectacularly being rounded and having this board that looks quite good as well the next step is to recreate this glow effect that appears around each of the images to do this we will use a shadow to highlight each of the carousel elements as part of the Border we will indicate that we want to access the property called Shadow to create a new Shadow with some properties such as the brush property equal to C2 83ft we will indicate that we want an opacity of 0.7 array used to know how much this Shadow extends equal to 100 units and an offset equal to 0.0 as we want this Shadow to start from the center of the same image I'm going to close the tag and save the changes look how we now have this nice glow on each of the images in a very simple way the next step is to place each of the text that are part of the description of the images to do this I go back to the XML file and after the border control that we see here I'm going to create a vertical stack layout that I'm going to position in row number two I close this tag and inside the vertical stack layout I'm going to indicate that I want a label control with a text equal to a binding to the property called read time we're going to apply a string format equal to single quotes with time column with Embraces we're going to play 0 which is the value of the binding column I put a percentage symbol and finally a lowercase M to change the format of the time span so that it only shows the minutes that are part of the time span and finally I conclude the string with the text means I close this definition with quotes and also indicate that I want a text color equal to White I'm going to save the changes and you can already see that we have here real time and the number of minutes in each of the stories next after this first label I'm going to create another label control with a font size equal to large indicating that the text will be equal to binding to the property called name which is the name of the story and a text color equal to White I close this tag save the changes and now we have here this pair of level controls that show us the description of each of the stories however we can see a problem each of the elements we want to add as part of this border will always be somewhat restricted by the size of the image plus the Border plus the shadow that you can see on the screen I think the ideal would be to work directly with the content of the border to be able to take as reference each of the edges of the border to handle the margin and have the elements inside in a very simple way to achieve this goal instead of having the Border directly assigned and image control I will indicate that I want a grid control and within the grid control the image control as we have modified or as what we want is to work directly within the Border I will remove the row definitions that are part of the data template container and I will paste this definition of the rows as part of this grid that we have previously created with this we would have to indicate that this image which is inside the grid that we have created has a grid dot rowspan equal to 3 so that it covers all the content directly let's save the changes to see that everything looks correct we see that the image still looks correct and now that we have this ready we can take the vertical stack layout cut it and paste it into this new grid that we have specified with this I will save the changes once more and now you can see the text within the Border in a very simple way we can directly modify the margin of the vertical stack layout and assign it a margin for example to an E comma 0 comma 0 comma zero by saving the changes we now have each of the titles here that look quite good having solved this issue the next step is to add the bookmark icon as part of the image to do this as part of this grid that we have defined after the vertical stack layout I will create a label control and assign it some properties such as the margin equal to 0 comma 20 comma 20 comma zero I will indicate that the font family will be equal to icons which was the font we previously registered with the icon set the font size will be equal to 25 the horizontal options will be equal to end and the text will be equal to Ampersand symbol hash symbol xf097 semicolon which is the code of the icon we want to use finally the text color will be equal to White by closing this tag and save with the changes you can now see this icon displayed as part of the image satisfactorily now let's go back to the figma file and see what else we can do as part of the design we can appreciate a small part of each of the previous and next elements how can we achieve this in.net Maui we can achieve it in a very simple way we have to go to the Carousel to the Carousel definition or Carousel View and we have a property called Peak area insets we can assign it a value for example 30. this property allows us to indicate that we want to see a small part of another of the elements and this area that we're going to visualize can be modified through this property or this value in this way if we go back to the emulator we can see that we can now view each of the previous and next elements or we can see a small part of each of these elements satisfactorily we will modify some additional options and we can do this through the items layout property before the item template or it could also be after we will indicate carouselview.items layout as part of the items layout definition we will indicate that we want a linear items layout specify a spacing of zero units a horizontal orientation and we have a couple of properties one called Snap points alignment this property allows us to establish the visible part of each of the carousel elements and snap points type which will allow us to specify the functionality or how or where the carousel will stop at each of the elements in our case we will indicate that we want to see each of the elements that are part of the carousel without the user being able to move very quickly to the next element this is what the mandatory single property is for we will implement the changes paste this functionality and it is this functionality that you can see on the screen that gives us a better view as part of the carousel another detail that we are seeing at the moment is that in some of the images especially the very light ones the text gets a bit lost if we look at the design in figma you can appreciate that the text looks quite good because there is a layer that is basically a somewhat dark gradient at the bottom that gets lighter towards the top we're going to simulate this redundant now we're using a round rectangle after the image control the ones you can see here will place that intermediate layer not to darken the text but only to darken the image we will create a round rectangle control and indicate that it will have a row span equal to 3 to use all the available space a corner reduce equal to 30 to have the same radius as the image we will also indicate the same size of the images through height request and grid request equal to 300 and an opacity equal to 0.7 as part of the round rectangle we will create a gradient through round rectangle dot fill we will create a linear gradient brush with an endpoint equal to 0.1 to have the gradient from top to bottom finally we will create a first grading stop with an offset equal to zero and a color equal to transparent since we want the top part to be transparent so as not to darken the image in any specific color at the top to have a darker color at the bottom we will create another gradient stop with an offset equal to 1 and a somewhat dark color through the color zero three zero zero zero five which is a black like color let's save the changes and observe the gradient in emulator it is necessary to restart the application to display it correctly now the text looks better thanks to the gradient applied from the bottom to the top the issues with the light text have been resolved we have finished creating the carousel view control the only thing left is to add a control that lets us know which element we are on we will use an indicator review control for this let's go back to the XML file collapse the Carousel and create an indicator view control let's assign a name to the indicator view position it in row number three with horizontal options equal to Center and an indicator color equal to 616161 an indicator size equal to 8 a selected indicator color equal to White vertical options equal to Center the indicator view offers various customizations options we must also assign which indicator we want to work together with the carousel we will indicate that the carousel view in its indicator View Property will be equal to the indicator View this is the name we gave to the indicator view we created earlier let's recompile the application to apply these changes and see how the design looks you can see that the view indicator does not appear as I have made a mistake here and I needed an a after correcting this I will restart the execution of the application now we have the view indicator at the bottom that shows us which element we are currently on with this we have finished this section of the Carousel and the indicator section the next step is to create this recommendation section for the stories to do this I will create a label control after the indicator control I write a label control which we will position in row number four we will assign it a margin equal to 25 comma 10. a font size equal to 16 a text that is equal to recommended for you a text color equal to White and its vertical options equal to Center with what we have done we save the changes return to the emulator and we can now see this header that says recommended for you the next step is to create the second Gallery with recommendations for users after the label control that we have created we will create a collection view control that we will position in row number five and item Source equal to a binding to the property fairy tales 2. now we can have full control over the spacing in each of the elements let's create a linear items layout with an item spacing of 25 and horizontal orientation let's close this tag and then Define the data template through collection view dot item template we will create a grid layout with a height request of 200 units and a width request of 200 units as well within the grid to replicate these images with rounded Corners we will create a border control with a height request of 200 units horizontal options equal to Center stroke equal to 6 e 557c and a stroke shape equal to round rectangle we will indicate that we want a corner radius of 20 units for each of the corners a stroke thickness of 2 and a width request of 200 units this is done because each of the elements also has a border with a slight purple color for the Border we will create a new image control with an aspect equal to aspect field and a source equal to binding to the image property I save the changes and now you can see this Gallery with each of the images we have created correctly all right we have the main part of the application the only thing left would be this menu at the bottom how can we create it after the collection view I'm going to create a grid that I will position in the last row that is grid dot row equal five I'm going to assign it a margin of 15 comma 0 comma 15 comma 0. a height request of 75 and those vertical options equal to end this is because I want to place a new grid that is positioned right in front of this last gallery of the collection View within the grid I want to create a border control to which I will assign a background color equal to three one one B four five a stroke equal to 6e557c a stroke shape equal to round rectangle with a corner reduce equal to 30 units for each side and a stroke thickness equal to 2 units if I save the changes at this moment you can already see this menu section at the bottom with the features we have assigned we will divide each of the spaces with the grid with each of the rows and columns to position mode the text and each of the icons inside the border control we're going to create a new grid with four columns each of them measuring the same space we will also Define a set of rows two rows and a row spacing of three units to slightly distance the size of the rows or to specify this amount in the separation of each of the rows what we're going to do within the grid control is simply create a set of label controls the first label will be positioned in row number one it will have a font size of 10 units horizontal options equal to center with a text that says hum and a text equal to White I close this label save the changes and you can now see in the emulator this table that refers to the main page and we have placed it in white since it will show the user the current page they are on I'm going to copy the label Control Paste it three times and this is because I want to modify the grid dot column property I'm going to place the next label in column number one and change the text instead of saying come it will say search I will do the same with the following elements that is I will copy this grid dot column property paste it change the value to a value of 2 and the name or text will be equal to library I do this once more changing the value to value of 3 for the column and the text to be equal to profile save the changes to see that everything is fine and we can now see that each of the text is already in the corresponding location in this section I will create each of the icons to do this I will copy the last control label paste it and remove the grid dot row property as the element will be located in row number zero I will modify the grid dot column property since it's the first element there is no need to specify it I will indicate that the font family will be equal to icons modify the font size to a value of 20 and change the text to an ampersand symbol hashtag symbol x e eight zero D which is the identifier of the icon I want to use the text color will be white and the vertical options will be set to end I will save the changes to make sure everything looks correct and now we can see the icon successfully I will copy this control and modify the grid dot column property to place the next element in column number one I will change the text to e800 after saving these changes we can see the second icon correctly once again I will copy and paste the control label place it in column number two and change the text to e823 I will save the changes and now we can see the next icon correctly one more time I will duplicate the control label change the column to column number three and set the value to e801 I save the changes and that's it now we can see our finished menu the last thing we have to do is change this color so that we have a different color for the selected page as part of the color the color will be equal to AC 9 DB9 I'm going to copy the text color property paste it to the previous element and also the one before that save the changes and now we can see that the color of the icons is different I'm going to do the same for the label controls that display the text of the section name I'm going to modify the text color of the second label control as well as the third and fourth controls I save the changes and that's it we have now completed the graphical interface design in figma if we compare the design you can see that it has turned out quite well quite similar to what the figma design has shown us with this we have concluded this design I hope you liked it remember to leave me a comment if you like this type of challenge or what kind of challenges you would like to see and what else you would like to learn about.net Maui I also invite you to subscribe to the channel like this video and click on the Bell so that you receive notifications as soon as I release new graphical interface Challenge videos about Donald net in general see you in the next video [Music] thank you [Music]

Channel: Devs School

Views: 8,653

Keywords: .net maui apps, .net maui samples, .net maui tutorial, .net maui xaml, .net maui ui, .net maui challenge

Id: McNQNmPDdu8

Length: 35min 10sec (2110 seconds)

Published: Tue Jun 13 2023