From Dribble to .NET MAUI - XAML App DALL-E Challenge

hello I hope you are doing well welcome to Dev School Channel today we're going to take a dribble design and design the screen in abundant Maui application specifically we're going to create the XML code of the application as best as possible it is an artificial intelligence image generator application that looks pretty good in the dribble design in this video we will focus only on the first screen later in another video we will create the rest of the screen so that we have all the interfaces and even at some point maybe the implementation with some API such as daily to generate images with artificial intelligence the dominant mobile application looks like this we have a collection of the possible friends that we could have as part of the graphical interface we have also implemented or used a nuget package that allows me to have this nice design on the cards that looks pretty good finally we have the button to create a new image this is what the graphical interface will look like once we finish designing it or creating the xaml code I'm going to open Visual Studio I have already previously created a new project from scratch it's completely called from scratch I haven't modified anything and we're going to create all the necessary code to be able to replicate this graphical interface the first thing we're going to do as part of the project which I have called dalui app is to create a new folder called views this is because in the folder we want to keep all the screens of the application the graphical interface screens within this views folder I'm going to create a new item specifically a Content page for which we select the donut movie category select a Content page of the example type and we're going to change its name for example to dashboard View once we have created our screen what we're going to do is modify the background color of the application we're going to use a color that I have previously selected which is this one that you can see which is 10 12 16. it is worth noting that as part of this application I'm not going to use resource dictionaries so that you can see what the different properties are that we're going to apply to each of the controls although it card definitely be done to keep the Styles in a single file for the moment we're going to do it this way once we have done this to see the changes I will open the app.saml.cs file and instead of initializing the app shell I will indicate that I want to create a new instance of the dashboard View the necessary namespace is automatically imported and I will start deploying the application on my emulator to see how the application looks then I start running the application and give it a few seconds while the deployment of this application takes place after waiting a few minutes or seconds we can see that we now have the graphical interface of the application here we have this dark background that we have applied from the xaml file The Next Step we're going to take is that we have to divide the screen of the graphical interface into different sections for this we're going to use a grid I have previously calculated the values of each of the sections that we can see as part of the graphical interface for the text for this collection for this control for the button Etc then I'm going to define a new grid as part of the graphical interface for this I removed the default vertical stack layout and in its place we're going to create a grid with a margin of 25 comma 25 comma 0 comma zero remember that in the name this number 25 indicates the margin to the left the top margin the margin to the right and the margin downwards later on I'm going to define the row definitions property and this is where I start dividing the grid into different sections I'm going to indicate that I want 10 percent for the first section 20 for the second section 15 for the third 45 percent and finally the value of dot one star I really like to handle this type of nomenclature because it allows me to calculate the total height of the graphical interface as such and thus I can delimit a percentage type for each of the sections so each of these values represents a percentage for example 0.1 represents ten percent 0.2 represents 20 percent what you should notice is that the total sum is equal to one so that you have control over each of the sizes of the sections next I'm going to create the first grid that will serve me to Define this upper part of the hamburger menu and the profile image so for this I'm going to indicate that I want a second grid with a margin of 0 comma zero comma 25 to assign a margin to the right and finally as zero and as part of this grid I'm going to define a couple of columns that have the same space the first step we're going to take as part of this grid is to Define this hamburger icon which can be clicked to display some additional options in our case we are only going to draw the hamburger menu icon how can we do this well there are different ways we could import an image use a font but this time what we're going to do is to use some standard elements of London Maui to avoid using so many images so I'm going to create a vertical stack layout with its vertical options set to Center to Center the content and inside the vertical stack layout I'm going to Nest or rather position one element after the other each of these lines to do this I'm going to define a first rectangle with a fill to fill the first line equal to cacdd3 I'm also going to indicate that I want a height request equal to 2. it has to be a very small size because it is the size of these images or lines that we see here I'm also going to indicate horizontal options equal to start and with request equal to 25 to define a width of the first line I'm going to go to the emulator and you can already see this first line that we have as part of the graphical interface let's define the second rectangle so I'm going to copy this first rectangle I'm going to leave the same fill color I'm only going to change the height request that will remain equal to 2 horizontal options equal to start the width request will be equal to 35 and I'm also going to add a margin equal to 0 comma 5 comma 0 comma zero with these values we can already see that we have the hamburger icon in a correct way and without the need to be using so many images next we're going to create the profile image part for which I'm going to use a border control so after the vertical stack layout which I'm going to compress I'm going to indicate that they want a border I want to position the Border in column number one I'm also going to indicate that I want a height request equal to 75 horizontal options equal to end two positioned element at the end I'm also going to indicate that I want a stroke shape equal to round rectangle since I want to define a specific rounded rectangle that is circular for which I'm going to indicate 80 comma 80 comma 80 comma 80 and a with request equal to 75. inside the Border we have to specify which element we want to Nest inside the Border in my case it will be an image element with an aspect equal to aspect field a height request equal to 100 horizontal options equal to Center for the source we're going to indicate that we want an image source called profile square.jpg that we have not yet added and a grid request equal to 100. I'm going to close the element stop the application execution as I'm going to import the images as part of this resource folder specifically about the images folder then I'm going to import the images okay I have imported all the images with this I'm going to start the application execution again to see how this section we have added which is the profile image of one of the people foreign after a few minutes we can see that we already have the hamburger menu icon and the profile image The Next Step according to the image we have chosen is to create the titles for this screen of the application to do this I will go back to the xaml code and compress the grid that already contains the information we need next I will add a vertical stack layout in row number one and set its vertical options equal to Center inside the vertical stack layout I will place a couple of label Elements which are a couple of text I will set the label font size equal to 30 for example and a text equal to create incredible universes and a text color equal to White let's see how the change looks in the application we already have the emulator here and we already have the application Title Here I will copy the label element because I want to modify some properties for example I will add a margin 0 comma 10 comma 0 comma zero the font size will no longer be 30 it will read 20 and a text it will be equal to join your friends and a text color that will be equal to AC B1 BB I save the changes and go back to the emulator we already had the second text that looks quite good the only problem is that the font being used as part of the graphical interface correspond to the default typography of a.net Maui application even as part of the document we can see which typography is being used the problem is that this typography is a paid typography therefore I had to look for a free option which I'm going to show you next to do this I stop the application execution and import the fonts as part of this folder called funds I import the Nexa heavy and Nexa extra light fonts to use these fonts or to give them an alias I'm going to go to the Maguey program.cs here I can copy one of these lines a couple more times I'll write the name of the font which is Nexa extra light dot DTF we'll call it Nexa Lite I'll also copy the name again and change extra light to heavy and the name will be the same as Nexa heavy I save the changes go back to the XML file and assign a font family equal to Nexa heavy for the first label element I'll do the same for the second level control I start running the application with the changes made the text now looks as follows we can see a noticeable and much better change in the font applied to the application once this second section is finished we move on to the collection of friends that you could have as part of the application it shows who the person is who is a friend and how many images they have generated or have in their gallery of images generated by artificial intelligence to implement this we collapse the vertical stack layout and create a collection view for this list of friends we indicate that this collection view will be in row number two that it will have an item Source called profiles and its vertical options are equal to centered to do this we create a new folder called models inside the project and we did in a new class called profile that contains the profile image the friend's name and the number of photos that they have generated we also create another class called generated image which we will use later this class contains an image path the keyword for the image and the set of keywords for one of the images first we have the image the main keyword and the list of keywords that make up this image once we have these two classes we proceed to the code behind of dashboard view.saml as part of this class we defined a pair of properties that will be bound to the graphical interface a pair of observerly collections the first having a generic profile and the second of generated image each with a descriptive name for the bind from the xaml code as part of the Constructor we invoke a method called load data that we have not yet created and also indicate a binding context equal to this since in the same class we have these two properties that we want to bind we will create this method called load data which is already prepared to initialize the list of profiles and the list of generated images with fictitious information since we have completed the code behind we return to dashboard view.saml where we need to modify the collection view as we have a horizontal list instead of a vertical one to change this orientation we use collection view dot items layout and a linear items layout with an item spacing equal to 10 and an orientation equal to horizontal next we Define the data template or the item template to specify how the elements in this collection will be displayed indicating collection view dot item template within data template as part of this data template we create a grid element a set of columns that use 35 percent and 65 percent of the space and Define a height request equal to 60 and a with request equal to 160 for each element within the grid we Define the background of each of the spaces for the friends information using a round rectangle that fills the entire space all available rows and a corner radius equal to 45 to give it that rounded look finally we indicate fill equal to 1 f 2 5 2 a and close the definition of the round rectangle once we have done this we start running the application to see how this information that we are filling or this graphical interface definition is being displayed firstly we have created the necessary space for the information of each of the applications friends which looks quite interesting now we're going to fill in the information for the profile image of the friends to do this after the round rectangle we will use a border element with a rows band equal to 2 and a margin equal to 5 comma 0 comma 0 comma zero additionally we will indicate a height request equal to 50. horizontal options equal to start and a stroke shape equal to round rectangle 80 comma 80 comma 80 comma 80. within this border we will use an image control with a height request equal to 50 units and a source equal to binding to a property called profile image with this we already have the images loaded for each of the friends now it's time to define the text for each of the sections to do this outside the border control we will indicate that we want a vertical stack layout with a grid dot column equal to one vertical options equal to Center and as part of this vertical stack layout which will contain each of the friends information data we will use a label control with a margin equal to 10 comma 0 comma zero comma zero the font family will be equal to Nexa heavy with the horizontal text alignment equal to start a text bound to the property called name a text color equal to White and a vertical text alignment equal to center with this we cannot really see the name of each of the friends next we're going to define a label control to display how many images each frame has generated in this case we will use a grid with one column a margin of 10 comma 0 comma zero comma zero and a fun family of Nexa heavy again the font size will read 12 and the text will be equal to The Binding no photos which is the property we want to find to in addition we will let a string format to give a certain format to the displayed text showing the number of images and adding the word pictures at the end we will also indicate a text color of 869cbd and vertical options of start with this we can see how many images each frame has generated the next step is to replicate the set of images that have the appearance of a collection or image gallery format to do this we will use a control that I found while browsing through the nougat packages and that I found very interesting as it allows creating different effects to display that type of cards therefore I will proceed to manage the nougat packages and in the browse section I will look for a package called cardsview.maui by Andrei missio kevish I will select the projects and click on install which will start the installation process of this nougat package once the package has been installed I proceed to close this tab and Define a namespace to be able to use it I indicate xmlns colon carts equal to CLR namespace colon pan card view I use the pan card view assembly and defined another namespace for the set of processors necessary to apply certain effects I call this namespace proc equal to CLR namespace colon and card view I am specifically interested in the namespace of the processors which is in pan card View dot processors with this I have the two namespaces necessary to create the graphical interface I go to the Maui program.cs file to add use cards view as part of the Builder I import the required namespace which is pan card View and with this I am ready to start using this control I go back to the dashboard view.saml and compress The Collection view that I defined earlier I use the control called cards cover flow View and specify some properties such as the location in row number three a margin of 25 0 25 0 and an item source which in my case is the collection I defined earlier generated images I also defined some additional properties such as position shift value which allows me to place space between the different cards I take advantage of this to add the processor through X column arguments I specify through proc which was the namespace we defined earlier color flow processor this is to create or add an opacity factor to give transparency to the cards in the back I indicate that I want a 0.25 opacity for the cards and also want a scale factor which is to make the cards smaller in this case I want each of the cards we see in the back to be 25 percent smaller with that process already I can now Define the item template how each of the cards will look inside this cover flow View I Define cards colon cover flow view dot item template and since I have this I defined a data template basically it is a definition as if we were defining an item template of a collection view in my case I defined a border element with a stroke shape equal to round rectangle 25 comma 25 comma 25 comma 25 as stroke thickness equal to zero inside the Border I Define a grid element with row definitions equal to 0.7 star which is a 70 percent and at 30 percent the grid element will contain the image and the level with the friend's name as part of this grid I Define an image element with a grid dot rowspan equal to two so that it uses all the available space and an aspect equal to aspect field the source of information will be a binding to image path which is the image generated by artificial intelligence with the initial configuration of the list control I start the application to see if everything works correctly done with this we can see the cards displayed as part of this control it looks pretty good we can scroll each of the cards and see the image as part of them unfolding in a way that looks quite good you can play with these processors property if you want to achieve some different effect we can also play with the value of position shift in my case what I did was add a value of -25 as part of the margin if we leave this value as 0 the image appears in the center but we can't see an image to the left and an image to the right so what I did was remove that margin that we specified initially as part of the application or layout with this we cast the image on the left not to be seen and the image on the right to be seen the next step is to create some sort of grid to display information about the image those keywords that we have used can be used to generate a new image based on the information from the image generated by artificial intelligence so what we're going to do is create a grid element that I'm going to position in row number one inside I'm going to create a rectangle with a black fill this with the purpose of having a section where we can add text similarly I'm going to add an opacity equal to 0.5 and a stroke thickness equal to zero I close this information or this stack and we already have this grid element here where we can start placing the text information after this rectangle I'm going to create a vertical stack layout with a margin equal to 10 comma 0 comma zero comma zero vertical options equal to Center inside I'm going to place a first label element with a font family equal to Nexa heavy iPhone size equal to 25 at x equal to a binding to main keyword and also a text color equal to White I close this first stack we return to the application and here we have the main keyword of the image next we're going to indicate that we want to create a second label control with a font family equal to Nexa light since we want a slightly thinner font font size equal to 15 we bind to the text property of the list called keywords and a text color equal to White if we return to the application we can see that this time it is showing us the full name of the collection and this is not really what we want what we want is to show the set of words we could solve this in various ways such as creating some sort of converter or a property that would only show the list of words with commas in our case one of the easiest options is to install the Donald Maui toolkit this toolkit contains a converter for this and has more functionality that we could use for other things in case we want to further develop the application in the future so I'm going to search as part of this nougat package Searcher for the Maguey toolkit this first result called Community toolkit dot Maui is the one we're going to install as part of the application we accept the terms and close this step we're going to go to magwayprogram.cis and here's what I'm going to do I'm going to indicate that I want to use the Maui Community toolkit with this we can already use the toolkit we return to the dashboard View and what we have to do is first create a reference a namespace we're going to do this xmlns column toolkit equals and we have a specific namespace for the toolkit that's a bit different which is this one schemas.microsoft.com net slash 2022 Maui toolkit with this reference we can now create a new instance of the converter that we're interested in in the resources of the content page let's define this section by indicating that we want a resource dictionary we'll use toolkit colon and the converter that we're interested in which is this one called list two string converter basically it converts at least into a string separated by a character will give it an X key equal to list two string converter and we can specify the separator between each of the elements which in this case is going to be a comma we save the changes return to the keyword property which is this one we see here and we're going to indicate that we want to add a converter to static resource equal to list two string converter I'm going to verify that everything is fine and we're ready we have the X key here I'm going to copy the X key and I'm going to start the application again to make sure everything is set up correctly after a few seconds we get the list of keywords related to the image we previously generated these keywords are shown at the bottom indicating that the converter works correctly the last step is to create the green button that we see at the bottom of the screen although this button is shown like this in emulatory mesh it can be placed in the lower right corner without any problem and that's what we're going to do once we have declared the cover flow view control I will Define a border element and position it in row number four with a margin of 0 comma 15 comma 0 comma zero the horizontal options attribute is set to end to place it at the end of the space we'll use the stroke shape round rectangle 55 comma 0 comma zero comma zero to round one of the corners I would request of 250 units and content that includes a button with a background color equal to e8ff 8e font family equal to Nexa heavy font size equal to 16 a text that says create new image and a text color equal to one zero one two one six with this we can see the button in the lower right corner of the application which would allow us to go to the screen to generate new images with artificial intelligence with this we have completed the challenge of the graphical interface in.net Maui in which we have translated an image from dribble design into saml code for a.net Maui application if you want us to continue developing this application and even get to the part of generating images with artificial intelligence using an API like daily leave it in the comments I hope you enjoyed the video I invite you to like the video subscribe and activate the notification Bell so you know when I release a new video whether it's about Donald maui.net or development in general see you in the next video [Music] thank you

Channel: Devs School

Views: 7,376

Keywords: .net maui ui, .net maui ui challenge, .net maui xaml, .net maui design

Id: 9V4ERQPDn5U

Length: 30min 51sec (1851 seconds)

Published: Mon Apr 10 2023